ggg

index.html

@@ -134,7 +134,7 @@
                     <div class="row">hey</div>
                     <div class="row">
                       <div>
-                        <canvas id="Chart"></canvas>
+                        <canvas id="chart_canvas"></canvas>
                       </div>
                   </div>        
                   </div>          

index.js

@@ -5,7 +5,7 @@ location(id INTEGER PRIMARY KEY AUTOINCREMENT , subdiv TEXT, LGA TEXT)
 statistics(id INTEGER PRIMARY KEY AUTOINCREMENT , category_id INTEGER, subcat_id INTEGER DEFAULT 0, location_id INTEGER, month TEXT NOT NULL, count INTEGER NOT NULL,FOREIGN KEY(category_id) REFERENCES categories(id), FOREIGN KEY(subcat_id) REFERENCES subcat(id), FOREIGN KEY(location_id) REFERENCES location(id))
 
 */
-var chart;
+
 //init sqlite
 function getSelectValues(sel) {
     var result = [];
@@ -101,10 +101,30 @@ class Component {
     }
 }
 
-class Chart extends Component {
+new Chart(document.getElementById("chart_canvas"), {
+    type: 'bar',
+    data: {
+      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+      datasets: [{
+        label: '# of Votes',
+        data: [12, 19, 3, 5, 2, 3],
+        borderWidth: 1
+      }]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+
+class ChartComponent extends Component {
     constructor(dbhandler){
         super(dbhandler);
         this.ctx = document.getElementById("Chart");
+
     }
 
     //params = {"subdiv","lga nullable", "cat", "subcat"}