Making Beautiful JQuery Graphs With JqPlot

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

var plot3 = $.jqplot('chart3', [cosPoints, sinPoints, powPoints1, powPoints2], 
    { 
      title:'Line Style Options', 
      // Series options are specified as an array of objects, one object
      // for each series.
      series:[ 
          {
            // Change our line width and use a diamond shaped marker.
            lineWidth:2, 
            markerOptions: { style:'dimaond' }
          }, 
          {
            // Don't show a line, just show markers.
            // Make the markers 7 pixels with an 'x' style
            showLine:false, 
            markerOptions: { size: 7, style:"x" }
          },
          { 
            // Use (open) circlular markers.
            markerOptions: { style:"circle" }
          }, 
          {
            // Use a thicker, 5 pixel line and 10 pixel
            // filled square markers.
            lineWidth:5, 
            markerOptions: { style:"filledSquare", size:10 }
          }
      ]
    }
  );

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.

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.

var ajaxDataRenderer = function(url, plot1, options) {
        var ret = null;
        $.ajax({
            async: false,
            url: url,
            dataType: "json",
            success: function(data) {
                ret = data;
            }
        });
        return ret;
    }
//Labels
var labels = []
labels.push({label:$("#customer_name").text()});
$("#supplier_table tr").each(function(){
    labels.push({label:$(this).find("td").attr("data-name")});
});

//Line Graph
var plot1 = $.jqplot ('tests_plot', "totaltests/", {
    title: gettext("Total Tests By Year"),
    legend: {show:true, renderer:$.jqplot.EnhancedLegendRenderer, location:'nw'},
    series:labels,
    dataRenderer: ajaxDataRenderer,
    seriesDefaults: {
        pointLabels: { show:true } 
    },
    axesDefaults: {
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
      },
    axes: { xaxis: { pad:0, } }
});

//Bar Chart
var plot2 = $.jqplot ('tests_bar', "totalcategory/", {
    title: gettext("Total Tests By Category"),
    legend: {show:true, renderer:$.jqplot.EnhancedLegendRenderer, location:'nw'},
    series:labels,
    dataRenderer: ajaxDataRenderer,
    seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        pointLabels: { show:true } 
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
            fontSize: '10pt'
        }
    },
    axes: {
        xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer
        },
    }
});

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.