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:

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",
"val" : 80,
"color" : ["#151B8D", "#FFFFFF"]},
{"label" : "Raw Meat Items Sell",
"val" : 60,
"color" : ["#F87431", "#FFFFFF"]},
{"label" : "Kitchen Items Sell",
"val" : 120,
"color" : ["#6D7B8D", "#FFFFFF"]},
{"label" : "Dress Material Sell",
"val" : 20,
"color" : ["#806D7E", "#FFFFFF"]},
{"label" : "Furniture Sell",
"val" : 117,
"color" : ["#9172EC", "#FFFFFF"]},
{"label" : "Toys And Sports Items Sell",
"val" : 101,
"color" : ["#C031C7", "#FFFFFF"]},
{"label" : "Food Items Sell",
"val" : 70,
"color" : ["#808000", "#FFFFFF"]}
],
"fill_style" : "gradient",
"values" : {
"visible" : true,
"color" : "#806D7E"
},
"slice_shadow" : {
"visible" : true,
"color" : "#000000"
},
"animate" : true,
"legend" : {
"visible" : true,
"position": "e",
"width" : 220,
"colorbandwidth" : 20,
"itempadding" : 2
},
"drawoninit" : true,
"onpulloutcomplete" : function (prm_obj) {
alert(prm_obj["label"]);
},
"onclick" : function (prm_obj) {
alert(prm_obj["label"]);
}
};
g_chart = new PieChart(_data, true);
}

JSON structure is very complex for this chart, we are going to explain each of the keys in the next section.

First lets understand the need of declaring the global variable:
We need to handle clicks on pie chart of individual slices. Click handler function is a member function of PieChart object. We would require the object reference to call the function. That's why we defined the PieChart object as a global variable.

JSON Key Details

id: Required. Canvas id on which chart is to be drawn.
data: Required. This will contain array of JSON object that needs to be plotted in the chart. This can contain any no. of children, however the following are required:

label: String which needs to be displayed in legend for this data

val: Value of the corresponding category

color: Array/String. Contains all the colors for gradient display. However for single color pattern this can be a string.

Any number of children can be added based on the requirement.

fill_style: Required. Specifies the slice fill style. Allowed Values are "plain" and "gradient"

values: Optional. Defines display of values and configured with the following children:

visible: If values will be visible.

color: Color of the values to be displayed.

slice_shadow: Optional. Object containing slice shadow configurations. Following are the children

visible: If shadow will be visible.

color: Color of the shadow to be displayed.

animate: Boolean value to use animation on slice pullout action.

legend: Optional. Default value is specified in file as PieChart.c_obj_LEGEND. Following are the children of this element:

visible: Boolean to specify if legend will be visible.

position: String to specify legend display position. Only the following positions are allowed:

width: Number to specify legend width. Please not if canvas width is x and legend width is x, chart will be displayed within (x-y).

colorbandwidth: Number to specify width of color band.

itempadding: Number to specify padding of each legend item.

textstyle: String to specify legend text style.

drawoninit: Boolean value to initiate chart drawing right after the initialization is complete.

onclick: Function pointer to define a custom onclick action. Respective slice data will be passed in this function. Say in the above example slice for "Kitchen Items Sell" is clicked, the following object will be available in the onclick action function:

{"label" : "Kitchen Items Sell",
"val" : 120,
"color" : ["#6D7B8D", "#FFFFFF"]}

onpulloutcomplete: Function pointer to define a custom action to be performed after the slice pull out is complete. Respective slice data will be passed in this function. Say in the above example slice for "Kitchen Items Sell" is clicked, the following object will be available in the onclick action function:

{"label" : "Kitchen Items Sell",
"val" : 120,
"color" : ["#6D7B8D", "#FFFFFF"]}

Tips

PieChart object can be initialized with 2 parameters,

prm_data - Required. This will contain data for chart rendering.
prm_draw - Optional. This will specify if draw function is to be called or not. Default value is true.

To push a pulled out slice to its original position click outside the chart but within the canvas.

Click and pullout complete action cannot be used simultaneously. Click event will prevent pullout action.

Legend will display in order the data has been passed.

Result

Browser Support

Link

Sample can be downloaded from the following link:

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

File details:

piechart.html - Html file which contains the pie chart

PieChart.js - API to render pie chart within canvas element

An working example can be fount here:

http://jsfiddle.net/kumarjitc/nF8bM/

Comments

"FIRE ON YOUR WILL" - you are free to use/modify this wherever needed

Coffee Table

Search This Blog