Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

HTML

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {
      zoomEnabled: true,
      panEnabled: true,
        
      title:{
      text: "GDP"
      },
    theme: "theme1",
      axisX: {
        valueFormatString: "YYYY",
        gridThickness: "0",
        interval:10,
        intervalType: "year"
      },
      axisY:{
        gridThickness: "0",
        includeZero: false

      },
      data: [
      {
        type: "area",
        color: "#60C3B1",

        dataPoints: [
            { x: new Date(1947,01,01), y: 1934.5}, 
            { x: new Date(1947,04,01), y: 1932.3}, 
            { x: new Date(1947,07,01), y: 1930.3}, 
            { x: new Date(1947,10,01), y: 1960.7}, 
            { x: new Date(1948,01,01), y: 1989.5}, 
            { x: new Date(1948,04,01), y: 2021.9}, 
            { x: new Date(1948,07,01), y: 2033.2}, 
            { x: new Date(1948,10,01), y: 2035.3}, 
            { x: new Date(1949,01,01), y: 2007.5}, 
            { x: new Date(1949,04,01), y: 2000.8}, 
            { x: new Date(1949,07,01), y: 2022.8}, 
            { x: new Date(1949,10,01), y: 2004.7}, 
            { x: new Date(1950,01,01), y: 2084.6}, 
            { x: new Date(1950,04,01), y: 2147.6}, 
            { x: new Date(1950,07,01), y: 2230.4}, 
            { x: new Date(1950,10,01), y: 2273.4}, 
            { x: new Date(1951,01,01), y: 2304.5}, 
            { x: new Date(1951,04,01), y: 2344.5}, 
            { x: new Date(1951,07,01), y: 2392.8}, 
            { x: new Date(1951,10,01), y: 2398.1}, 
            { x: new Date(1952,01,01), y: 2423.5}, 
            { x: new Date(1952,04,01), y: 2428.5}, 
            { x: new Date(1952,07,01), y: 2446.1}, 
            { x: new Date(1952,10,01), y: 2526.4}, 
            { x: new Date(1953,01,01), y: 2573.4}, 
            { x: new Date(1953,04,01), y: 2593.5}, 
            { x: new Date(1953,07,01), y: 2578.9}, 
            { x: new Date(1953,10,01), y: 2539.8}, 
            { x: new Date(1954,01,01), y: 2528.0}, 
     ...