templates/fiche/fiche-batiment/analyse.html.twig line 1

Open in your IDE?
  1. {% extends 'baseSyntherm.html.twig' %}
  3. {% block title %}
  4.     SOBRO XML
  5. {% endblock %}
  7. {% block body %}
  8.     <div class="form-row">
  9.         <div class="form-group col-md-8">
  10.             <br>
  11.             Ceci est la fiche n° {{ theFicheBatiment.id }}.<br>
  12.             {% if theFicheBatiment.theUser %}
  13.                 Utilisateur :
  14.                     <a href="{{ path('user_manage_fiche', {'id' : theFicheBatiment.theUser.id}) }}">
  15.                         {{ theFicheBatiment.theUser }}
  16.                     </a>
  17.                 <br>
  18.             {% endif %}
  19.             MOA : {{ theFicheBatiment.moa }}<br>
  20.             Nom du Projet : {{ theFicheBatiment.nomDuProjet }}<br>
  21.             Ville : {{ theFicheBatiment.ville }}<br>
  22.             Département : {{ theFicheBatiment.departement }}<br>
  23.             Usage : {{ theFicheBatiment.nomUsage }}<br>
  25.                         BBIO chaud = {{ theFicheBatiment.bbioChaudAnnuel }}pts / Moyenne database : {{ bbioChaudAnnuelMoyen }} <br>
  26.                         Compacité = {{ theFicheBatiment.compacite }} m2env/ m²SHON / Moyenne database : {{ compaciteMoyen }} <br>
  27.                         Taux de brassage = {{ theFicheBatiment.tauxBrassageBBIO }}vol/h / Moyenne database : {{ tauxBrassageBBIOMoyen }} <br>
  28.                         Taux de vitrage = {{ theFicheBatiment.tauxVitrage }}m2vitr/m²SHON / Moyenne database : {{ tauxvitrageMoyen }} <br>
  29.                         Uw moyen = {{ theFicheBatiment.uwMoyen }}W/m².K / Moyenne database : {{ uwMoyenMoyen }} <br>
  30.                         Déperditions pour 19°C interieur = {{ DeperditionkW }} kW <br>
  31.             <br></div>
  32.             {% if theFicheBatiment.CepCh is not null %}
  33.             <div class="form-group col-md-4">
  34.                 <div id="cep" style="height: 370px; width: 100%;">
  35.                     
  36.                 </div>
  37.                 
  38.             </div>
  39.             {% endif %}
  40.             </div>
  41.             
  42.     <div><br>
  43.     Analyse du chauffage : 
  44.     <br></div>        
  45.             
  46.     <div class="form-row">
  47.         <div class="form-group col-md-3">
  48.             <div id="BBIO" style="height: 370px; width: 250px;"></div></div>
  49.         <div class="form-group col-md-3">
  50.             <div id="compacite" style="height: 370px; width: 250px;"></div></div>
  51.         <div class="form-group col-md-3">
  52.             <div id="ratioPsi" style="height: 370px; width: 250px;"></div></div>
  53.         <div class="form-group col-md-3">
  54.             <div id="deperditionSurfacique" style="height: 370px; width: 250px;"></div></div>
  55.     </div>
  56.     <div class="form-row">
  57.         <div class="form-group col-md-3">
  58.             <div id="UwMoyen" style="height: 370px; width: 250px;"></div></div>
  59.         <div class="form-group col-md-3">
  60.             <div id="masqueMoyen" style="height: 370px; width: 250px;"></div></div>
  61.         <div class="form-group col-md-3">
  62.             <div id="brassage" style="height: 370px; width: 250px;"></div></div>
  63.         <div class="form-group col-md-3">
  64.             <div id="TauxVitrage" style="height: 370px; width: 250px;"></div></div>                   
  65.     </div>
  66.     
  67.             
  68.           {% if theFicheBatiment.RatioEclNat is not null %}  
  69.     <div> <br>
  70.     Analyse de l'éclairage naturel: 
  71.      <br></div>
  72.     <div class="form-row">
  73.         <div class="form-group col-md-3">
  74.                 <div id="RatioEclNat" style="height: 370px; width: 250px;"></div></div>
  75.         {#<div class="form-group col-md-3">
  76.             <div id="TauxVitrage" style="height: 370px; width: 250px;"></div></div>#}
  78.     </div>
  79.          {% endif %}
  80.     <div>
  81.      <br>
  82.         Analyse de la ventilation : 
  83.       <br>
  84.     </div>
  85.     <div class="form-row">
  87.         <div class="form-group col-md-3">
  88.             <div id="PVentSpecifiqueBatiment" style="height: 370px; width: 250px;"></div></div> 
  89.         <div class="form-group col-md-3">
  90.             <div id="brassage" style="height: 370px; width: 250px;"></div></div>
  91.     </div>                     
  92.     <br>
  93.     <a class="nav-link" href="{{ path('aide') }}">Aide à la lecture{#<span class="sr-only">(current)</span>#}</a>
  94.     <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  96.     <script>
  97.         window.onload = function () {
  99.         var chart = new CanvasJS.Chart("BBIO", {
  100.         animationEnabled: true,
  101.                 theme: "light2", // "light1", "light2", "dark1", "dark2"
  102.                 title:{
  103.                 text: "BBIO chaud"
  104.                 },
  105.                 axisY: {
  106.                 title: "BBIO chaud en pts",
  107.                         includeZero: false,
  108.                         tickLength: 0,
  109.                         gridDashType: "dash",
  110.                 },
  111.                 legend: {
  112.                 cursor: "pointer",
  113.                         itemclick: toggleDataSeries
  114.                 },
  115.                 dataPointWidth: 20,
  116.                 data: [{
  117.                 type: "boxAndWhisker",
  118.                         toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Maximum:</b> {y[3]},<br><b>10% les plus hauts:</b> {y[2]},<br><b>Médiane:</b> {y[4]}<br><b>10% les plus faibles:</b> {y[1]}<br><b>Minimum:</b> {y[0]}",
  119.                         yValueFormatString: "#####.0 pts",
  120.                         dataPoints: [
  121.                         { x: 0, label: "Database", y:
  122.         {{graphjson.graphBbio}}
  123.                             }
  124.                             ]
  125.                     },
  126.                     {
  127.                     type: "scatter",
  128.                             name: "Bbio chaud projet",
  129.                             toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y}",
  130.                             showInLegend: true,
  131.                             dataPoints: [
  132.                             { x: 0, label: "Projet", y: {{ theFicheBatiment.bbioChaudAnnuel }} },
  133.                             ]
  134.                     }]
  135.             }); chart.render();
  136.             var chart = new CanvasJS.Chart("compacite", {
  137.             animationEnabled: true,
  138.                     theme: "light2", // "light1", "light2", "dark1", "dark2"
  139.                     title:{
  140.                     text: "Compacité"
  141.                     },
  142.                     axisY: {
  143.                     title: "Compacité en m²env / m²SHON",
  144.                             includeZero: false,
  145.                             tickLength: 0,
  146.                             gridDashType: "dash",
  147.                     },
  148.                     legend: {
  149.                     cursor: "pointer",
  150.                             itemclick: toggleDataSeries
  151.                     },
  152.                     dataPointWidth: 20,
  153.                     data: [{
  154.                     type: "boxAndWhisker",
  155.                             toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Maximum:</b> {y[3]},<br><b>10% les plus hauts:</b> {y[2]},<br><b>Médiane:</b> {y[4]}<br><b>10% les plus faibles:</b> {y[1]}<br><b>Minimum:</b> {y[0]}",
  156.                             yValueFormatString: "0.0",
  157.                             dataPoints: [
  158.                             { x: 0, label: "Database", y:
  159.         {{graphjson.graphCompacite}}
  160.                             }
  161.                             ]
  162.                     },
  163.                     {
  164.                     type: "scatter",
  165.                             name: "Compacité",
  166.                             toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y}",
  167.                             showInLegend: true,
  168.                             dataPoints: [
  169.                             { x: 0, label: "Projet", y: {{ theFicheBatiment.compacite }} },
  170.                             ]
  171.                     }]
  172.             }); chart.render();
  173.             var chart = new CanvasJS.Chart("brassage", {
  174.             animationEnabled: true,
  175.                     theme: "light2", // "light1", "light2", "dark1", "dark2"
  176.                     title:{
  177.                     text: "Taux d'air neuf"
  178.                     },
  179.                     axisY: {
  180.                     title: "Brassage en vol/h",
  181.                             includeZero: false,
  182.                             tickLength: 0,
  183.                             gridDashType: "dash",
  184.                     },
  185.                     legend: {
  186.                     cursor: "pointer",
  187.                             itemclick: toggleDataSeries
  188.                     },
  189.                     dataPointWidth: 20,
  190.                     data: [{
  191.                     type: "boxAndWhisker",
  192.                             toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Maximum:</b> {y[3]},<br><b>10% les plus hauts:</b> {y[2]},<br><b>Médiane:</b> {y[4]}<br><b>10% les plus faibles:</b> {y[1]}<br><b>Minimum:</b> {y[0]}",
  193.                             yValueFormatString: "0.00 vol/h",
  194.                             dataPoints: [
  195.                             { x: 0, label: "Database", y:
  196.         {{graphjson.graphBrassage}}
  197.                             }
  198.                             ]
  199.                     },
  200.                     {
  201.                     type: "scatter",
  202.                             name: "taux de brassage",
  203.                             toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y}",
  204.                             showInLegend: true,
  205.                             dataPoints: [
  206.                             { x: 0, label: "Projet", y: {{ theFicheBatiment.tauxBrassageBBIO }} },
  207.                             ]
  208.                     }]
  209.             });
  210.             chart.render();
  211.             var chart = new CanvasJS.Chart("TauxVitrage", {
  212.             animationEnabled: true,
  213.                     theme: "light2", // "light1", "light2", "dark1", "dark2"
  214.                     title:{
  215.                     text: "Taux de vitrage"
  216.                     },
  217.                     axisY: {
  218.                     title: "Taux de vitrage en m²v/m²SHON",
  219.                             includeZero: false,
  220.                             tickLength: 0,
  221.                             gridDashType: "dash",
  222.                     },
  223.                     legend: {
  224.                     cursor: "pointer",
  225.                             itemclick: toggleDataSeries
  226.                     },
  227.                     dataPointWidth: 20,
  228.                     data: [{
  229.                     type: "boxAndWhisker",
  230.                             toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Maximum:</b> {y[3]},<br><b>10% les plus hauts:</b> {y[2]},<br><b>Médiane:</b> {y[4]}<br><b>10% les plus faibles:</b> {y[1]}<br><b>Minimum:</b> {y[0]}",
  231.                             yValueFormatString: "0.00 m²v/m²",
  232.                             dataPoints: [
  233.                             { x: 0, label: "Database", y:
  234.         {{graphjson.graphTauxVitrage}}
  235.                             }
  236.                             ]
  237.                     },
  238.                     {
  239.                     type: "scatter",
  240.                             name: "Taux vitrage",
  241.                             toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y}",
  242.                             showInLegend: true,
  243.                             dataPoints: [
  244.                             { x: 0, label: "Projet", y: {{ theFicheBatiment.tauxVitrage }} },
  245.                             ]
  246.                     }]
  247.             });
  248.             chart.render(); var chart = new CanvasJS.Chart("UwMoyen", {
  249.             animationEnabled: true,
  250.                     theme: "light2", // "light1", "light2", "dark1", "dark2"
  251.                     title:{
  252.                     text: "Uw Moyen"
  253.                     },
  254.                     axisY: {
  255.                     title: "Uw en W/m².K",
  256.                             includeZero: false,
  257.                             tickLength: 0,
  258.                             gridDashType: "dash",
  259.                     },
  260.                     legend: {
  261.                     cursor: "pointer",
  262.                             itemclick: toggleDataSeries
  263.                     },
  264.                     dataPointWidth: 20,
  265.                     data: [{
  266.                     type: "boxAndWhisker",
  267.                             toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Maximum:</b> {y[3]},<br><b>10% les plus hauts:</b> {y[2]},<br><b>Médiane:</b> {y[4]}<br><b>10% les plus faibles:</b> {y[1]}<br><b>Minimum:</b> {y[0]}",
  268.                             yValueFormatString: "0.00 W/m²K",
  269.                             dataPoints: [
  270.                             { x: 0, label: "Database", y:
  271.         {{graphjson.graphUwMoyen}}
  272.                             }
  273.                             ]
  274.                     },
  275.                     {
  276.                     type: "scatter",
  277.                             name: "Uw",
  278.                             toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y}",
  279.                             showInLegend: true,
  280.                             dataPoints: [
  281.                             { x: 0, label: "Projet", y: {{ theFicheBatiment.uwMoyen }} },
  282.                             ]
  283.                     }]
  284.             });
  285.             chart.render(); var chart = new CanvasJS.Chart("RatioEclNat", {
  286.             animationEnabled: true,
  287.                     theme: "light2", // "light1", "light2", "dark1", "dark2"
  288.                     title:{
  289.                     text: "Taux d'éclairage naturel"
  290.                     },
  291.                     axisY: {
  292.                     title: "% accès à la lumière naturelle",
  293.                             includeZero: false,
  294.                             tickLength: 0,
  295.                             gridDashType: "dash",
  296.                     },
  297.                     legend: {
  298.                     cursor: "pointer",
  299.                             itemclick: toggleDataSeries
  300.                     },
  301.                     dataPointWidth: 20,
  302.                     data: [{
  303.                     type: "boxAndWhisker",
  304.                             toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Maximum:</b> {y[3]},<br><b>10% les plus hauts:</b> {y[2]},<br><b>Médiane:</b> {y[4]}<br><b>10% les plus faibles:</b> {y[1]}<br><b>Minimum:</b> {y[0]}",
  305.                             yValueFormatString: "0.00",
  306.                             dataPoints: [
  307.                             { x: 0, label: "Database", y:
  308.         {{graphjson.graphRatioEclNat}}
  309.                             }
  310.                             ]
  311.                     },
  312.                     {
  313.                     type: "scatter",
  314.                             name: "Projet",
  315.                             toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y}",
  316.                             showInLegend: true,
  317.                             dataPoints: [
  318.                             { x: 0, label: "", y: {{ theFicheBatiment.RatioEclNat }} },
  319.                             ]
  320.                     }]
  321.             });
  322.                         chart.render(); var chart = new CanvasJS.Chart("ratioPsi", {
  323.             animationEnabled: true,
  324.                     theme: "light2", // "light1", "light2", "dark1", "dark2"
  325.                     title:{
  326.                     text: "Pont thermique moyen"
  327.                     },
  328.                     axisY: {
  329.                     title: "en W/ml/K",
  330.                             includeZero: false,
  331.                             tickLength: 0,
  332.                             gridDashType: "dash",
  333.                     },
  334.                     legend: {
  335.                     cursor: "pointer",
  336.                             itemclick: toggleDataSeries
  337.                     },
  338.                     dataPointWidth: 20,
  339.                     data: [{
  340.                     type: "boxAndWhisker",
  341.                             toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Maximum:</b> {y[3]},<br><b>10% les plus hauts:</b> {y[2]},<br><b>Médiane:</b> {y[4]}<br><b>10% les plus faibles:</b> {y[1]}<br><b>Minimum:</b> {y[0]}",
  342.                             yValueFormatString: "0.00",
  343.                             dataPoints: [
  344.                             { x: 0, label: "Database", y:
  345.         {{graphjson.graphratioPsi}}
  346.                             }
  347.                             ]
  348.                     },
  349.                     {
  350.                     type: "scatter",
  351.                             name: "Projet",
  352.                             toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y}",
  353.                             showInLegend: true,
  354.                             dataPoints: [
  355.                             { x: 0, label: "", y: {{ theFicheBatiment.ratioPsi }} },
  356.                             ]
  357.                     }]
  358.             });
  359.             
  360. chart.render(); var chart = new CanvasJS.Chart("PVentSpecifiqueBatiment", {
  361.             animationEnabled: true,
  362.                     theme: "light2", // "light1", "light2", "dark1", "dark2"
  363.                     title:{
  364.                     text: "Puissance ventilateur"
  365.                     },
  366.                     axisY: {
  367.                     title: "en W/m3/h",
  368.                             includeZero: false,
  369.                             tickLength: 0,
  370.                             gridDashType: "dash",
  371.                     },
  372.                     legend: {
  373.                     cursor: "pointer",
  374.                             itemclick: toggleDataSeries
  375.                     },
  376.                     dataPointWidth: 20,
  377.                     data: [{
  378.                     type: "boxAndWhisker",
  379.                             toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Maximum:</b> {y[3]},<br><b>10% les plus hauts:</b> {y[2]},<br><b>Médiane:</b> {y[4]}<br><b>10% les plus faibles:</b> {y[1]}<br><b>Minimum:</b> {y[0]}",
  380.                             yValueFormatString: "0.00 W/m3/h",
  381.                             dataPoints: [
  382.                             { x: 0, label: "Database", y:
  383.         {{graphjson.graphPVentSpecifiqueBatiment}}
  384.                             }
  385.                             ]
  386.                     },
  387.                     {
  388.                     type: "scatter",
  389.                             name: "Projet",
  390.                             toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y}",
  391.                             showInLegend: true,
  392.                             dataPoints: [
  393.                             { x: 0, label: "", y: {{ theFicheBatiment.PVentSpecifiqueBatiment }} },
  394.                             ]
  395.                     }]
  396.             });                            
  397. chart.render(); var chart = new CanvasJS.Chart("deperditionSurfacique", {
  398.             animationEnabled: true,
  399.                     theme: "light2", // "light1", "light2", "dark1", "dark2"
  400.                     title:{
  401.                     text: "Deperdition totale surfacique"
  402.                     },
  403.                     axisY: {
  404.                     title: "en W/m²",
  405.                             includeZero: false,
  406.                             tickLength: 0,
  407.                             gridDashType: "dash",
  408.                     },
  409.                     legend: {
  410.                     cursor: "pointer",
  411.                             itemclick: toggleDataSeries
  412.                     },
  413.                     dataPointWidth: 20,
  414.                     data: [{
  415.                     type: "boxAndWhisker",
  416.                             toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Maximum:</b> {y[3]},<br><b>10% les plus hauts:</b> {y[2]},<br><b>Médiane:</b> {y[4]}<br><b>10% les plus faibles:</b> {y[1]}<br><b>Minimum:</b> {y[0]}",
  417.                             yValueFormatString: "0.00 W/m²",
  418.                             dataPoints: [
  419.                             { x: 0, label: "Database", y:
  420.         {{graphjson.graphdeperditionSurfacique}}
  421.                             }
  422.                             ]
  423.                     },
  424.                     {
  425.                     type: "scatter",
  426.                             name: "Projet",
  427.                             toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y}",
  428.                             showInLegend: true,
  429.                             dataPoints: [
  430.                             { x: 0, label: "", y: {{ theFicheBatiment.deperditionSurfacique }} },
  431.                             ]
  432.                     }]
  433.             });
  434.             chart.render(); var chart = new CanvasJS.Chart("masqueMoyen", {
  435.             animationEnabled: true,
  436.                     theme: "light2", // "light1", "light2", "dark1", "dark2"
  437.                     title:{
  438.                     text: "Masque lointain moyen"
  439.                     },
  440.                     axisY: {
  441.                     title: "en degré",
  442.                             includeZero: false,
  443.                             tickLength: 0,
  444.                             gridDashType: "dash",
  445.                     },
  446.                     legend: {
  447.                     cursor: "pointer",
  448.                             itemclick: toggleDataSeries
  449.                     },
  450.                     dataPointWidth: 20,
  451.                     data: [{
  452.                     type: "boxAndWhisker",
  453.                             toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Maximum:</b> {y[3]},<br><b>10% les plus hauts:</b> {y[2]},<br><b>Médiane:</b> {y[4]}<br><b>10% les plus faibles:</b> {y[1]}<br><b>Minimum:</b> {y[0]}",
  454.                             yValueFormatString: "0.00°",
  455.                             dataPoints: [
  456.                             { x: 0, label: "Database", y:
  457.         {{graphjson.graphmasqueMoyen}}
  458.                             }
  459.                             ]
  460.                     },
  461.                     {
  462.                     type: "scatter",
  463.                             name: "Projet",
  464.                             toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y}",
  465.                             showInLegend: true,
  466.                             dataPoints: [
  467.                             { x: 0, label: "", y: {{ theFicheBatiment.masqueMoyen }} },
  468.                             ]
  469.                     }]
  470.             });
  471.                        
  472.             
  473.             
  474.                             {% if theFicheBatiment.CepCh is not null %}
  475.             chart.render();
  476.             var chart = new CanvasJS.Chart("cep", {
  477.             animationEnabled: true,
  478.                     title:{
  479.                     text: "Cep",
  480.                             fontFamily: "arial black",
  481.                             fontColor: "#695A42"
  482.                     }, legend: {
  483.             horizontalAlign: "left", // left, center ,right 
  484.                     verticalAlign: "center", // top, center, bottom
  485.             },
  486.                     axisX: {
  488.                     },
  489.                     axisY:{includeZero: true,
  490.                 title : "Consommation en kWhEP/m²/an",
  491.                             valueFormatString:"0",
  492.                             gridColor: "#B6B1A8",
  493.                             tickColor: "#B6B1A8"
  494.                     },
  495.                     toolTip: {
  496.                     shared: true,
  497.                             content: toolTipContent
  498.                     },
  499.                     data: [{
  500.                     type: "stackedColumn",
  501.                             showInLegend: true,
  502.         color: "red",
  503.                             name: "Chauffage",
  504.                             dataPoints: [
  505.                             { y:{{ theFicheBatiment.CepCh }}, label: "Cep" }
  506.                             ]
  507.                     },
  508.                     {
  509.                     type: "stackedColumn",
  510.                             showInLegend: true,
  511.                             name: "Climatisation",
  512.         color: "blue",
  513.                             dataPoints: [
  514.                             { y:{{ theFicheBatiment.CepFr }}, label: "Cep" }
  515.                             ]
  516.                     },
  517.                     {
  518.                     type: "stackedColumn",
  519.                             showInLegend: true,
  520.                             name: "ECS",
  521.         color: "orange",
  522.                             dataPoints: [
  523.                             { y:{{ theFicheBatiment.CepECS }}, label: "Cep" }
  524.                             ]
  525.                     },
  526.                     {
  527.                     type: "stackedColumn",
  528.                             showInLegend: true,
  529.                             name: "Eclairage",
  530.         color: "yellow",
  531.                             dataPoints: [
  532.                             { y:{{ theFicheBatiment.CepEcl }}, label: "Cep" }]
  533.                     },
  534.                     {
  535.                     type: "stackedColumn",
  536.                             showInLegend: true,
  537.                             name: "Ventilateurs",
  538.         color: "green",
  539.                             dataPoints: [
  540.                             { y:{{ theFicheBatiment.CepVentil }}, label: "Cep" }]
  541.                     },
  542.                     {
  543.                     type: "stackedColumn",
  544.                             showInLegend: true,
  545.                             name: "Distribution",
  546.         {#color: "#B6B1A8",#}
  547.                             dataPoints: [
  548.                             { y:{{ theFicheBatiment.CepDistrib }}, label: "Cep" }
  549.                             ]
  550.                     }]
  551.             });
  552.             chart.render();
  553.             function toolTipContent(e) {
  554.             var str = "";
  555.             var total = 0;
  556.             var str2, str3;
  557.             for (var i = 0; i < e.entries.length; i++){
  558.             var str1 = "<span style= \"color:" + e.entries[i].dataSeries.color + "\"> " + e.entries[i].dataSeries.name + "</span>: <strong>" + e.entries[i].dataPoint.y + "</strong> kWhEP/m²/an<br/>";
  559.             total = e.entries[i].dataPoint.y + total;
  560.             str = str.concat(str1);
  561.             }
  562.             str2 = "<span style = \"color:DodgerBlue;\"><strong>" + (e.entries[0].dataPoint.x).getFullYear() + "</strong></span><br/>";
  563.             total = Math.round(total * 100) / 100;
  564.             str3 = "<span style = \"color:Tomato\">Total:</span><strong> " + total + "</strong>kWhEP/m²/an<br/>";
  565.             return (str2.concat(str)).concat(str3);
  566.             }
  568. {% endif %}
  571.             function toggleDataSeries(e) {
  572.             if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
  573.             e.dataSeries.visible = false;
  574.             } else {
  575.             e.dataSeries.visible = true;
  576.             }
  577.             e.chart.render();
  578.             }
  580.             }
  584.     </script>
  586. {% endblock %}