Handling Mobile swipe events - CanvasJS JavaScript Charts

Handling Mobile swipe events - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dps = [];

var noOfDays = 90 * 24 * 60 * 60 * 1000; //90days in timestamp

//-- Generate Datapoints
var xVal = new Date(2017, 04, 01).getTime(),
    yVal = 10,
    numberOfDps = 100;
for(var i = 0; i < numberOfDps; i++) {
  dps.push({x: xVal, y: yVal});
  xVal += 10 * 24 * 60 * 60 * 1000; // 10days in timestamp
  yVal = yVal + Math.round(5 + Math.random() * (-5 - 5)); 
}

var chart = new CanvasJS.Chart("chartContainer", { 
	title: {
  text: "Handling Swipe Events"
  },
  axisX:{
    valueFormatString: "MMM-DD",
    viewportMinimum: new Date(2017, 06, 01),
    viewportMaximum: new Date(2017, 08, 01),
  },
  data: [
    {
      type: "spline",
      xValueType: "dateTime",
      dataPoints: dps
    }					
  ]
});

chart.render();

$('#chartContainer').on('swipeleft', function() {
  if(chart.axisX[0].get("viewportMaximum") < chart.data[0].dataPoints[chart.data[0].dataPoints.length-1].x){
    chart.options.axisX.viewportMinimum = chart.axisX[0].get("viewportMinimum") + noOfDays;
    chart.options.axisX.viewportMaximum = chart.axisX[0].get("viewportMaximum") + noOfDays;
    chart.render();
  }
});

$('#chartContainer').on('swiperight', function() {
	if(chart.axisX[0].get("viewportMinimum") > chart.data[0].dataPoints[0].x){
    chart.options.axisX.viewportMinimum = chart.axisX[0].get("viewportMinimum") - noOfDays;
    chart.options.axisX.viewportMaximum = chart.axisX[0].get("viewportMaximum") - noOfDays;
    chart.render();
  }
});