Question

I’ve started using jqPlot recently. The generated graphs look amazing and I love it. There are a few little things to learn here and there, but overall it’s great.

I’m using the stacked bar generation and came into a werid issue. Basically, I want a 12 hour time from hours 0 – 24 on the Y axis, days on the X axis, and plot seconds of a certain activity on the graph. But also, I want the days (midnight) to start at the top of the graph, and come to the bottom.

I can flip the data easily with an inverse of the ‘min’ and ‘max’, but the issue arises when I try to flip the ticks; essentially, the “time”.

I have my series defaults set to a hidden axis:

seriesDefaults: {
    renderer: $.jqplot.BarRenderer,
    yaxis: 'y2axis'
},

And I put a placeholder series ( with the values all 0’s, eg: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] ) to associate with a separate yaxis to plot the date ticks:

series: [
    { show: true, yaxis: 'yaxis', }
],

I can flip the values by changing the min and max on the default y axis and hiding it:

y2axis:{
    min: 24,
    max: 0,
    showTicks: false
}

Then I set the ticks, and format them with the DateAxisRenderer:

yaxis:{
    renderer:$.jqplot.DateAxisRenderer,
    ticks: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24'],
    tickOptions: { formatString: '%I:%M %p' }
}

This creates a yaxis with the time’s from 12:00 AM to 12:00PM back to 12:00 AM in that format. but in increasing order from the bottom of the graph.

Obviously, flipping the min and max on the ‘yaxis’ would accomplish nothing, as there is only place holder values, and it only flips the values. How would I go about to flip the axis values so that the time goes (from the bottom) 24, 22, 20… etc, etc, ?

Thanks for your help in advance.

Answer 1

1. Replace:

   ticks: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24']
   

   With:

   ticks: ['24', '22', '20', '18', '16', '14', '12', '10', '8', '6', '4', '2', '0']
   

2. Replace:

   y2axis:{
       min: 24,
       max: 0,
       showTicks: false
   }
   

   With:

   y2axis:{
       min: 0,
       max: 24,
       showTicks: false
   }
   

This will sort the y axis normally but use a reverse tick sequence.