chart.js

KhujamovCodes · Jul 5, 2024 · 8388fc3 · 8388fc3
1 parent f1741a1
commit 8388fc3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -3,12 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="./script.js"></script>
+    <script defer src="./script.js"></script>
     <title>Chart js</title>
 </head>
 <body>
-    <div>
+    <div style="width: 800px; display: flex; justify-content: center;">
         <canvas id="myChart"></canvas>
-      </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,20 +1,30 @@
-const ctx = document.getElementById('myChart');
+let elList = document.getElementById("demo");
 
-new Chart(ctx, {
-  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
-      }
-    }
-  }
-});
+let API = "https://dummyjson.com/products";
+
+fetch(API).then((response) => response.json()).then((data) => {
+        data.products.map((item) => {
+        const ctx = document.getElementById('myChart');
+
+        new Chart(ctx, {
+          type: 'doughnut',
+          data: {
+            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', '', 'Blue'],
+            datasets: [{
+              label: '# of Votes',
+              data: [item.rating, item.rating, item.price, item.discountPercentage, item.price, item.rating, item.rating, item.price, item.rating, item.price, item.price, item.stock, item.price, item.discountPercentage],
+              borderWidth: 2,
+              width:"10px",
+              color: "red"
+            }]
+          },
+          options: {
+            scales: {
+              y: {
+                beginAtZero: true
+              }
+            }
+          }
+        });
+    });
+})