How can I sort the result of a google charts join

Question

I have 2 arrayToDataTable and I am doing a full join to represent the 2 in the graph, but when doing the join the result is alphabetically ordered. I need to reorder or make the join not order the result, or find another way to join the two arrays. Important the first element of the row will always be a string, but it will not always be the same.

 function drawChart() { var data = ( [ ["X","Chart 1"], ['Sun', 6], ['Mon', 5], ['Tue', 8], ['Wed', 2], ['Thu', 5] ]); var dt1 = google.visualization.arrayToDataTable(data); var data2 = new google.visualization.DataTable(); data2.addColumn('string', 'X'); data2.addColumn('number', 'Chart 2'); data2.addRows([ ['Sun', 6], ['Mon', 5], ['Tue', 8], ['Wed', 2], ['Thu', 5], ['Fri', 5], ['Sat', 5] ]); var joinedData = google.visualization.data.join(dt1, data2, 'full', [[0, 0]], [1], [1]); var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); chart.draw(joinedData, { height: 300, width: 600, interpolateNulls: true }); } google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

 <script src="https://www.google.com/jsapi?fake=.js"></script> <div id="chart_div"></div>

Answer 1

we cannot prevent the join method from sorting the results.

but we can use a DataView to provide a custom order,
by using the setRows method.

setRows takes an array of row indexes.
so we can order the row indexes in order of weekday.

here, we start by using an array with the order of days we want.

var sortOrder = [
    'Sun',
    'Mon',
    'Tue',
    'Wed',
    'Thu',
    'Fri',
    'Sat'
];

then loop the joined data table, find the index of the day in the sort order,
and place the row index in that position in our array.

var sortIndexes = [];
for (var i = 0; i < joinedData.getNumberOfRows(); i++) {
    var day = joinedData.getValue(i, 0);
    sortIndexes[sortOrder.indexOf(day)] = i;
}

finally, create the data view and set the rows.

var sortedData = new google.visualization.DataView(joinedData);
sortedData.setRows(sortIndexes);

and draw the chart with the data view.

var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(sortedData, {
    height: 300,
    width: 600,
    interpolateNulls: true
});

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = ([ ['X','Chart 1'], ['Sun', 7], ['Mon', 6], ['Tue', 9], ['Wed', 3], ['Thu', 6] ]); var dt1 = google.visualization.arrayToDataTable(data); var data2 = new google.visualization.DataTable(); data2.addColumn('string', 'X'); data2.addColumn('number', 'Chart 2'); data2.addRows([ ['Sun', 6], ['Mon', 5], ['Tue', 8], ['Wed', 2], ['Thu', 5], ['Fri', 5], ['Sat', 5] ]); var joinedData = google.visualization.data.join(dt1, data2, 'full', [[0, 0]], [1], [1]); var sortOrder = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]; var sortIndexes = []; for (var i = 0; i < joinedData.getNumberOfRows(); i++) { var day = joinedData.getValue(i, 0); sortIndexes[sortOrder.indexOf(day)] = i; } var sortedData = new google.visualization.DataView(joinedData); sortedData.setRows(sortIndexes); var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); chart.draw(sortedData, { height: 300, width: 600, interpolateNulls: true }); });

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>

NOTE : recommend using loader.js , rather than jsapi to load google charts...

according to the release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

the newer library can be found here...

<script src="https://www.gstatic.com/charts/loader.js"></script>

this will only change the load statement, see above snippet...