How to add a scroll bar to X-axis or Y-axis in can

Question

I have a multi-series flot graph which is plotted in a canvas of width and height. When the flot graph has multi series it tries to compress within the height and width of the canvas and the flot graph wont't be seen clearly.

In order to obtain a clear graph with all the series visible with all the nodes I want to introduce a scroll bar in such a way that the scroll bar fits only few series at first then by scrolling the rest of the series should be seen .

How do i do it?

Answer 1

Put it in a div:

<div class="graph">
   <!-- here the graph -->
</div>

CSS:

 .graph
 {
 width: 200px;
 overflow-y:scroll; 
 overflow-x:hidden;
 }

WIth the overflow attribute, you can control where a scrollbar should be.

Answer 2

If you don't want to use the panning and zooming plugin (as @MF82 suggests) and want a true scroll bar, just wrap the container target div in another div:

<div 
  style="width:315px;height:300px;overflow-y:scroll">
    <div class="chart" id="placeholder1" style="width:300px;height:1000px;">
     </div>
</div>

Fiddle example here.

Answer 3

I think you can pass some options to Flot (with Navigation plugin), such as:

pan: {
    interactive: true
},
xaxis: {
    panRange: [Your xmin, your xmax]
} 

where panRange means:

"panRange" confines the panning to stay within a range, e.g. with panRange: [-10, 20] panning stops at -10 in one end and at 20 in the other. Either can be null.

Navigation example