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"></canvas></td>

</tr>

<tr>

<td><canvas id="cnv2" width="500" height="20"></canvas></td>

</tr>

<tr>

<td><canvas id="cnv3" width="500" height="20"></canvas></td>

</tr>

</table>

The canvas elements in html code will be rendered as metercharts.

We have initialize the meterchart object as follows:

var _meter = new MeterChart({

"animate" : true,

"increment_length" : 5,

"fill_style" : "pattern",

"max_height" : 20,

"max_length" : 500,

"data" : [

{"id" : "cnv1", "value" : 600, 'fill_img' : "patternImage.png"},

{"id" : "cnv2", "value" : 200, 'fill_img' : "patternImage1.png"},

{"id" : "cnv3", "value" : 450, 'fill_img' : "patternImage2.png"}

],

"draw_oninit" : true

});  

One more step, now call the above initialization from any function and we are good to go. :)

JSON Key Details

increment_length - Optional. Increment of meter chart in each animation frame. Default value: 1

fill_style - Optional. Specifies the meter bar fill styles. Only following 3 options are accepted:

• plain
• gradient
• pattern

max_height - Optional. Maximum height of the meter bar. Default - 15

max_length - Optional. Maximum length the canvas can reach. Default - 200

data - Required. data on which meter chart will be drawn. Following are the attribute details:

• id - Canvas id
• value - Value
• fill_img = Image url for fill pattern

draw_oninit - This will initialize the meter charts on after initilaize. Else we can call startDrawing() member method to draw the charts

oncomplete - function to be execcuted when all the meters are rendered and the animation is finished

Usage

• To display Bar/Meter charts in various contexts

Tips

• Gradient is only allowed for 2 and 3 colors.
• If only one pattern is to be used for every meter bar, use fill_img in the main JSON object.

Result

Meters with 3 different patterns displayed in browser:

Browser Support

Links

Sample can be downloaded from the following link:

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

File details:

• MeterChart.html - Html file which contains the meter chart
• MeterChart.js - API to render meter charts within canvas elements

An Working example can be found here, though the pattern pictures will not be visible:

http://jsfiddle.net/kumarjitc/K3aya/4/

Comments

• "FIRE ON YOUR WILL" - you are free to use/modify this wherever needed
• This is my first blog post I would like to hear some comments. :)