Google Charts : How do I change the order of pie chart slices? - charts

Question

How do I change the order of pie chart slices generation? Here is my code.
var DEFAULT_PIE_CHART_OPTIONS = {
theme: 'material',
titleTextStyle: { fontSize: 12 },
is3D: false,
pieSliceText: 'label',
colors: ['#8E142E','#C3CA21','#8A972B','#6FF522','#167D13'],
fontSize: 12,
pieHole: 0.6,
pieStartAngle: 180,
height: 600,
chartArea: { width: '100%', height: '100%', left: 0, top: 100 },
legend: { position: 'top', maxLines: 1, textStyle: { fontSize: 12, bold: true, italic: false } }
};
var chartOptions = DEFAULT_PIE_CHART_OPTIONS;
chartOptions.colors = null;
var chartOverallPmmLevelCalculated = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chartOverallPmmLevelCalculatedHtml',
options: chartOptions
});
function drawPieChart() {
var responseDataTable = levelTableChart.getDataTable();
var chartDataTable = new google.visualization.DataTable();
chartDataTable.addColumn('string', 'Fiscal');
chartDataTable.addColumn('number', 'LEVEL');
var chartDataTableRow = new Array();
var rowCounter;
var levelValue;
for (rowCounter = 0; rowCounter < responseDataTable.getNumberOfRows() ; rowCounter++) {
var seek = 0 * 1;
levelValue = responseDataTable.getValue(rowCounter, 1);
if (levelValue !== null) {
chartDataTableRow[seek++] = "LEVEL " + levelValue.toString();
chartDataTableRow[seek++] = responseDataTable.getValue(rowCounter, 2);
} else {
chartDataTableRow[seek++] = null;
chartDataTableRow[seek++] = null;
}
chartDataTable.addRow(chartDataTableRow);
}
chartOverallPmmLevelCalculated.setDataTable(chartDataTable);
chartOverallPmmLevelCalculated.draw();
}
I attached the generated pie chart which generated with random LEVEL information. I just need to display LEVEL 0 to LEVEL 3 clockwise in the pie chart slices.

Answer 1

sort the DataTable before drawing the chart
// sort data - first column
data.sort([{column: 0}]);
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Fiscal', 'LEVEL'],
['LEVEL 3', 30],
['LEVEL 1', 12],
['LEVEL 2', 42],
['LEVEL 0', 8],
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart_div',
dataTable: data,
options: {
theme: 'material',
titleTextStyle: { fontSize: 12 },
is3D: false,
pieSliceText: 'label',
fontSize: 12,
pieHole: 0.6,
pieStartAngle: 180,
height: 600,
chartArea: { width: '100%', height: '100%', left: 0, top: 100 },
legend: { position: 'top', maxLines: 1, textStyle: { fontSize: 12, bold: true, italic: false } }
}
});
// sort data - first column
data.sort([{column: 0}]);
chart.draw();
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>