Dynamically create Charts using JSON, JavaScript & jQuery

Html Markup
-----------------

<table border="0" cellpadding="0" cellspacing="0">

    <tr>

        <td>

            <div id="dvChart">

            </div>

        </td>

        <td>

            <div id="dvLegend">

            </div>

        </td>

    </tr>

</table>

Javascript

----------

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

Note: This will work in latest browsers only