Update 2023-11-15-data_visualization.markdown

TripleYei · Nov 15, 2023 · 09993d4 · 09993d4
1 parent c5cd06e
commit 09993d4
Showing 1 changed file with 54 additions and 3 deletions.
diff --git a/_posts/2023-11-15-data_visualization.markdown b/_posts/2023-11-15-data_visualization.markdown
@@ -57,7 +57,7 @@ Work with Data in D3
 ## Chart.js
 
 
-Gráfico Barras
+Pie Charts
 ~~~~
 <!DOCTYPE html>
 <html>
@@ -67,15 +67,20 @@ Gráfico Barras
 <body>
 	
   <canvas id="myChart"></canvas>
- 
+  <style>
+  	canvas{
+  		width: 100%;
+  		max-width: 700px;
+  	}
+  </style>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
 <script>
   const ctx = document.getElementById('myChart');
 
   new Chart(ctx, {
-    type: 'bar',
+    type: 'pie',
     data: {
       labels: ['HTML', 'CSS', 'JS'],
       datasets: [{
@@ -97,3 +102,49 @@ Gráfico Barras
 </html>
 ~~~~
 
+
+Bar Charts
+
+~~~~
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+</head>
+<body>
+	
+  <canvas id="myChart"></canvas>
+  <style>
+  	canvas{
+  		width: 100%;
+  		max-width: 700px;
+  	}
+  </style>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<script>
+  const ctx = document.getElementById('myChart');
+
+  new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: ['HTML', 'CSS', 'JS'],
+      datasets: [{
+        label: '# of Votes',
+        data: [12, 19, 3],
+        borderWidth: 1
+      }]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+</script>
+</body>
+</html>
+~~~~