JqPlot takes some effort

I was compelled to use JqPlot for a work project.

My first advice would be this: Run. JqPlot is tough to learn and not fun to play with. You will find yourself eternally knee deep in a hash of configuration options. It is canvas based and does not render nicely on retina displays.

If you are still reading, so be it. May this blog post spare you some pain.

Stacking two disparate time ranges

Your starting point looks like this. You have two time-series that are being rendered with the DateAxisRenderer.

The core of the solution is to specify two x-axes so that the time series can be ‘stacked’ on on top the other for comparison.

Two changes to the configuration must be made: * change the axes configuration to define a 2nd x-axis called x2axis * change the series configuration to specify that one of the data series should use the new ‘x2axis’ as its xaxis.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

var plot1 = $.jqplot('chart1', [line1,line2], {
  title: 'XYZ, Inc.',
  series: [{
    label: 'primary series',
    neighborThreshold: -1,
    xaxis: 'xaxis'
  }, {
    label: 'comparative series',
    xaxis: 'x2axis'
  }],
  axes: {
    xaxis: {
      renderer:$.jqplot.DateAxisRenderer,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions: {
        angle: -30
      }
    },
    x2axis: {
      renderer:$.jqplot.DateAxisRenderer,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions: {
        angle: -30
      }
    },
    yaxis: {
      renderer: $.jqplot.LogAxisRenderer,
      tickOptions:{ prefix: '$' }
    }
  }
});

This gives us what we’re looking for, two stacked time series.

More problems opportunities

The above case is rather ideal, and actually makes JqPlot look pretty good. What happens when your time series have different lengths?

If your time series have different lengths, the two x-axes will have different ranges, and tick intervals and vertical gridlines wil not match up. In short, the stacked effect will be destroyed.

In this example, I have destroyed the stacked effect by adding two data points to the data series ‘line1’— one point on the front, and one on the end.

There are many reasons why your data series have unequal lengths like this. In my case, comparing months of data by day resulted in data series with different lengths due to months having uneven numbers of days. Silly months.

In any case, the best solution for his kind of problem is to explicitly define the x-axes’ chart range parameters via the JqPlot ‘min’ and ‘max’ options.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

axes: {
  xaxis: {
    renderer:$.jqplot.DateAxisRenderer,
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    tickOptions: {
      angle: -30
    },
    min: "6/22/2009 09:00",
    max: "6/22/2009 22:00"
  },
  x2axis: {
    renderer:$.jqplot.DateAxisRenderer,
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    tickOptions: {
      angle: -30
    },
    min: "6/23/2009 09:00",
    max: "6/23/2009 22:00"
  },
  yaxis: {
    renderer: $.jqplot.LogAxisRenderer,
    tickOptions:{ prefix: '$' }
  }
},

Example showing min/max solution here.

Use tickInterval

One handy discovery in my JqPlot adventure was the ‘tickInterval’ option. With the x-axes’ min and max options set, one can utilize

tickInterval: '1 (day|week|month)'

to quickly and easily modify the rendering of tick marks. Thanks JqPlot.

Did this help?

Feel free to upvote my stackoverflow answer if this post helped you out.