Multiseries Line Chart from JSON - CanvasJS JavaScript Charts

Multiseries Line Chart from JSON - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 500px; width: 100%;"></div>
<button id="StartButton" class="btn btn-success" type="submit" value="Start">Start Live Chart</button>
<button id="StopButton" class="btn btn-danger" type="submit" value="Stop">Stop Live Chart</button>

CSS

#StartButton {
    display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
#StartButton:hover {background-color:#3e8e41}
#StartButton:active {
	background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#StopButton {
    display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #f44336;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
#StopButton:hover {background-color:#cc0000}
#StopButton:active {
	background-color: #cc0000;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

JavaScript

var data = [[],[],[],[]];
var dataPoints = [];
var dataPoints2 = [];
var dataPoints3 = [];
var dataPoints4 = [];
var chart;

chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text:"Live Chart with dataPoints from External JSON"
    },
    zoomEnabled: true,
    axisX:{
      scaleBreaks:{
        autoCalculate: true,
        maxNumberOfAutoBreaks: 5,
        collapsibleThreshold: "15%"
      },
    },
    zoomType: "xy",
    //backgroundColor: "#bdcfed",
    animationEnabled: true,
    animationDuration: 5000,
    exportEnabled: true,
    theme: "dark1",
    data: [{
      showInLegend: true,
      legendText: "LS1",
      markerType: "circle",
      markerSize: 6,
      markerColor: "red",
      axisYIndex: 0,
      axisYType: "primary",
      xValueType: "dateTime",
      xValueFormatString: "YYYY-MM-DD HH:mm:ss",
      toolTipContent: "x:{x}, y: {y}",
      type: "line",

      dataPoints : dataPoints,
    },{
      showInLegend: true,
      legendText: "LS2",
      markerType: "square",
      markerSize: 6,
      markerColor: "yellow",
      axisYIndex: 1,
      xValueType: "dateTime",
      xValueFormatString: "YYYY-MM-DD HH:mm:ss",
      toolTipContent: "x:{x}, y: {y}",
      type: "line",

      dataPoints : dataPoints2,
    },{
      showInLegend: true,
      legendText: "LS3",
      markerType: "green",
      markerSize: 6,
      markerColor: "red",
      axisYIndex: 2,
      xValueType: "dateTime",
      xValueFormatString: "YYYY-MM-DD HH:mm:ss",
      toolTipContent: "x:{x}, y: {y}",
      type: "line",

      dataPoints : dataPoints3,
    },{
      showInLegend: true,
      legendText: "LS4",
      markerType: "cross",
      markerSize: 6,
      markerColor: "blue",
      axisYIndex: 3,
      xValueType: "dateTime",
      xValueFormatString: "YYYY-MM-DD HH:mm:ss",
      toolTipContent: "x:{x}, y: {y}",
      type: "line",

      dataPoints : dataPoints4,
    }
    
    ]
  });

$.getJSON('https://api.myjson.com/bins/1dwyg6',...