Jquery Slider with Viewport - CanvaJS Javascript Charts

Jquery Slider with Viewport - CanvaJS Javascript Charts

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>
<body>
    <div id="chartContainer" style="height: 400px; width: 100%;"></div>
    <div id="slider-range" style="width:100%;"></div><br/><br/>
</body>

JavaScript

$(function () {

    var dataPoints = [
        {y:10},
        {y:14},
        {y:0},
        {y:20},
        {y:14},
        {y:7}
    ];

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Live Data Scroll"
        },
         axisY:{
           gridThickness: 0,
         },
        data: [{
            type: "line",
            dataPoints: dataPoints
        }]
    });
    chart.render();
    
    var current = 0;
    
    var updateChart = function () {
        chart.options.data[0].dataPoints.push({
            y: Math.random() * 10 + 5
        });
        
        if(!chart.options.axisX)
            chart.options.axisX={viewportMinimum:null, viewportMaximum:null};

            chart.options.axisX.viewportMinimum = current++;
            chart.render();
    };

    setInterval(function () {
        updateChart()
    }, 500);


    $("#slider-range").slider({
        range: "max",
        min:0,
        value:10,
        slide: function (event, ui) {
            current = ui.value;
            $( "#slider-range" ).slider( "option", "max", dataPoints[dataPoints.length-1].x );
        	$( "#slider-range" ).slider(  "value", current );
       		$( "#slider-range" ).slider( "option", "min", 0 );
        }
    });

});