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

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>