SplineArea Chart : Bandwidth Graph with gridlines - CanvasJS JavaScript Charts

SplineArea Chart : Bandwidth Graph with gridlines - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<center>
  <div id="chart1" style="height: 500px; width: 70%;"></div>

JavaScript

$(function() {
  //Better to construct options first and then pass it as a parameter
  var options = {
    theme: "theme1",
    exportEnabled: true,
    animationEnabled: true,
    zoomEnabled: true,
    title: {
      text: "Bandwidth Graph – (17-03-2016)",
      fontSize: 25,
    },
    toolTip: {
      shared: true
    },
    axisY: {
      title: "Mega Bits",
      gridThickness: 1,
      stripLines: [{
        lable: 23630,
        value: 23630,
        color: "red",
        labelFormatter: function(e) {
          return "85%";
        }
      }]
    },
    axisX: {
      title: "Time",
      labelFontSize: 14,
      interval: 6,
      labelAngle: -90,
      gridThickness: 1,
      gridColor: "#c9c9c9",
      interlacedColor: "#f9f9f9"
    },
    legend: {
      cursor: "pointer",
      itemclick: function(e) {
        //console.log("legend click: " + e.dataPointIndex);
        //console.log(e);
        if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
          e.dataSeries.visible = false;
        } else {
          e.dataSeries.visible = true;
        }

        e.chart.render();
      }
    },
    data: [{
        type: "splineArea", //change it to line, area, bar, pie, etc
        name: "Download",
        showInLegend: true,
        //toolTipContent:"test",
        dataPoints: [{
          label: "00:00",
          y: 17155.39,
          name: "Download (62 %)"
        }, {
          label: "00:10",
          y: 16694.18,
          name: "Download (60 %)"
        }, {
          label: "00:20",
          y: 16026.8,
          name: "Download (58 %)"
        }, {
          label: "00:30",
          y: 15236.22,
          name: "Download (55 %)"
        }, {
          label: "00:40",
          y: 14405.73,
          name: "Download (52 %)"
        }, {
          label: "00:50",
          y: 13702.21,
          name: "Download (49 %)"
        }, {
          label: "01:00",
          y: 13140.99,
          name: "Download (47 %)"
 ...