chart js embedded HTML

ken-santoso · ken-santoso · commit c772a9ab7a8d · 2019-05-22T10:10:37.000+10:00
Invoice summary chart
diff --git a/example/src/main/webapp/chart.html b/example/src/main/webapp/chart.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+</head>
+<body>
+
+<script>
+
+
+  fetch("http://localhost:8080/InvoiceSummaryServlet", {
+    method: "GET",
+    headers: new Headers({'content-type': 'application/json'}),
+    mode: "no-cors"
+  }).then(function (data) {//first function gets the data
+    return data.json();
+  }).then(function (myJson) {
+    var data = myJson;
+    var ctx = document.getElementById('myChart').getContext('2d');
+
+    var chart = new Chart(ctx, {
+      // The type of chart we want to create
+      type: 'line',
+
+      // The data for our dataset
+      data: {
+        labels: Object.keys(data),
+        datasets: [{
+          label: 'My First dataset',
+          backgroundColor: 'rgb(39,29,255)',
+          borderColor: 'rgb(39,29,255)',
+          data: Object.values(data)
+        }]
+      },
+
+      // Configuration options go here
+      options: {}
+    });
+  });
+</script>
+
+
+<canvas id="myChart"></canvas>
+
+
+</body>
+</html>
