Fix tooltip when displaying multiple series

[vitorbaptista]

We replace the "%x" in the tooltip string with the corresponding item tick's
label. We do so by looking at the item's index in the chart's data array
(dataIndex), and getting the tick in the same index in the ticks' array.
That works fine if you have a single series, but doesn't work with multiple
ones.

In that case, you have multiple data arrays, one for each series, but you still
have a single ticks array. For example, if you have the plot's data as:

[
  { data: [ ["Foo", 5] ] },
  { data: [ ["Bar", 10] ] }
]

Both item's dataIndex will be 0, because each one is the first element on its
series' data array. But the ticks array is something like:

["Foo", "Bar"]

If you use only dataIndex, you'll get the tick "Foo" for both items. What we
need is an offset which tells us which series the current item is in: that's
seriesIndex. The ticks' index is then calculated as seriesIndex + dataIndex.

That solves our problem. In our example, even though the dataIndex for both
items is 0, the seriesIndex for "Foo" is 0, and for "Bar" is 1. Everything
works as expected.

This fixes #65.

[vitorbaptista]

Thanks! 👍

[nicola883]

With the last version I'm not able to get it works.
If I have two series with the same or different labels for x axis:

data: [["gen", 100], ["feb", 200], ["mar", 300]],
data: [["rome", 100], ["paris", 200], ["london", 300]],

but also:

data: [["gen", 100], ["feb", 200], ["mar", 300]],
data: [["gen", 100], ["feb", 200], ["mar", 300]],

it doesn't work: in the second series tip I get the label of the next value. This is what, I think, is normally because in the second series is taken the n+1 index of the array

item.series.xaxis[ticks][tickIndex]

removing the patch now it works:

var tickIndex = item.dataIndex; //+ item.seriesIndex;

[vitorbaptista]

@nicola883 Does your first example fails without the patch?

I would expect your second example to work without this patch, but not the first one.

[nicola883]

The first example doesn't work with and without patch.
This is my call:

var data = [
    {label: "P1", data: [["gen", 100], ["feb", 200], ["mar", 300]]}, 
    {label: "P2", data: [["rome", 100], ["paris", 200], ["london", 300]]}
];

I see that in this case:

item.series.xaxis[ticks]

is an array of 6 elements, all the elements of the two series in sequence, so the patch could considers the number of the elements before that requested.

[vitorbaptista]

@nicola883 Could you create an example at jsbin.com (or any other similar service) showing the error you're getting?

[Marshall-Hallenbeck]

I came across the same problem as nicola883, and removing the "patch" fixed my issue.

I'm using a stacked bar graph with three columns, and have them named High, Med, Low and they correlate to 2, 1, and 0 respectively.
Each has two options (they are stacked).

Since dataIndex and seriesIndex are being added and then "item.series.xaxis[ticks].length > tickIndex" is being ran my code never hits "content = content.replace(xPattern, item.series.xaxis[ticks][tickIndex].label);" for the "top stacked" option and thus it displays the index # (0, 1, or 2) instead of the label.
Took me forever to figure this out, but nicola883's post alerted me to this bug and after changing it's working as it should.

Sorry for only the explanation but I cannot post my code on jsbin due to legal reasons; however, I hope my explanation made sense.

[themagnifico]

I had the same problem and removing the "patch" also fixed my issue.

[Roundaround]

I've reopened the associated issue (#65). If you have any additional information, please discuss it there and I'll look into this when I get the chance.

[mcnemesis]

I faced this issue while testing scenarios for the plug-and-play analytics panel I'm building here. In my case, as you might see when you select multiple series (what are labelled "Series" in the example I link to), using the in-built feature to dynamically construct the label content via a function solves this for me.

My approach is something like this for bar, line and scatter charts:

    tooltip: {
            show: true,
            content: function(label, xval, yval, flotItem){                        
                    return label + " | " + xval + " : " + yval; 
            }
        }

And this for the Pie chart:

  tooltip: {
            show: true,
            content: function(label, xval, yval, flotItem) {
                return label + " : " + Math.round(flotItem.datapoint[0]) + "%";
            }
        }

Test this on the project demos here.

So, perhaps those still facing this issue can adopt this approach as the project finds a better solution for those wanting to use the format string approach in the docs.