Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flotgraph series on/off, hover, zoom/pan and tracking

Tags:

jquery

flot

I am trying to combine the flot examples:

  • http://people.iola.dk/olau/flot/examples/turning-series.html
  • http://people.iola.dk/olau/flot/examples/navigate.html
  • http://people.iola.dk/olau/flot/examples/tracking.html

into one graph. Thanks to many answers from this forum, I am able to combine turning-series and navigate; preview : http://www.tryit.sg/flotmaster/example/ajax.php , however I cannot seems to add tracking...

It seems like, if i edit the 'labels', the flot graph does not show anything because the labels do not match. Is there a trick/hack so I will be able to have an x axis showing the value of those plots in the legend?

I actually managed to add in the tracking, but now i cannot add multiple axis, anyone can give me an idea how?

like image 882
user1878466 Avatar asked Dec 05 '12 09:12

user1878466


1 Answers

Tutorial: Flot – How to Create Charts with Multiple Axes breaks down all the other components; it's very detailed and should help you solve your problem. Here's the relevant code snippet from the example on how to to accomplish multiple axes.

    yaxes: [
        {
            tickFormatter: function (val, axis) {
                return val + "mm";
            },
            max: 65,
            axisLabel: "Rainfall",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
            axisLabelPadding: 5
        },
        {
            position: 0,
            tickFormatter: function (val, axis) {
                return val + "\u00B0C";
            },
            max: 40,
            axisLabel: "Temperature",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
            axisLabelPadding: 5
        }
    ],

Here's another example: http://people.iola.dk/olau/flot/examples/multiple-axes.html

You can find more examples by searching around with good ol' Google: https://www.google.com/search?q=flot+multiple+axes

like image 96
JSuar Avatar answered Oct 26 '22 09:10

JSuar