Skip to main content

Posts

Showing posts from January, 2013

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"><