Animated Meter Chart with HTML5 Canvas Element And JavaScript

Introduction

Greetings of the day! This is one of very old posts porting into this new site.

http://kumarjitc.blogspot.com/2013/01/

This was created for a requirement back in 2012. I have used vanilla JavaScript for this.

Chart was created using canvas elements of HTML5.

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 to 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 method 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:

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. 🙂