flot - Show 5 days along x axis with panning -

flot - Show 5 days along x axis with panning -

i'm trying show 5 points along x axis, panning enabled - want user pan through other points beyond 5.

i have disabled zoom, problem seems more info add, points along x axis starts seek , increase.

so if load 20 points worth of data, instead of showing 5 points user should pan other 15, x axis "zooms out" show many points possible.

also, how set start position? in if there 20 points, , points showing, how set view start @ point 10 15, user pans first 10 points, , pans forwards remaining 5?

use these options x axis:

xaxis: { panrange: [0, 20], min: 5, max: 10 }

panrange defines borders of range pan , min & max define start range.

edit: can specify array ticknames:

var ticks = [ [1, 'one'], [2, 'two'],

and utilize this:

xaxis: { ... ticks: ticks,

see code snippet below total example:

class="snippet-code-js lang-js prettyprint-override">$(function() { var info = [ [1, 2], [2, 3], [3, 1], [4, 4], [5, 2], [6, 3], [7, 3], [8, 2], [9, 1], [10, 1], [11, 3], [12, 4], [13, 2], [14, 2], [15, 4], [16, 3], [17, 3], [18, 1], [19, 4] ]; var ticks = [ [1, 'one'], [2, 'two'], [3, 'three'], [4, 'four'], [5, 'five'], [6, 'six'], [7, 'seven'], [8, 'eight'], [9, 'nine'], [10, 'ten'], [11, 'eleven'], [12, 'twelve'], [13, 'thirteen'], [14, 'fourteen'], [15, 'fifteen'], [16, 'sixteen'], [17, 'seventeen'], [18, 'eighteen'], [19, 'nineteen'] ]; var options = { series: { points: { show: true }, lines: { show: true } }, xaxis: { panrange: [0, 20], min: 5, max: 10, ticks: ticks, tickdecimals: 0 }, yaxis: { panrange: [0, 5], min: 0, max: 5, tickdecimals: 0 }, zoom: { interactive: false }, pan: { interactive: true } }; var plot = $.plot('#placeholder', [data], options); }); class="snippet-code-css lang-css prettyprint-override">#placeholder { width: 400px; height: 300px; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://www.flotcharts.org/flot/jquery.flot.js"></script> <script src="http://www.flotcharts.org/flot/jquery.flot.navigate.js"></script> <div id="placeholder"></div>

flot