jquery jqplot

All posts tagged jquery jqplot

One of the best ways to make a page of data better is having a nice, visual way of looking at the data and graphs and charts do a great job of that.  Figuring out which graph works best for your situation is up to you but in almost all of the cases jqPlot has a way of rendering that on your website.  JqPlot is an open-source project with a ton of features, graph and chart types, and visual options to make wonderful graphs for your site.  Today I’m going to go over a few of the different types of graphs and then give some more advanced tips on using jqPlot.

Line Graph and Others

One of the big features of jqPlot is its plug-ability.  You don’t need to load every jqPlot script in on every page you only need to load in the relevant script used for the graphs on your page.  This cuts down on loading time and makes your code easier to read.

Line graphs are the most basic of graphs and they are so easy to setup with jqPlot.  Below is the code and the result.  I’ve inserted it as an image here but on your page it will be rendered as HTML.


Line graphs can have multiple sets of data to have more than one line of data.  Using the options you can even change the style of each line in the graph.  Below is an example from their website and you can see the options that they have changed to make each line look different.

There are a lot of different types of graphs including pie, bar,  and so many more.  Take a look through their site to see them all.  The great thing about jqPlot is they are all rendered with almost the same code.  Each jqPlot code is rendered by calling jqplot, giving an element to place the graph in, and then setting your data and giving options.  Just below is an image of how I have used the pie charts and bar graphs to display data for some of our clients, names have obviously been changed.
Supplier Overview

Advanced AJAX

Up to this point we haven’t used any AJAX calls to pull the data.  Obviously to help with page loads some AJAX calls for data would be helpful.  To do this you need a helper method that jqPlot will use to make the AJAX calls.  One thing to note is to make sure the data is returned in such a way that the graphs can use.  Generally this is in a list containing integers like the first example  For multiple series’ just do a list of lists.  Simple enough?  Let’s look at the helper method and the jqPlot AJAX calls I make.

The first variable function is used in the two jqPlot calls as an AJAX helper.  The next section, labeled Labels, is used to get the labels for the graphs.  The labels for the graph need to be there when the graph is rendered and cannot be added after.  I have the names of the series’ around the page so I just pull them.  Another way you could do it is the return a dictionary from your AJAX call and then split it in the ajaxDataRenderer function but I have done it this way.  To use the renderer you just call jqplot, give the target and the remote URL and everything should run smoothly.

The line graph is first and as you can see I have a title, which is translated using Django’s JavaScript translation, we put the labels and pad the axis to make everything flush.  The bar chart is similar in almost every way with the exception of a couple of options specific to bar charts.  Below is the result of the two graphs I’ve created.  Some of the text is a bit scrunched together so a little rework is needed but for the most part it is ready to go.  Changing fonts and sizes is simple with the jqPlot options.


Nothing too special but it works for me and looks great on the page.  I hope this has been informative to someone.  JqPlot is pretty vast in its documentation and can be a little overwhelming.  If there are any questions or weird things you come across feel free to comment below.