Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

by daniel silva

HTML

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

JavaScript

var data = [{
    "type": "line",
        "axisYType": "primary",
        "color": "#1fd2d0",
        "xValueType": "dateTime",
        "name": "RBG1E - kpi_101_cssr_speech",
        "showInLegend": true,
        "markerSize": 5,
        "dataPoints": {
        "0": {
            "x": 1399766400000,
                "y": 97.804
        },
            "1": {
            "x": 1399852800000,
                "y": 98.387
        },
            "2": {
            "x": 1399939200000,
                "y": 98.582
        },
            "3": {
            "x": 1400025600000,
                "y": 98.588
        },
            "4": {
            "x": 1400112000000,
                "y": 98.709
        },
            "5": {
            "x": 1400198400000,
                "y": 98.254
        },
            "6": {
            "x": 1400284800000,
                "y": 98.11
        },
            "7": {
            "x": 1400371200000,
                "y": 97.99
        },
            "8": {
            "x": 1400457600000,
                "y": 98.518
        },
            "9": {
            "x": 1400544000000,
                "y": 98.548
        },
            "10": {
            "x": 1400630400000,
                "y": 98.412
        },
            "11": {
            "x": 1400716800000,
                "y": 98.509
        },
            "12": {
            "x": 1400803200000,
                "y": 98.423
        },
            "13": {
            "x": 1400889600000,
                "y": 99.445
        },
            "14": {
            "x": 1400976000000,
                "y": 99.564
        }
    }
}, {
    "type": "line",
        "axisYType": "primary",
        "color": "#bc908e",
        "xValueType": "dateTime",
        "name": "RLD03E - kpi_101_cssr_speech",
        "showInLegend": true,
        "markerSize": 5,
        "dataPoints": {
        "0": {
            "x": 1399766400000,
                "y": 98.711
        },
            "1": {
            "x": 1399852800000,
      ...