Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

by Jernej Slejko

HTML

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

JavaScript

var name = 'IP';
var dataSource =[
    {
        "y": 388,
        "decimal": "31322f4170722f32303134",
        "label": "12/Apr/2014",
        "x": 9
    },
    {
        "y": 397,
        "decimal": "32312f4170722f32303134",
        "label": "21/Apr/2014",
        "x": 8
    },
    {
        "y": 513,
        "decimal": "31332f4170722f32303134",
        "label": "13/Apr/2014",
        "x": 7
    },
    {
        "y": 636,
        "decimal": "30392f4170722f32303134",
        "label": "09/Apr/2014",
        "x": 6
    },
    {
        "y": 760,
        "decimal": "31362f4170722f32303134",
        "label": "16/Apr/2014",
        "x": 5
    },
    {
        "y": 770,
        "decimal": "30372f4170722f32303134",
        "label": "07/Apr/2014",
        "x": 4
    },
    {
        "y": 983,
        "decimal": "31302f4170722f32303134",
        "label": "10/Apr/2014",
        "x": 3
    },
    {
        "y": 2054,
        "decimal": "30382f4170722f32303134",
        "label": "08/Apr/2014",
        "x": 2
    },
    {
        "y": 2424,
        "decimal": "31372f4170722f32303134",
        "label": "17/Apr/2014",
        "x": 1
    },
    {
        "y": 2507,
        "decimal": "31312f4170722f32303134",
        "label": "11/Apr/2014",
        "x": 0
    }
];

var chart = new CanvasJS.Chart("chartContainer",
	{
        zoomEnabled: true,
        panEnabled: true,
        title:{
            text: "Column analysis for: " + name
        },
        data: [{
            type: "column",		//"column" to "bar", "area", "line" or "pie"
            dataPoints: dataSource
        }],
        axisX :{
            labelAngle: 90,
            gridThickness: 0,
            labelFontSize: 10,
            labelFontStyle: "normal",
            labelFontWeight: "normal",
            labelFontFamily: "Lucida Sans Unicode"
        },
    });

 chart.render();