Question

Posted this on google group, but post seems to have disappeared so will try here.

I have a data array which I use to populate the flot chart series data and all works fine. I now want to make both the legend and related segment clickable so I can "drill down" to more detail in the pie chart and have another pie chart show with a breakdown of that segment's data.

The label formatter custom function is obviously where to do this, but it only accepts label and series and the series doesn't seem to contain the index of the position in the array of each series object as it passes through the label formatter function.

I'm trying to do something like:

function labelFormatter(label, series)
    return '<a href="#" onclick="myfunction(" + series.index + ")>" + label + "</a>"
}

...so that I can pass the clicked segment details. I suppose I could just use the label passed and then search through the original data array for a match and use that index position to work out the item clicked, but it seems a bit long winded.

Am I missing some functionality here or is it just not possible to do it the way I'm trying?

Was it helpful?

Solution

The legend by default shows series in the same order as you provided them. You can therefore use a regular jQuery loop to turn them into links, or simply add click listeners.

$.each(".legend tr", function(i, row) {
    addDrillDownListener(row, series[i]);
});

Working with the pie slices themselves is even easier, since the hover and click callbacks receive an object with a seriesIndex attribute.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top