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": "#00FFFF",
        "xValueType": "dateTime",
        "name": "teste",
        "showInLegend": true,
        "markerSize": 5,
        "dataPoints": [{
        "x": 1397520000000,
            "y": 99.801
    }, {
        "x": 1397606400000,
            "y": 99.869
    }, {
        "x": 1397692800000,
            "y": 99.836
    }, {
        "x": 1397779200000,
            "y": 99.84
    }, {
        "x": 1397865600000,
            "y": 99.868
    }, {
        "x": 1397952000000,
            "y": 99.899
    }, {
        "x": 1398038400000,
            "y": 99.887
    }, {
        "x": 1398124800000,
            "y": 99.86
    }, {
        "x": 1398211200000,
            "y": 99.9
    }]
}];


var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: false,
    title: {
        text: "teste",
        fontSize: 12,
        fontFamily: "verdana",
    },

    axisX: {
        valueFormatString: "DD-MMM",
        labelAngle: -50,
        labelFontSize: 12,
    },
    axisY: {
        labelFontSize: 12,
        titleFontFamily: "verdana",
        titleFontSize: 12,
        titleFontWeight: "lighter",
       // maximum : undefined,
       // minimum : undefined,
        title: "%"

    },

    theme: "theme2",
    data: data,
});
chart.render();