CanvasJS JavaScript Chart with jQuery slider

CanvasJS JavaScript Chart with jQuery slider

by canvasjs

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>

<div id="chartContainer" style="height: 400px; width: 100%;"></div>
<div id="slider"></div>

JavaScript

var axisRange = 1000;
var viewportRange = 100;
var startAt = 0;

//-------- Chart ---------------
var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: false,
  title: {
    text: "Scrollable Chart"
  },
  axisX : {
    viewportMinimum : startAt,
    viewportMaximum : startAt+viewportRange
  },
  data: [{ 
    type: "line" ,
    dataPoints : dataGenerator(axisRange)
  }]
});
chart.render();

//--------------------Data Generator-----------------------
function dataGenerator(limit) {
  var y = 0;
  var points = [];
  for (var i = 0; i < limit; i += 1) {
    y += (Math.random() * 10 - 5);
    points.push({
      x: i ,
      y: y
    });
  }
  return points;
}
//-------------------------
function updateChart(event, ui){
  if(!chart.options.axisX)
    chart.options.axisX={viewportMinimum:null, viewportMaximum:null};
  chart.options.axisX.viewportMinimum = ui.value;
  chart.options.axisX.viewportMaximum = chart.options.axisX.viewportMinimum + viewportRange;
  chart.render();
}

//------------------- Scroll--------------------

$("#slider").slider({
  max: axisRange - viewportRange,
  min: 0,
  value: startAt,
  slide: updateChart   
});