CanvasJS HTML5 JavaScript Charts

CanvasJS helps you create chart in the most simple and efficient way possible

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 400px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

JavaScript

window.onload = function () {
	
var chart = new CanvasJS.Chart("chartContainer", {
	data: [
  {
    "type": "bar",
    "color": "#CAB1D7",
    "showInLegend": false,
    "xValueType": "dateTime",
    "dataPoints": [{
        "x": 1534847760000,
        "y": 10
    }, {
        "x": 1534847880000,
        "y": 120
    }, {
        "x": 1534848000000,
        "y": 460
    }, {
        "x": 1534848120000,
        "y": 337
    }, {
        "x": 1534848240000,
        "y": 206
    }, {
        "x": 1534848360000,
        "y": 143
    }, {
        "x": 1534848480000,
        "y": 152
    }, {
        "x": 1534848600000,
        "y": 251
    }, {
        "x": 1534848720000,
        "y": 199
    }, {
        "x": 1534848840000,
        "y": 138
    }, {
        "x": 1534848960000,
        "y": 177
    }, {
        "x": 1534849080000,
        "y": 88
    }, {
        "x": 1534849200000,
        "y": 108
    }, {
        "x": 1534849320000,
        "y": 89
    }, {
        "x": 1534849440000,
        "y": 154
    }, {
        "x": 1534849560000,
        "y": 293
    }, {
        "x": 1534849680000,
        "y": 159
    }, {
        "x": 1534849800000,
        "y": 183
    }, {
        "x": 1534849920000,
        "y": 243
    }, {
        "x": 1534850040000,
        "y": 451
    }, {
        "x": 1534850160000,
        "y": 505
    }, {
        "x": 1534850280000,
        "y": 165
    }, {
        "x": 1534850400000,
        "y": 156
    }, {
        "x": 1534850520000,
        "y": 446
    }, {
        "x": 1534850640000,
        "y": 321
    }, {
        "x": 1534850760000,
        "y": 324
    }, {
        "x": 1534850880000,
        "y": 286
    }, {
        "x": 1534851000000,
        "y": 251
    }, {
        "x": 1534851120000,
        "y": 260
    }, {
        "x": 1534851240000,
        "y": 268
    }, {
        "x": 1534851360000,
        "y": 138
    }]
}]
}
);


chart.render();

}