Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

by Jernej Slejko

HTML

<script src="https://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
    }
];

$(document).ready({
  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();
 });