feat: add scatter chart app

TusharUtane07 · Jul 14, 2021 · 7dcd1a3 · 7dcd1a3
1 parent 87d70f9
commit 7dcd1a3
Show file tree

Hide file tree

Showing 5 changed files with 1,318 additions and 1,190 deletions.
diff --git a/assets/Images/scatter_chart.png b/assets/Images/scatter_chart.png
diff --git a/assets/css/scatter_chart.css b/assets/css/scatter_chart.css
@@ -0,0 +1,22 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
+
+body {
+  font-family: "Poppins", sans-serif;
+  text-align: center;
+}
+
+#data-table {
+  margin: 0 auto;
+}
+
+#data-table td,
+#data-table th {
+  padding: 0.5rem 1rem;
+  width: 20%;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  right: 10px;
+}
diff --git a/assets/js/scatter_chart.js b/assets/js/scatter_chart.js
@@ -0,0 +1,59 @@
+const form = document.getElementById("input-form");
+const x = document.getElementById("x");
+const y = document.getElementById("y");
+const table = document.getElementById("data-table");
+const btn = document.getElementById("plot-btn");
+
+var ctx = document.getElementById("myChart").getContext("2d");
+const data = {
+  datasets: [
+    {
+      label: "Scatter Dataset",
+      data: [
+        // {  //example
+        //   x: -10,
+        //   y: 0,
+        // },
+      ],
+      // backgroundColor: "rgb(255, 99, 132)",
+    },
+  ],
+};
+
+var myChart = new Chart(ctx, {
+  type: "scatter",
+  data: data,
+  options: {
+    scales: {
+      x: {
+        type: "linear",
+        position: "bottom",
+      },
+    },
+    responsive: true,
+  },
+});
+
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const row = document.createElement("tr");
+  let color = getRandomColor();
+  data.datasets[0].data.push({ x: x.value, y: y.value });
+  data.datasets[0].backgroundColor = color;
+  row.innerHTML = `<td>${data.datasets[0].data.length}</td><td>${x.value}</td><td>${y.value}</td>`;
+  table.appendChild(row);
+  form.reset();
+  btn.style.backgroundColor = color;
+  myChart.update();
+});
+
+// Returns random color
+function getRandomColor() {
+  let hexDigits = "0123456789ABCDEF";
+  let hexCodeColor = "#";
+
+  for (let i = 0; i < 6; i++) {
+    hexCodeColor += hexDigits[Math.floor(Math.random() * 16)];
+  }
+  return hexCodeColor;
+}
diff --git a/public/scatter_chart.html b/public/scatter_chart.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <!-- chart.js cdn -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"></script>
+    <link rel="stylesheet" href="../assets/css/scatter_chart.css" />
+    <style>
+      canvas#myChart {
+        margin: 3% 10%;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>My Scatter Chart App</h1>
+    <canvas id="myChart" width="400" height="125"></canvas>
+
+    <form id="input-form" on>
+      Enter x:
+      <input type="number" name="x" id="x" required autofocus />
+      Enter y:
+      <input type="number" name="y" id="y" required />
+      <button id="plot-btn" type="submit">Plot</button>
+    </form>
+    <table id="data-table">
+      <tr>
+        <th>Sr. no.</th>
+        <th>x</th>
+        <th>y</th>
+      </tr>
+    </table>
+
+    <div class="footer">
+      <p>Made with ❤️ by Diksha Nigam</p>
+    </div>
+
+    <script src="../assets/js/scatter_chart.js"></script>
+  </body>
+</html>