Skip to main content

Posts

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",
Recent posts

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',

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