In this article I will explain with an example, how to create simple Pie chart with HTML5 Canvas using JavaScript, jQuery and JSON.
The HTML5 Canvas Pie chart have been implemented using Chart.js library to which JSON object is supplied as source of data.
 
 
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 Pie 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
Creating Simple Pie chart with HTML5 Canvas using JavaScript
 
 
Demo
 
 
Downloads