Line Chart with jQueryUI Slider (Range Slider) | CanvasJS JavaScript Charts

Line Chart with jQueryUI Slider (Range 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="chartContainer1" style="height: 360px; width: 100%;"></div>
<div id = "slider1"></div>

JavaScript

var dps = randomDataGenerator(100);

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

chart1.render();

$("#slider1").slider({
  range: true,
  min: chart1.axisX[0].get("minimum"),
  max: chart1.axisX[0].get("maximum"),
  values: [ 20, 70 ], //Defalt zoom state
  slide: function( event, ui ) {
  	chart1.axisX[0].set("viewportMinimum", ui.values[0], false);
    chart1.axisX[0].set("viewportMaximum", ui.values[1]);    
  }
});

chart1.axisX[0].set("viewportMinimum", $("#slider1").slider("values", 0), false);
chart1.axisX[0].set("viewportMaximum", $("#slider1").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;
}