Skip to main content

Line Chart With HTML 5 Canvas Element



Introduction

Greetings of the day! 

As a continuation to my earlier post, this is a line chart with a single line. This  is with HTML 5 Canvas element. However animation is not available in this.

Description

As earlier this will follow the same logic. Use "LineChart" object to render the chart. 

I have the following code in html page:




 <body style="margin-left:50px;margin-top:50px;" onload="draw()">
    <canvas id="canvas" width="500" height="300"></canvas>
</body>



The canvas element in html code will be rendered as line chart.


We have initialized the line chart object as follows:


 var _data = {
id: "canvas",
height: "300",
width: "500",
dataPointFont: '10pt Arial',
axisColors: {
xLineColor : '#151B54',
xPointColor : '#FF00FF',
xTextColor : '#FF00FF',
xParallelLineColor : '#AFC7C7',
yLineColor : '#151B54',
yPointColor : '#FF00FF',
yTextColor : '#FF00FF',
yParallelLineColor : '#AFC7C7'
},
visibility : {
xAxis: true,
xParallel: false,
xPoint: true,
xText: true,
yAxis: true,
yParallel: false,
yPoint: true,
yText: true,
dataValue: false,
dataPoint: true,
dataPointConnector: true
},
x: ['JAN', 'FEB', 'MAR', 'APR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
y: {
y1: {
val: [3.9, 7.2, 12.8, 23.1, 62.9, 123.2, 92.2, 36.5, 458.3, 203.2, 248.7, 309.7, 176.5],
color: '#808000'
},
y2: {
val: [230.9, 52.2, 24.8, 131.1, 32.9, 139.2, 72.2, 6.5, 111.3, 179.2, 223.7, 120.7, 389.8],
color: '#3EA99F'
},
y3: {
val: [120.5, 23.2, 44.8, 68.1, 34.9, 19.2, 172.2, 182.5, 211.3, 134.2, 102.7, 200.7, 48.2],
color: '#F87431'
}
}
  };

tst = new LineChart(_data);

Call the above initialization from any function and we good to go. JSON structure is a bit complex. Each of the JSON keys is explained below.

JSON Key Details

Here points are referred to a solid circled area.

id: Required. Canvas id on which chart is to be drawn.
height: Optional. Defines the height of the chart to be drawn. Default value available.
width: Optional. Defines the width of the chart to drawn. Default value available.
axisColors: Optional. All the children are also optional. Default value available. If any of the children key value is not provided, picked from default value.
  • xLineColor: For "X" axis
  • xPointColor: For point on "X" axis
  • xTextColor:  For values on "X" axis
  • xParallelLineColor: For lines parallel to "X" axis
  • yLineColor: For "Y" axis
  • yPointColor: For point on "Y" axis
  • yTextColor: For values on "Y" axis
  • yParallelLineColor: For lines parallel to "Y" axis
visibility: Optional. All the children are also optional. Default value available. If any of the children key value is not provided, picked from default value. Setting true of false in children value will make the children display/hide.
  • xAxis: "X" axis visibility
  • xParallel: "X" axis parallel lines visibility
  • xPoint: "X" axis value points visibility
  • xText: "X" axis values visibility
  • yAxis: "Y" axis visibility
  • yParallel: "Y" axis parallel lines visibility
  • yPoint: "Y" axis value points visibility
  • yText: "Y" axis values visibility
  • dataValue: Data values visibility
  • dataPoint: Data value point visibility
  • dataPointConnector: Visibility of connectors between data points
x: Required. "X" axis points.
y: Required. "Y" axis points. Children will define the lines. Children needs to be defined as y1, y2,......yn
  • y1
    • val: Value array
    • color: Trend line and value point color

Tips

  • You can use as many lines as you want.

Result

Browser Support

Link

Sample can be downloaded from the following link:

https://github.com/kumarjitc/CoffeeTable/tree/LineChart

File details:
  • index.html - Html file which contains the line chart
  • LineChart.js - API to render line chart within canvas element
An working example can be fount here:
http://jsfiddle.net/kumarjitc/2cQBf/

Comments

  • "FIRE ON YOUR WILL" - you are free to use/modify this wherever needed
  • I am still working on this.
  • A few data alignment issues exist in this.
Labels:
Location: Kolkata, West Bengal, India

Comments

Post a Comment

Popular posts from this blog

Pie Chart With HTML5 Canvas Element

Introduction Greetings of the day!  As a continuation to my earlier posts, this is a Pie chart. This  is with HTML 5 Canvas element. Animation is available in this only in slice pullout. Description As earlier this will follow the same logic. Use  "PieChart" object to render the chart.  I have the following code in html page: <body onload="draw()">     <canvas id="myCanvas" width="660" height="400" onclick="g_chart.handleClick(event, this)"></canvas>   </body> The canvas element in html code will be rendered as pie chart. We have to work a little trick here, we have to use a global variable. We will later explain the requirement for a global variable. So the function call will be like the following: var g_chart; function draw() { var _data = { "id" : "myCanvas", "data" : [ {"label" : "Medicine Items Sell", ...
1 comment
Read more

Animated Meter Chart with HTML5 Canvas ELement And JavaScript

Introduction Greetings of the day!  Charts and graphs are one hotspot in desktop and mobile web environment. There are few tools available in market which can be used to cater the purpose. However, I have met large amount of compatibility issues with different devices and browsers. Few of them are also not free. I had to use some charts in mobile browser for some project and I faced a lot of problem with these APIs. After a few searches, with no results, I have decided to create my own chart for the project. HTML5 came up with a new element named as "canvas". Drawing is much easier with canvas apis. I have created a animated meter chart with this. Description I have created a JavaScript object "MeterChart" to render the chart. First I will walk through how to use it. I have the following code in html page: <table> <tr> <td><canvas id="cnv1" width="500" height="20">...
5 comments
Read more