Parked at Narada Falls, walked down past the falls view-point and followed signs for Reflection Lake. From the lake we hopped on the Pinnacle Saddle Trail which is clearly defined in the winter by lovely ski tracks. Eventually the trail opened up to a sloping traverse underneath Pinnacle and the crampons came out.

I utilized 10-day weather data from the weather station at Paradise to estimate stability of snow-pack. Data indicated 3 days of sub-freezing (and some sub-zero) temperatures without snow-fall. This was enough to feel confidant about snow travel on slopes like the above.

Upon reaching the saddle, we were rewarded with crystal clear views of Mt Adams and jagged peaks of the Goat Rocks Wilderness.

Ascending the ridge line towards Plummer, Pinnacle Peak’s SW flank commands respect.

From the summit of Plummer, it was hard to know which way to look. Every orientation offered incredibly stunning views. In the panorama below, one can trace the entirety of the classic Tatoosh Traverse. From Right to left: Unicorn, Castle, Pinnacle, Plummer (standing on it), Denman, Lane, Wahpenayo, Chutla, Eagle. Last three are a bit trickier to discern.

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.