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.

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

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

Included JavaScript file

Call the Chart Function

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.

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

Complete HTML

Conclusion

I hope you have created your own chart.

Output