Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" class="chartContainer"></div>
<div id="chartContainer2" class="chartContainer"></div>

CSS

.chartContainer {
    width:50%;
    border: 10px solid #CCCCCC;
    box-sizing: border-box;
    float:left;
    height:300px;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer1", {

    title: {
        text: "Fruits sold in First Quarter"
    },
    data: [ //array of dataSeries              
    { //dataSeries object

        /*** Change type "column" to "bar", "area", "line" or "pie"***/
        type: "column",
        dataPoints: [{
            label: "banana",
            y: 18
        }, {
            label: "orange",
            y: 29
        }, {
            label: "apple",
            y: 40
        }, {
            label: "mango",
            y: 34
        }, {
            label: "grape",
            y: 24
        }]
    }]
});

chart.render();

var chart = new CanvasJS.Chart("chartContainer2", {

    title: {
        text: "Fruits sold in First Quarter"
    },
    data: [ //array of dataSeries              
    { //dataSeries object

        /*** Change type "column" to "bar", "area", "line" or "pie"***/
        type: "column",
        dataPoints: [{
            label: "banana",
            y: 18
        }, {
            label: "orange",
            y: 29
        }, {
            label: "apple",
            y: 40
        }, {
            label: "mango",
            y: 34
        }, {
            label: "grape",
            y: 24
        }]
    }]
});

chart.render();