Sort X axis in google charts by month names

user_8213657 0
Viewed 408

I want to sort the month names on the X axis using google charts. I currently use dataGroup.sort([{column: 0}]); to sort alphabetically. How do i sort the values w.r.t the month?

enter image description here

var dataGroup = google.visualization.data.group(
            sliderData,
            [0, 2],
            [{column: 1, aggregation: google.visualization.data.sum, type: 'number', label: 'Count'}]
        );

dataGroup now has data something like-

    gvjs_K {Sp: null, cf: Array(3), Vf: Array(34), qr: null, cache: Array(0), …}
Sp: null
Vf: Array(34)
0:
c: Array(3)
0: {v: "August"}
1: {v: "Adult Player"}
2: {v: 13307}
length: 3
__proto__: Array(0)
__proto__: Object
1:
c: Array(3)
0: {v: "August"}
1: {v: "Coach"}
2: {v: 4062}
length: 3
__proto__: Array(0)
__proto__: Object
2: {c: Array(3)}
3: {c: Array(3)}
react-google-charts google-visualization charts html javascript
1 Answers

you can use the DataView class and the setRows method to set a custom sort order.
the setRows method works by providing an array of row indexes in the order the rows should appear.

in this example, we use an array of month names to determine the correct order.
then we sort the row indexes accordingly, and use setRows to build the data table.

1. create an array with the month names in the correct order

var monthOrder = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
];

2. use the getSortedRows method to get an array of the row indexes from the data table

var rows = data.getSortedRows([{column: 0}]);

3. sort the array of row indexes using the name index from the month names array

rows.sort(function (a, b) {
  var monthA = data.getValue(a, 0);
  var monthB = data.getValue(b, 0);
  return monthOrder.indexOf(monthA) - monthOrder.indexOf(monthB);
});

4. create a data view and use the setRows method to set the custom sort

var view = new google.visualization.DataView(data);
view.setRows(rows);

then use the data view to draw the chart

see following working snippet...

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['April',  2000.9, 1215.3],
    ['August',   300.5,   2512],
    ['December',  600.3, 7518.6],
    ['February',   2500.4,  8852.7],
    ['January',  1453.5,  5005.7],
    ['June',  4300.5,  9635.7],
    ['July',   2588.4,  7418.7],
    ['March',   3588.5,   1221],
    ['May',  1666.3, 8518.6],
    ['November',  2446.3, 6218.6],
    ['October',  8556.3, 4218.6],
    ['September',  1222.9, 1415.3]
  ], true);

  var chartRaw = new google.visualization.ColumnChart(document.getElementById('chart_div_raw'));
  chartRaw.draw(data);

  // sort rows by month name chronologically
  var monthOrder = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ];
  var rows = data.getSortedRows([{column: 0}]);
  rows.sort(function (a, b) {
    var monthA = data.getValue(a, 0);
    var monthB = data.getValue(b, 0);
    return monthOrder.indexOf(monthA) - monthOrder.indexOf(monthB);
  });
  var view = new google.visualization.DataView(data);
  view.setRows(rows);

  var chartSort = new google.visualization.ColumnChart(document.getElementById('chart_div_sort'));
  chartSort.draw(view);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>not sorted</div>
<div id="chart_div_raw"></div>
<div>sorted</div>
<div id="chart_div_sort"></div>

user_50907710
Related