Google Charts: Remove default Sort for x-axis - charts

Question

Is there a way to remove the default sort for the x-axis? It automatically sorts from A-Z but I want to have it as January - December.
Chart Image :
For the missing months for each year and product type, I've auto generated them in PHP(where my final code is). So it would look like:
["January",0,"Apitong","2018","Analog"],["January",0,"Apitong","2018","Digital"],["January",0,"Apitong","2018","Internet"],["February",0,"Apitong","2018","Analog"],["February",0,"Apitong","2018","Digital"], .. etc
My Sample Code: JSFiddle
google.charts.load('current', {
callback: function() {
var data = google.visualization.arrayToDataTable([
['Month', 'Amount', 'Area', 'Year', 'Product Type'],
['January', 3300, 'Apitong', 2015, 'Analog'],
['February', 1000, 'Apitong', 2015, 'Analog'],
['March', 2000, 'Apitong', 2015, 'Analog'],
]);
google.visualization.events.addListener(product, 'ready', drawChart);
function drawChart() {
var areaData = new google.visualization.DataView(area.getDataTable());
var filters = [{
column: 2,
value: area.getState().selectedValues[0]
}
];
// group by 'Group' / 'Year'
var dataGroup = google.visualization.data.group(
areaData, [0, 3], [{
column: 1,
aggregation: google.visualization.data.sum,
type: 'number',
label: 'Sum'
}, {
column: 1,
aggregation: google.visualization.data.count,
type: 'number',
label: 'Count'
}]
);
dataGroup.sort([{
column: 0
}, {
column: 1
}]);
var ColumnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'productssold_chart_div',
'dataTable': view
});
ColumnChart.draw();
}
},
packages: ['controls', 'corechart']
});

Answer 1

when using a Discrete axis ('string' values),
the axis will sort by the order of the rows in the data table
in this case, the rows are set to alphabetical as a result of using static method --> data.group
to correct this issue, an array of month names is used to build a custom sort order
a new column is added to finalData and the index from the array is used as the order
// build final data table
var monthOrder = [
'January', 'February', 'March',
'April', 'May', 'June',
'July', 'August', 'September',
'October', 'November', 'December'
];
var finalData = new google.visualization.DataTable({
cols: [{
label: 'Group',
type: 'string'
}, {
label: 'Amount',
type: 'number'
}, {
label: 'Count',
type: 'number'
}, {
label: 'Sort',
type: 'number'
}]
});
// add row for each month AMOUNT | COUNT
var rowMonth = null;
var rowIndex = null;
for (var i = 0; i < dataGroup.getNumberOfRows(); i++) {
if (rowMonth !== dataGroup.getValue(i, 0)) {
rowMonth = dataGroup.getValue(i, 0);
rowIndex = finalData.addRow();
finalData.setValue(rowIndex, 0, rowMonth);
}
for (var x = 1; x < finalData.getNumberOfColumns(); x++) {
switch (finalData.getColumnLabel(x)) {
case 'Amount':
finalData.setValue(rowIndex, x, dataGroup.getValue(i, 2).toString());
break;
case 'Count':
finalData.setValue(rowIndex, x, dataGroup.getValue(i, 3).toString());
break;
case 'Sort':
finalData.setValue(rowIndex, x, monthOrder.indexOf(rowMonth));
break;
}
}
}
finalData.sort([{column: 3}]);
see following working snippet...
google.charts.load('current', {
callback: function() {
var data = google.visualization.arrayToDataTable([
['Month', 'Amount', 'Area', 'Year', 'Product Type'],
['February', 1000, 'Apitong', 2015, 'Analog'],
['February', 1700, 'Apitong', 2015, 'Internet'],
['February', 1200, 'Avenida Veteranos', 2015, 'Digital'],
['February', 2800, 'Brgy. Baras', 2015, 'Internet'],
['February', 2150, 'Avenida Veteranos', 2018, 'Digital'],
['February', 2700, 'Apitong', 2018, 'Internet'],
['February', 2500, 'Brgy. Baras', 2018, 'Internet'],
['March', 2000, 'Apitong', 2015, 'Digital'],
['March', 2400, 'Avenida Veteranos', 2015, 'Digital'],
['March', 1600, 'Brgy. Baras', 2015, 'Internet'],
['March', 3000, 'Avenida Veteranos', 2018, 'Analog'],
['March', 1400, 'Apitong', 2018, 'Digital'],
['January', 3300, 'Avenida Veteranos', 2015, 'Analog'],
['March', 2000, 'Brgy. Baras', 2018, 'Analog'],
['January', 2600, 'Brgy. Baras', 2015, 'Internet'],
['January', 1800, 'Apitong', 2015, 'Digital'],
['January', 2100, 'Brgy. Baras', 2015, 'Analog']
]);
var area = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_productssold_area_div',
'dataTable': data,
'options': {
'filterColumnLabel': 'Area',
'ui': {
'allowTyping': false,
'allowMultiple': false,
'allowNone': false,
'sortValues': false,
'label': 'Choose Area',
}
}
});
var year = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_productssold_year_div',
'dataTable': data,
'options': {
'filterColumnLabel': 'Year',
'ui': {
'allowTyping': false,
'allowMultiple': false,
'allowNone': false,
'sortValues': false,
'label': 'Choose Year',
}
}
});
var product = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_productssold_product_div',
'dataTable': data,
'options': {
'filterColumnLabel': 'Product Type',
'ui': {
'allowTyping': false,
'allowMultiple': true,
'allowNone': true,
'sortValues': false,
'label': 'Choose Product',
}
}
});
google.visualization.events.addListener(area, 'ready', drawChart);
google.visualization.events.addListener(area, 'statechange', drawChart);
google.visualization.events.addListener(year, 'ready', drawChart);
google.visualization.events.addListener(year, 'statechange', drawChart);
google.visualization.events.addListener(product, 'ready', drawChart);
google.visualization.events.addListener(product, 'statechange', drawChart);
function drawChart() {
var areaData = new google.visualization.DataView(area.getDataTable());
var filters = [{
column: 2,
value: area.getState().selectedValues[0]
}
];
var selectedYear = year.getState().selectedValues;
if (typeof selectedYear !== 'undefined' && selectedYear.length > 0) {
filters.push({
column: 3,
test: function(value, row, column, table) {
return (selectedYear.indexOf(table.getValue(row, column)) > -1);
}
});
}
var selectedProducts = product.getState().selectedValues;
if (typeof selectedProducts !== 'undefined' && selectedProducts.length > 0) {
filters.push({
column: 4,
test: function(value, row, column, table) {
return (selectedProducts.indexOf(table.getValue(row, column)) > -1);
}
});
}
areaData.setRows(areaData.getFilteredRows(filters));
// group by 'Group' / 'Year'
var dataGroup = google.visualization.data.group(
areaData, [0, 3], [{
column: 1,
aggregation: google.visualization.data.sum,
type: 'number',
label: 'Sum'
}, {
column: 1,
aggregation: google.visualization.data.count,
type: 'number',
label: 'Count'
}]
);
dataGroup.sort([{
column: 0
}, {
column: 1
}]);
// build final data table
var monthOrder = [
'January', 'February', 'March',
'April', 'May', 'June',
'July', 'August', 'September',
'October', 'November', 'December'
];
var finalData = new google.visualization.DataTable({
cols: [{
label: 'Group',
type: 'string'
}, {
label: 'Amount',
type: 'number'
}, {
label: 'Count',
type: 'number'
}, {
label: 'Sort',
type: 'number'
}]
});
// add row for each month AMOUNT | COUNT
var rowMonth = null;
var rowIndex = null;
for (var i = 0; i < dataGroup.getNumberOfRows(); i++) {
if (rowMonth !== dataGroup.getValue(i, 0)) {
rowMonth = dataGroup.getValue(i, 0);
rowIndex = finalData.addRow();
finalData.setValue(rowIndex, 0, rowMonth);
}
for (var x = 1; x < finalData.getNumberOfColumns(); x++) {
switch (finalData.getColumnLabel(x)) {
case 'Amount':
finalData.setValue(rowIndex, x, dataGroup.getValue(i, 2).toString());
break;
case 'Count':
finalData.setValue(rowIndex, x, dataGroup.getValue(i, 3).toString());
break;
case 'Sort':
finalData.setValue(rowIndex, x, monthOrder.indexOf(rowMonth));
break;
}
}
}
finalData.sort([{column: 3}]);
var view = new google.visualization.DataView(finalData);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}]);
var ColumnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'productssold_chart_div',
'dataTable': view
});
ColumnChart.draw();
}
area.draw();
year.draw();
product.draw();
},
packages: ['controls', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter_productssold_area_div"></div>
<div id="filter_productssold_year_div"></div>
<div id="filter_productssold_product_div"></div>
<div id="productssold_chart_div"></div>