Added hook to be able to add new graphs with the given series of data. #349

dnschnur opened this Issue Sep 28, 2012 · 4 comments


None yet

1 participant

Flot member

Original author: (December 04, 2009 07:16:32)

Hi, My name is Ricardo, I'm using your very good Flot code to display some
simple graphs, but then I got a request to implement trendlines.

At first it wasn't difficult to add it in my own codes.
But then I started thinking about putting that into a Flot plugin.

But while I was working on it I realized there's no hook that lets you add
series to the graphs, let me explain:

Imagine I pass a series to Flot like: [[0,0],[1,1],[2,2]]
Now what I want to do is to add a NEW line using somehow this first series.
In this case I wanted to add the trendline, so I realized that the hooks
doesn't allow you to ADD series to a graph.

What I did is to add a new hook "processParsedData" that fires at the end
of the loop of parseData function (line 253 of flot 0.6), that hook
receives (plot, series, data):
-plot doesn't need explanation
-series is the array of series of each graph (in this case I got
-data is the current serie iterating to the hook.

So this allow me to develop a plugin that will be triggered for each
explicit given series to the graph, in case you have 3 graphs, you will add
one trendline for each one (or as many new series as you want).

I'm pasting the changed code as I don't know how to do diffs :)
Hope its ok.

jquery.flot.js (v 0.6)
hooks = {
processOptions: [],
++ processParsedData: [],
processRawData: [],
processDatapoints: [],
draw: [],
bindEvents: [],
drawOverlay: []


function parseData(d) {
    var res = [];
    for (var i = 0; i < d.length; ++i) {
        var s = $.extend(true, {}, options.series);

        if (d[i].data) {
   = d[i].data; // move the data instead of deep-copy
            delete d[i].data;

            $.extend(true, s, d[i]);

            d[i].data =;
        } else {
   = d[i];

++ executeHooks(hooks.processParsedData, [res,]);

    return res;

And I'll attach my trendline plugin.

BTW I know there's a patch for trendlines, but I really think its nice to
be able to add new series on-the-fly with plugins.
Let me know what you think.

Original issue:

Flot member

From on April 05, 2011 14:57:48
Some fixes are required for this plugin to work (see attached patch):
1) do not add/subtract dx - it causes issues on grapths with multiple series when some series do not start from x=0
2) $.extend shoud extend {} - not opts.series (in place) - this causes to display trend only for last serie
3) minor: reuse n variable for length

Flot member

From on April 05, 2011 16:52:52
And one change more.
ns = $.extend(true, {}, opts.series, { data:[[x0,y0],[x1,y1]], label: 'trend', bars: defaultOther, lines: defaultLine, points:defaultOther, color: series[series.length-1].color } );

color: series[series.length-1].color

so trend has the same color as serie - even when some pervious series will be disabled/hidden

Flot member

From on April 06, 2011 09:27:46
97804, and 96153 and
96154, respectively);
• Subsequent hospital care services

Flot member

From on September 08, 2011 12:31:23
Hi there!

I was looking at this, it's getting a bit complicated. I'm wondering why you can't use processRawData? I think that generally, you'd probably want to access cleaned data actually, but also have the data you insert go through the data cleaner. We should possibly refactor the data stuff somewhat so one can control it directly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment