CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsjqplottime-format
Bo Li
Bo Li

Reputation: 141

jQuery jqPlot library 12 hour Time Y-Axis Inversion issue

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.

Upvotes: 4

Views: 3731

Answers (1)

Nerds of Technology
Nerds of Technology

Reputation: 266

  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.

Upvotes: 6

Related Questions