Search code examples
flot

flot: can not use line-chart overview on narrow screen


  • In the 'overview' chart I display data of 3 months X 30 days X 24 hours X 6 samples every hour.
  • In the 'main' chart I display, by default, data of the last day, or data of selected range in the 'overview' or data of selected date.
  • On regular desktop screen it works well.

I now tried to adapt this project into responsive design, and show the charts according to the screen size.

my problem: On narrow screen, when the range in the 'overview' is too small (measured in pixels?), I do not get the overview plotselected event.

  • If I try to dispaly the default last day - I dont get the plotselected event.
  • If I try to select one day on my date picker - I dont get the plotselected event.
  • If I try to select data of 3-last-days, it does work well.
  • If I change to wide screen, all works well.

How can I force 'overview' selection?

In the image below, one can see selection of last-3-days. this works. but selection of last-1-day does not work:

enter image description here


Solution

  • The Flot selection plugin has a minSize option which is by default set to 5 pixels. Since one day of data in your overview is about 3 pixels wide the plotselected event does not fire. Set the minSize to 1 and it should work with a chart of size down to 100 pixels.

    From the comments in the jquery.flot.selection.js file:

    "minSize" is the minimum size a selection can be in pixels. This value can be customized to determine the smallest size a selection can be and still have the selection rectangle be displayed. When customizing this value, the fact that it refers to pixels, not axis units must be taken into account. Thus, for example, if there is a bar graph in time mode with BarWidth set to 1 minute, setting "minSize" to 1 will not make the minimum selection size 1 minute, but rather 1 pixel. Note also that setting "minSize" to 0 will prevent "plotunselected" events from being fired when the user clicks the mouse without dragging.