Material Bar Charts Always Render in Sorted, Ascending Order. How do I Get Descending Order?

489 views
Skip to first unread message

Bill Rebey

unread,
Dec 3, 2016, 12:28:01 PM12/3/16
to Google Visualization API
It appears that Material Bar Charts always render the data along the Y (vertical) axis in Sorted order, Ascending, sorted on Column 0 (the column in the Y axis).

It doesn't matter if the DataTable is ordered descending, ordered ascending, or randomly ordered.  The resultant bar chart always has the smallest value (a Date, in my case) at the top, and the largest value at the bottom.

I require the inverse of this:  newest dates at top, and oldest at bottom.

What am I missing?  I can't seem to find any information about the Ordering of Bar chart data as it gets rendered.

JSFiddle demonstrated my trouble here:  https://jsfiddle.net/brebey/dbbuL8tv/

Daniel LaLiberte

unread,
Dec 3, 2016, 5:55:11 PM12/3/16
to Google Visualization API
Hi Bill,

If you want all the flexibility of the classic charts but the styling of material charts, you might like to use the theme: 'material' option.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/b770d776-ec20-4d15-aa72-0ac25f9fd857%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Bill Rebey

unread,
Dec 3, 2016, 6:55:06 PM12/3/16
to Google Visualization API
Thanks for the  reply, Daniel.   I'm afraid I'm on the other end of the Google APIs spectrum than you assume.  I'm a noob.  I used the Material charts because it seemed like the more modern thing to use.   I don't have the "classic" knowledge that it sounds like I should have.  Are you suggesting that there is another namespace/class other than "google.charts.Bar" that will display my DataTable as expected, rather than re-sorting it unexpectedly?  If so, I'd appreciate knowing what that namespace/class is.

Daniel LaLiberte

unread,
Dec 4, 2016, 5:16:30 PM12/4/16
to Google Visualization API
The so-called 'classic' charts are google.visualization.BarChart or google.visualization.ColumnChart, depending on which orientation you want.  The documentation is mixed between the classic and material charts, unfortunately, so this distinction is confusing.

On Sat, Dec 3, 2016 at 6:55 PM, Bill Rebey <bill...@gmail.com> wrote:
Thanks for the  reply, Daniel.   I'm afraid I'm on the other end of the Google APIs spectrum than you assume.  I'm a noob.  I used the Material charts because it seemed like the more modern thing to use.   I don't have the "classic" knowledge that it sounds like I should have.  Are you suggesting that there is another namespace/class other than "google.charts.Bar" that will display my DataTable as expected, rather than re-sorting it unexpectedly?  If so, I'd appreciate knowing what that namespace/class is.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

For more options, visit https://groups.google.com/d/optout.

Bill Rebey

unread,
Dec 4, 2016, 10:46:51 PM12/4/16
to Google Visualization API
I've tried the BarChart class you mention instead of the "Bar" class, but the results are the same:  No matter what order the data is in when I create the chart, the chart is drawn with the data re-sorted in ascending order. 

I need the data either A) left alone and not rearranged, or B) sorted in Descending order.

Do you know of any way to achieve this?  How can I stop BarChart from messing with the data, and instead just rendering it in the order given?

Any direction here is greatly  appreciated!

Daniel LaLiberte

unread,
Dec 5, 2016, 9:50:45 AM12/5/16
to Google Visualization API
If you want the bars to be in the same order as they appear in the datatable regardless of their values, then you need to use discrete string values for the domain axes instead of numbers or dates. 

There is also an undocumented feature you could use to treat all your numeric or date/time values as discrete values.  Add this to your domain axis options:  type: 'category'.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

For more options, visit https://groups.google.com/d/optout.

Bill Rebey

unread,
Dec 5, 2016, 9:57:11 AM12/5/16
to Google Visualization API
That works BEAUTIFULLY, Daniel.  Thanks a million!  As you suggested, it only works for the original BarChart class, as the material bar charts class "Bar" is less capable to date. 
Reply all
Reply to author
Forward
0 new messages