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: 400px; width: 100%;"></div>

JavaScript

var points = new Array({
    x: 1396396800, // 02/04/2014
    y: 90
},{
    x: 1396483200, //03/04/2014
    y: 95
});

var data = new Array();

var serie = {
    type: 'line',
    xValueType: "dateTime",
    dataPoints: points
};
data.push(serie);


var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: false,
    title: {
        text:'teste',
        fontSize: 14,
    },
    axisX: {
        valueFormatString: "DD-MMM-YYYY",
        labelAngle: -50
    },
    legend: {
        verticalAlign: "center",
        horizontalAlign: "left",
        fontSize: 12,
        fontFamily: "Helvetica"
    },
    theme: "theme2",
    data: data,
});
chart.render();