canvasjs: is it possible to shift back in time?

Question

I am trying to create a dynamic chart in canvasjs. If the datapoints are above some defined value, the chart will shift. I want to know if it is possible that you can shift back in time, so you can scroll through the dynamic graph.

Kind regards, Ken

Answer 1

You can use Jquery Slider along with viewport to achieve this. Here are two examples

http://jsfiddle.net/canvasjs/ydu922wL/

http://jsfiddle.net/canvasjs/rt1kmfrj/

$(function () {

    // following things are used to customize
    
     // set true to start with dynamic update, false to start with 0
    var isDynamic = true;
	// set to increase or decrease viewport size
    var viewportSize = 10;
    // how frequent dataPoints to be updated
    var milliseconds = 1000;
    
    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 scrollPane = $( ".scroll-pane" );
    
    //while dynamic updating, number of datapoints to be visible
    var dynamicWidth = viewportSize-10;
    
    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};
        	
        	if(isDynamic){
                chart.options.axisX.viewportMinimum = current - dynamicWidth;
                chart.options.axisX.viewportMaximum = chart.options.axisX.viewportMinimum + viewportSize;
                $( ".scroll-bar" ).
                slider( "option", "value", chart.options.axisX.viewportMinimum + dynamicWidth);
            }else{
                chart.options.axisX.viewportMinimum = $( ".scroll-bar" ).slider( "option", "value" );
                chart.options.axisX.viewportMaximum = chart.options.axisX.viewportMinimum + viewportSize;
            }
        	$( ".scroll-bar" ).slider( "option", "max", current++ );
           
      		var newBarWidth = scrollPane.width() / current;   
              if(newBarWidth > 20){
                 scrollbar.find( ".ui-slider-handle" ).css({ 
                     width: newBarWidth,
                     "margin-left": -newBarWidth / 2
                 });
                 handleHelper.width( "" ).width( scrollbar.width() - newBarWidth );
              }
        	chart.render();
    };

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

    var scrollbar = $( ".scroll-bar" ).slider({
        max:6,
        min:0,
      	slide: function( event, ui ) {
			isDynamic = (ui.value === (current-1)) ? true : false;
      	}
    });
 	
    var handleHelper = scrollbar.find( ".ui-slider-handle" )
     .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
     .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
    
    scrollPane.css( "overflow", "hidden" );
    scrollbar.find( ".ui-slider-handle" ).css({width: "102%"});
                
});

 .scroll-pane { width: 100%; float:left; }
  .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px;  }
  .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }
  .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
  .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
  .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
  

<link type="text/css"  href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

<body>
    <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
            <div id="chartContainer" style="height: 400px; width: 100%;"></div>
          <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
            <div class="scroll-bar"></div>
          </div>
    </div>
</body>

$(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 );
        }
    });

});

<link type="text/css"  href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://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>