Site icon Sibeesh Passion

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

SibeeshVenu

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.         ]
  26.     }

Properties

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.         ]
  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.     }
  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

Exit mobile version