Put graph in smart meter box

static/css/main.css

@@ -54,3 +54,8 @@ body {
 .smart_meter_info {
     margin-left: 5%;
 }
+
+.chart {
+    width: 600px;
+    height: 400px;
+}
\ No newline at end of file

templates/main.html

@@ -46,6 +46,48 @@
                     {% endif %}
                     {% endfor %}
                 </ul>
+
+{#            <div class="chart">#}
+                <canvas class="chart" ></canvas>
+                <script>
+                  // bar chart data
+                  var barData = {
+                    labels : [
+                      {% for item in labels %}
+                       "{{ item }}",
+                      {% endfor %}
+                ],
+                    datasets : [{
+                      fillColor: "rgba(151,187,205,0.2)",
+                      strokeColor: "rgba(151,187,205,1)",
+                      pointColor: "rgba(151,187,205,1)",
+                      data : [
+                        {% for item in values %}
+                           "{{ item }}",
+                          {% endfor %}
+                    ]
+                      }
+                    ]
+                  }
+                 // get bar chart canvas
+                 var mychart = document.getElementById("chart").getContext("2d");
+                   steps = 1
+                   max = {{ max }}
+                 // draw bar chart
+                 new Chart(mychart).Bar(barData, {
+                   scaleOverride: true,
+                   scaleSteps: steps,
+                   scaleStepWidth: Math.ceil(max / steps),
+                   scaleStartValue: 0,
+                   scaleShowVerticalLines: true,
+                   scaleShowGridLines : true,
+                   barShowStroke : true,
+                   scaleShowLabels: true
+                   }
+                 );
+                </script>
+
+{#            </div>#}
             </div>
         </div>
     </div>
@@ -68,45 +110,5 @@
         {% endif %}
 
     </div>
-
-<canvas id="chart" width="600" height="400"></canvas>
-    <script>
-      // bar chart data
-      var barData = {
-        labels : [
-          {% for item in labels %}
-           "{{ item }}",
-          {% endfor %}
-	],
-        datasets : [{
-          fillColor: "rgba(151,187,205,0.2)",
-          strokeColor: "rgba(151,187,205,1)",
-          pointColor: "rgba(151,187,205,1)",
-          data : [
-            {% for item in values %}
-               "{{ item }}",
-              {% endfor %}
-	    ]
-          }
-        ]
-      }
-     // get bar chart canvas
-     var mychart = document.getElementById("chart").getContext("2d");
-       steps = 1
-       max = {{ max }}
-     // draw bar chart
-     new Chart(mychart).Bar(barData, {
-       scaleOverride: true,
-       scaleSteps: steps,
-       scaleStepWidth: Math.ceil(max / steps),
-       scaleStartValue: 0,
-       scaleShowVerticalLines: true,
-       scaleShowGridLines : true,
-       barShowStroke : true,
-       scaleShowLabels: true
-       }
-     );
-    </script>
-
 </body>
 </html>