Google Charts : How do I change the order of pie chart slices? -
how change order of pie chart slices generation? here 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; (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 generated pie chart generated random level information. need display level 0 level 3 clockwise in pie chart slices.
sort datatable before drawing 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>
Comments
Post a Comment