Line Chart with jQuery Slider (Vertical Slider) | CanvasJS JavaScript Charts

Line Chart with jQuery Slider (Vertical Slider) | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id = "slider" style="float:left;"></div>
<div id="chartContainer" style="height: 360px; width: 90%;float:left;"></div>

JavaScript

var dps = randomDataGenerator(100);

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
  	text: "Line Chart with jQueryUI Slider"
  },
  axisY: {
    includeZero: true
  },
  data: [{
    type: "line",
    dataPoints: dps
  }]
});

chart.render();

$("#slider").slider({
  range: true,
  orientation: "vertical",
  min: chart.axisY[0].get("minimum"),
  max: chart.axisY[0].get("maximum"),
  values: [ 50, 100 ], //Defalt zoom state
  slide: function( event, ui ) {
  	chart.axisY[0].set("viewportMinimum", ui.values[0], false);
    chart.axisY[0].set("viewportMaximum", ui.values[1]);    
  }
});

$("#slider").css({ top: (chart.axisY[0].bounds.y1 + "px"), height:  (chart.axisY[0].bounds.y2 - chart.axisY[0].bounds.y1)});

chart.axisY[0].set("viewportMinimum", $("#slider").slider("values", 0), false);
chart.axisY[0].set("viewportMaximum", $("#slider").slider("values", 1));

function randomDataGenerator(limit) {
  var dps = [], yVal = 100;
  for(var i = 0; i < limit; i++) {  
    yVal += Math.floor(Math.random() * 10 - 5);
    dps.push({ x: i, y: yVal });
  }
  return dps;
}