Post
Ask Question

Client Side Chart Widget in HTML 5: Part 3 (Line Chart)

Introduction

 
I hope you have read my first two articles in this series that explains about loading a Bar chart and Pie chart. If you have not read them then please see the following links.
Now we will explain a client-side line chart widget in HTML5.
 
Background
 
Please download the necessary files here.
 
Using the code
 
A simple HTML
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Line 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
  1. window.onload = function () {  
  2.         var canvasObject = document.getElementById("myChart").getContext("2d");  
  3.         window.myLine = new Chart(canvasObject).Line(lineChartData, {  
  4.             responsive: true  
  5.         });  
  6.     }  
Here we are loading the chart into myChart.
 
As you can see in the preceding code, lineChartData is the data we will load into the chart.
  1. var lineChartData = {  
  2.         labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],  
  3.         datasets: [  
  4.                 {  
  5.                     label: "My First dataset",  
  6.                     fillColor: "rgba(220,220,220,0.2)",  
  7.                     strokeColor: "rgba(220,220,220,1)",  
  8.                     pointColor: "rgba(220,220,220,1)",  
  9.                     pointStrokeColor: "#fff",  
  10.                     pointHighlightFill: "#fff",  
  11.                     pointHighlightStroke: "rgba(220,220,220,1)",  
  12.                     data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]  
  13.                 },  
  14.                 {  
  15.                     label: "My Second dataset",  
  16.                     fillColor: "rgba(151,187,205,0.2)",  
  17.                     strokeColor: "rgba(151,187,205,1)",  
  18.                     pointColor: "rgba(151,187,205,1)",  
  19.                     pointStrokeColor: "#fff",  
  20.                     pointHighlightFill: "#fff",  
  21.                     pointHighlightStroke: "rgba(151,187,205,1)",  
  22.                     data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]  
  23.                 }  
  24.         ]  
  25.   
  26.     }  
Properties 
  • Labels
  • Datasets
     
    1. fillColor
    2. strokeColor
    3. pointColor
    4. pointStrokeColor
    5. pointHighlightFill
    6. pointHighlightStroke
    7. data
Here you can change the properties as you want.
 
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>Line 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 lineChartData = {  
  9.         labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],  
  10.         datasets: [  
  11.                 {  
  12.                     fillColor: "rgba(220,220,220,0.2)",  
  13.                     strokeColor: "rgba(220,220,220,1)",  
  14.                     pointColor: "rgba(220,220,220,1)",  
  15.                     pointStrokeColor: "#fff",  
  16.                     pointHighlightFill: "#fff",  
  17.                     pointHighlightStroke: "rgba(220,220,220,1)",  
  18.                     data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]  
  19.                 }  
  20.         ]  
  21.   
  22.     }  
  23.     window.onload = function () {  
  24.         var canvasObject = document.getElementById("myChart").getContext("2d");  
  25.         window.myLine = new Chart(canvasObject).Line(lineChartData, {  
  26.             responsive: true  
  27.         });  
  28.     }  
  29.   
  30.     </script>  
  31. </head>  
  32. <body>  
  33.     <div>  
  34.         <canvas id="myChart"></canvas>  
  35.     </div>  
  36. </body>  
  37. </html>  

Conclusion

 
I hope you have created your own chart.
 
Output
 
Output


Similar Articles