Tag Archives: graph

Graphing with jQuery CodeUnit 14 FEB 2010

Now while there are quite a number of excellent flash-based graphing libraries out there in the wild, it turns out that there aren’t actually all that many pure old jQuery plugins to churn out your data in pretty images for all to see.

So enter flot, a pure Javascript plotting library written exclusively for jQuery. It produces graphical plots of arbitary datasets on-the-fly client-side, with a focus on simple usage – meaning that all settings are pretty much optional to a developer. The graphs produces are attractive and flot goes that extra step in adding interactive features like zooming and mouse tracking, meaning you can add things like tooltips and clickthroughs to any graph with particular ease.

It works with Internet Explorer (with the help of the excanvas emulation helper), Firefox, Safari, Opera and Konqueror, making use of the HTML canvas tag.

Quick to implement, churns out a variety of different graphs and produces some stunning results, making it a particularly worthy graphing library to implement on any of your data analysis projects! :)

Related Link: http://code.google.com/p/flot/

How to Add a Click-through Event on a jQuery Flot Graph CodeUnit 31 DEC 2009

I mentioned Flot, the brilliant little jQuery-driven graphing engine that is extremely flexible and capable of producing some wonderfully looking and interactive graphs, before, but seeing as I’m currently using it as my graphing engine of choice on all of my current Touchwork projects, it makes sense to run another quick tutorial featuring it.

Today I quickly want to touch on adding a click-through event to a Flot graph, in other words, force the browser to redirect to a new location depending on where on the graph the user clicks.

Note, that for this to work, you need to ensure that both the bars and grid declarations feature the clickable: true setting. Obviously not setting this when calling Flot’s plot function will cause the following code to fall flat:

$("#graphdivid").bind("plotclick", function (event, pos, item) {
if (item) {
window.location = "http://url-to-redirect-to.co.za";
}
});

As you can see above, adding a click-through is particularly easy stuff. Simply bind the built in plotclick function to your graph’s div ID and then run a window.location should the click prove to be valid, i.e. item isn’t null.

Of course, to do something specific to the dataset you clicked on, you could always do a switch on say the data series’ label contained in the item object and run code accordingly depending on the switch result:

switch(item.series.label)
{
//do something based on switch
}

So in other words, an extremely simple bit of work for a decent outcome well worth it! :)

Today I quickly want to touch on adding a click-through event to a Flot graph, in other words, force the browser to redirect to a new location depending on where on the graph the user clicks.

How to Add a Tooltip to a Flot jQuery Graph CodeUnit 30 DEC 2009

Flot is a fantastic jQuery-driven graphing engine that is extremely flexible and capable of producing some wonderfully looking and interactive graphs.

Today’s quick tutorial looks at how one can add a tooltip to a flot-produced graph.

The secret here is to bind our tooltip generating function to Flot’s built in mouse hover event, firstly removing any tooltip that may already be in existence, generating the new tooltip and attaching it on top of the graph canvas at the correct point.

First we start off by defining our tooltip generating javascript function:

function showChartTooltip(x, y, contents) {
$('
;' + contents + '
;').css( { position: 'absolute', display: 'none', top: y + 5, left: x + 5, border: '1px solid #bfbfbf', padding: '2px', 'background-color': '#ffffff', opacity: 1 }).appendTo("body").fadeIn(200); }

You’ll notice that all we are doing is creating a div, styling it, setting it’s correct x and y co-ordinates in order to correspond to the graph hover position supplied, and then appending it to the main DOM via a jQuery call to append it to the “body” element. As an afterthought and just to make it look nice, we’re using jQuery’s nice little fadeIn functionality to bring the tooltip into view.

Now for the actual meat of the process. What we are going to do is specific the code that needs to be triggered on mouseover (which will call the tooltip drawing function specified above) and bind it to the built in flot plothover event.

$("#graphdivid").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
$("#charttooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showChartTooltip(item.pageX, item.pageY,'tooltip text to display');
} else {
$("#charttooltip").remove();
}
});
});

Binding the plothover event to the graph with id graphdivid, we firstly calculate the current X and Y co-ordinates from the event, check that the result is valid, remove any existing tooltip and then call the tooltip drawing function.

And that’s it. Really simple code in order to achieve quite a useful result!