Post
Ask Question

Client-Side Chart Widget in HTML 5: Part 1 (Bar Chart)

Introduction

 
Hi all, I hope you are fine. Today we will explain a client-side chart widget in HTML 5.
 
Background
 
As in the header, we will work with a client-side chart. For that, we have a powerful widget.
 
That is Chart.JS. Please download the necessary files here.
 
Using the code
 
The following is a simple HTML:
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Bar Chart Using Chart.js</title>  
  5. </head>  
  6.    <body></body>  
  7. </html>  
Included JavaScript file.
  1. <script src="Chart.js"></script>  
Call the Chart Function as in the following:
  1. window.onload = function () {  
  2.         var canvasObject = document.getElementById("myChart").getContext("2d");  
  3.         window.myBar = new Chart(canvasObject).Bar(barChartData, {  
  4.             responsive: true  
  5.         });  
  6.     }  
Here we are loading the chart into the myChart.
 
As you can see in the preceding code, barChartData is the data we will load into the chart.
  1. var barChartData = {  
  2.         labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],  
  3.         datasets: [  
  4.             {  
  5.                 fillColor: "rgba(220,220,220,0.5)",  
  6.                 strokeColor: "rgba(220,220,220,0.8)",  
  7.                 highlightFill: "rgba(220,220,220,0.75)",  
  8.                 highlightStroke: "rgba(220,220,220,1)",  
  9.                 data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]  
  10.             },  
  11.             {  
  12.                 fillColor: "rgba(151,187,205,0.5)",  
  13.                 strokeColor: "rgba(151,187,205,0.8)",  
  14.                 highlightFill: "rgba(151,187,205,0.75)",  
  15.                 highlightStroke: "rgba(151,187,205,1)",  
  16.                 data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]  
  17.             }  
  18.         ]  
  19.   
  20.     }  
Properties 
  • Labels
  • Datasets
     
    1. fillColor
    2. strokeColor
    3. highlightFill
    4. highlightStroke
    5. data
Here you can change the properties as you want.
 
Use the following to generate data:
  1. var scalingFactor = function () { return Math.round(Math.random() * 100) };  
Complete HTML
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Bar Chart Using Chart.js</title>  
  5.     <script src="Chart.js"></script>  
  6.     <script>  
  7.     var scalingFactor = function () { return Math.round(Math.random() * 100) };  
  8.     var barChartData = {  
  9.         labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],  
  10.         datasets: [  
  11.             {  
  12.                 fillColor: "rgba(220,220,220,0.5)",  
  13.                 strokeColor: "rgba(220,220,220,0.8)",  
  14.                 highlightFill: "rgba(220,220,220,0.75)",  
  15.                 highlightStroke: "rgba(220,220,220,1)",  
  16.                 data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]  
  17.             },  
  18.             {  
  19.                 fillColor: "rgba(151,187,205,0.5)",  
  20.                 strokeColor: "rgba(151,187,205,0.8)",  
  21.                 highlightFill: "rgba(151,187,205,0.75)",  
  22.                 highlightStroke: "rgba(151,187,205,1)",  
  23.                 data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]  
  24.             }  
  25.         ]  
  26.   
  27.     }  
  28.     window.onload = function () {  
  29.         var canvasObject = document.getElementById("myChart").getContext("2d");  
  30.         window.myBar = new Chart(canvasObject).Bar(barChartData, {  
  31.             responsive: true  
  32.         });  
  33.     }  
  34.   
  35.     </script>  
  36. </head>  
  37. <body>  
  38.     <div>  
  39.         <canvas id="myChart"></canvas>  
  40.     </div>  
  41. </body>  
  42. </html>  

Conclusion

 
I hope you can now create your own chart.
 
Output
 
Output
 


Similar Articles