Instead of plotting the whole data and clipping the unnecessary parts, you could keep a global array of all values that you just slice each time you need to update the graph. Then you can more easily recompute your x axis & values. Downside is you cannot easily have a transition.

So, you would have two variables:

var globalOffset = 0;
var panOffset = 0;

globalOffset would be updated each time you populate new values and panOffset each time you pan. Then you just slice your data before plotting:

var offset = Math.max(0, globalOffset + panOffset);
var graphData = globalData.slice(offset, offset + 100);

See fiddle for complete solution.

Related Query

More Query from same tag