Flot: Zoom to Far Right by Default

Question

Let's say you have a flot graph that's 500 pixels wide and it has 100 ticks on the x axis. That will obviously be very crowded by default. The "navigate" plugin helps this situation. For example, if you want to limit it to only 10 ticks at once, you can do this:

$.plot(...).zoom({'amount': total_ticks / 10});

However, I'm not sure how to make it so that when the graph is first drawn, it is showing the last ten (the ten on the far right) by default, not just a random set of ten from the middle. Also, although the example I gave assumes there are 100 ticks, I won't actually know the number beforehand, so if it's 100 ticks then I want to see ticks 91 through 100 by default. If it's 108 ticks then I want to see ticks 99 through 108 by default. How can I do this?

Answer 1

On your initial zoom, just set the center option to the width of your chart:

$.plot($('#graph_with_zoom'), [data], plot_options).zoom({
    'amount': total_ticks / 5,
    'center': { left: 400, top: 0 }
});

Updated fiddle here.

Answer 2

flot provide Selection and zooming example. you can select range of portion and it will redraw your graph.