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/><br/><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: true,
    rangeChanging : updateSlider,
    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){
    console.log(ui.value);
    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();
}

function updateSlider(e){
    if(e.trigger === "reset"){
        viewportRange = 100;
    	$( "#slider" ).slider("value", 0);
        chart.options.axisX.viewportMinimum = startAt;
        chart.options.axisX.viewportMaximum = startAt+viewportRange;
    }else{
        viewportRange = e.axisX.viewportMaximum - e.axisX.viewportMinimum;
        $( "#slider" ).slider("value",e.axisX.viewportMinimum);
    }
}

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