javascript - jQuery jqPlot library 12 hour Time Y-Axis Inversion issue - Stack Overflow

admin管理员组

文章数量:1025259

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 e 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 acplish 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.

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 e 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 acplish 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.

• javascript
• jquery
• jquery-plugins
• jqplot
• time-format

Share Improve this question Follow edited Jun 20, 2011 at 16:35 Bo Li asked Jun 20, 2011 at 16:26 Bo LiBo Li 14133 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.

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 e 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 acplish 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.

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 e 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 acplish 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.

• javascript
• jquery
• jquery-plugins
• jqplot
• time-format

Share Improve this question Follow edited Jun 20, 2011 at 16:35 Bo Li asked Jun 20, 2011 at 16:26 Bo LiBo Li 14133 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.

本文标签： javascriptjQuery jqPlot library 12 hour Time YAxis Inversion issueStack Overflow