Sorting of Google Charts in Sharepoint

Question

I have a Google Chart that is created from a SharePoint List. The sorting of the chart results from which items appear first when going down from row to row:

function drawBarCharts(countChoices, name) {
        var rows = [];
        for (var property in countChoices) {
            if (countChoices.hasOwnProperty(property)) {
                rows.push([property, countChoices[property]]);
            }
        }


        var datatable = new google.visualization.DataTable();
        datatable.addColumn('string', 'Type');
        datatable.addColumn('number', 'Quantity');
        datatable.addRows(rows);
        var options = {
            title: String(name),
            is3D: 'true',
            hAxis:{direction: -1}
        };
        var chart = new google.visualization.BarChart(document.getElementById(String(name)));
        chart.draw(datatable, options);

How can I manually sort the data with a manual order, or by name?

Thanks!

Answer 1

you can use a DataView and the setRows method to create a custom sort.
setRows takes an array of row indexes.

add the row indexes to the array in the order to be displayed,
then use the DataView to draw the chart.

see following code snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var datatable = new google.visualization.DataTable();
  datatable.addColumn('string', 'Type');
  datatable.addColumn('number', 'Quantity');
  datatable.addRows([
    ['A', 2],
    ['B', 4],
    ['C', 6],
    ['S', 4],
    ['U', 2]
  ]);

  var dataview = new google.visualization.DataView(datatable);
  dataview.setRows([0, 2, 3, 4, 1]);

  var options = {
    title: 'Custom Sort',
    is3D: 'true',
    hAxis:{direction: -1}
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(dataview, options);
});

Answer 2

You can only sort by the columns that already added to the Datatable of the Google Chart desc or asc as the following

datatable.sort({column: 0, desc: true});

In this case, it will sort the datatable by Type column descending!