Customising to link series text data to the click event in JQPlot

First thing i have noticed is that JQPlot is very customisable and programmable than meets the eye, dues to its flexibility in Javascript yo can cater the graph to your requirements.

This was the situation when I needed link the series value to the click even (when you click it) so it redirects to the page with the value of the series parsed in.

As you use jqplotDataClick event, which you get seriesIndex, and pointIndex as the parameters essentially for free, these are only indices of the points for the series and data. To get hold of the legend or series label, you do the following: –

$(‘#chart).live(‘jqplotDataClick’, function(ev, seriesIndex, pointIndex, data) {
var date = new Date(data[0]);

var day = date.toDateString();

var timeStamp = date;

hostAddress= top.location.host.toString()
hostFolder= document.location.pathname.toString();
var date = new Number(timeStamp.getDate());
var month = new Number(timeStamp.getMonth());
var year = new Number(timeStamp.getFullYear());
url = “http://” + hostAddress + hostFolder + “/../../reportpage?date=” + date + “/” + (month + 1)+ “/” + year + “&count=” + data[1] + “&legend=” + plot2.series[seriesIndex][“label”];
window.location = url;
}
);

However the very clever thing about JQPlot is that you can add more than the series label text ito the series label, you can add another index with the text of your choice, which I called key to get hold of the key value of the series. This is done via plot2.series[seriesIndex][“key”] .This is actually what I wanted and it worked as I expected! Three cheers for the JPlot developers!

For other parsing data usages you can use plot2.series[seriesIndex].data[pointIndex][0]; to get the x axis value of pointIndexof seriesIndex, which is the data value to be used (this is what I discovered from forums).

Hope this helps!

 

Advertisements