Skip to content

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

November 5, 2012

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;

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!



From → Uncategorized

One Comment
  1. roel croonenberghs permalink

    What is vriable/function plot2 and where is it defined. I get a javascript error when executing the code saying plot2 i undefined

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: