In this article I will explain with an example, how to dynamically create HTML5 canvas charts using JavaScript, jQuery and JSON.
The HTML 5 Canvas charts have been implemented using Chart.js library to which JSON object is supplied as source of data. This article also covers procedure to display the animated HTML5 chart in browsers that do not support CSS3 like IE 8.
HTML Markup
The HTML Markup consists of an HTML Table with two DIV’s of which one is for displaying the HTML5 chart and other is for displaying the chart legend.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="dvChart">
</div>
</td>
<td>
<div id="dvLegend">
</div>
</td>
</tr>
</table>
JavaScript and jQuery implementation for creating and displaying the Chart
The following code snippet can be placed in the HEAD or BODY section of the page. The very first thing is inheritance of the necessary libraries which includes jQuery, exCanvas.js for displaying HTML5 canvas charts in browsers which do not support HTML5 Canvas and finally the Chart.js library for displaying the HTML5 canvas charts using JavaScript and jQuery.
On the document load event, the LoadChart method is executed. Inside this method an array is created to hold the JSON objects and then one by one JSON object is added to the array.
Each JSON object comprises of
1. text - This value will be displayed in legend.
2. value - This value will be used to populate the Pie chart.
3. color – This value will be used to add color to the Pie chart.
Note: The above described JSON object is for Pie and Doughnut charts, other charts also can be displayed in same manner but their JSON object might contain different properties, for more details please refer ChartJS documentation.
Next we need to build the HTML5 Canvas so that the chart can be drawn on it. Once the canvas is ready and appended to the document, the Chart is generated from the data and drawn on canvas.
Finally a loop is executed over the JSON array and the legend description of the Chart is populated inside the DIV next to the chart.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/chart.js/0./Chart.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
LoadChart();
});
function LoadChart() {
$("#dvChart").html("");
$("#dvLegend").html("");
//Populate data for the chart
var fruits = new Array();
var mango = {};
mango.text = "Mango";
mango.value = 20;
mango.color = "#FEBD01";
fruits.push(mango);
var orange = {};
orange.text = "Orange";
orange.value = 40;
orange.color = "#FF8C00";
fruits.push(orange);
var peach = {};
peach.text = "Peach";
peach.value = 55;
peach.color = "#FFCBA6";
fruits.push(peach);
var el = document.createElement('canvas');
$("#dvChart")[0].appendChild(el);
//Fix for IE 8
if ($.browser.msie && $.browser.version == "8.0") {
G_vmlCanvasManager.initElement(el);
}
var ctx = el.getContext('2d');
var chart = new Chart(ctx).Pie(fruits);
for (var i = 0; i < fruits.length; i++) {
var div = $("<div />");
div.css("margin-bottom", "10px");
div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + fruits[i].color + "'></span> " + fruits[i].text);
$("#dvLegend").append(div);
}
}
</script>
Screenshot
![Dynamically create Charts using JSON, JavaScript & jQuery]()
Demo
Downloads
