apex charts added

YogeshUpdhyay · May 13, 2021 · 19f7521 · 19f7521
1 parent 18a6ed3
commit 19f7521
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 44 deletions.
diff --git a/static/assets/js/main.js b/static/assets/js/main.js
@@ -1,4 +1,8 @@
 
+window.onbeforeunload = function () {
+  localStorage.clear();
+}
+
 function submitFilter() {
     // ticker field validation
     if (document.getElementById("ticker").value == ""){
@@ -41,46 +45,28 @@ function submitFilter() {
 }
 
 function onLineTab() {
-  var chart = $('#chart-stock-dark');
-
-  var lineChart = new Chart(chart, {
-    type: 'line',
-    options: {
-      scales: {
-        yAxes: [{
-          gridLines: {
-            lineWidth: 1,
-            color: Charts.colors.gray[900],
-            zeroLineColor: Charts.colors.gray[900]
-          },
-          ticks: {
-            callback: function(value) {
-              if (!(value % 10)) {
-                return '$' + value + 'k';
-              }
-            }
-          }
-        }]
+  console.log("Rendering chart")
+  try {
+    var options = {
+      chart: {
+        type: 'line'
       },
-      tooltips: {
-        callbacks: {
-          label: function(item, data) {
-            var label = data.datasets[item.datasetIndex].label || '';
-            var yLabel = item.yLabel;
-            var content = '';
-
-            if (data.datasets.length > 1) {
-              content += '<span class="popover-body-label mr-auto">' + label + '</span>';
-            }
-
-            content += '$' + yLabel + 'k';
-            return content;
-          }
-        }
+      series: [{
+        name: 'sales',
+        data: [30,40,35,50,49,60,70,91,125]
+      }],
+      xaxis: {
+        categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
       }
-    },
-    data: JSON.parse(localStorage.getItem('graphData'))
-  });
+    }
+
+    var chart = new ApexCharts(document.getElementById('chart'), options);
+
+    chart.render();
+  } catch (e) {
+    console.log(e)
+  }
+
 
 }
 

diff --git a/templates/includes/graph.html b/templates/includes/graph.html
@@ -26,9 +26,9 @@ <h5 class="h3 text-white mb-0">Select a ticker and submit</h5>
         </div>
         <div class="card-body">
           <!-- Chart -->
-          <div class="chart">
+          <div class="chart" id="chart">
             <!-- Chart wrapper -->
-            <canvas id="chart-stock-dark" class="chart-canvas"></canvas>
+            <!-- <canvas id="chart-stock-dark" class="chart-canvas"></canvas> -->
           </div>
         </div>
       </div>

diff --git a/templates/index.html b/templates/index.html
@@ -29,10 +29,7 @@
 <!-- Specific JS goes HERE --> 
 {% block javascripts %}
 
-  <script src="/static/assets/vendor/chart.js/dist/Chart.min.js"></script>
-  <script src="/static/assets/vendor/chart.js/dist/Chart.extension.js"></script> 
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
 
 {% endblock javascripts %}