HTML 5

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs