Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="height: 400px; width: 100%;"></div>
<div id="chartContainer2" style="height: 400px; width: 100%;"></div>
<div id="chartContainer3" style="height: 400px; width: 100%;"></div>
<div id="chartContainer4" style="height: 400px; width: 100%;"></div>

JavaScript

function updateChart() {
  for (var j = 1; j < 5; j++) {
     updateChartN(j); 
  }
}

function updateChartN(n) {
    $("#chartContainyer").empty();
    
    var points = new Array();
    for (var j = 0; j < 10; j++) {
        var x = Math.floor((Math.random() * 10) + 1);
        var y = {
            y: x,
            legendText: "" + x,
            label: "" + x
        };
        points.push(y);
    }

    var chart = new CanvasJS.Chart('chartContainer'+n, {
        animationEnabled: false,
        title: {
            text: 'Scenario',
            fontSize: 14,
        },
        legend: {
            verticalAlign: "center",
            horizontalAlign: "left",
            fontSize: 12,
            fontFamily: "Helvetica"
        },
        theme: "theme2",
        data: [{
            type: "pie",
            indexLabelFontFamily: "Garamond",
            indexLabelFontSize: 12,
            startAngle: 180,
            showInLegend: false,
            toolTipContent: "{label}",
            dataPoints: points
        }]
    });

    chart.render();
}
updateChart();
setInterval(updateChart, 300);