CODEWITHSUNDEEP
javascriptsortinggoogle-visualization
Zusee Weekin
Zusee Weekin

Reputation: 1358

Add Custom sorting for a column in google visualization table column

I have successfully completed a google visualization table with data coming from the database. Now I need to add a custom sorting only for one column. Ex I have a column as Status to display the level of the instance. It has several limits such as ok, critical etc. When I use the current sorting order it is displaying rows of 'ok' on top. Instead of that I need to display 'critical' rows first. To make this done I have another column as level 1 for 'critical', 2 for 'ok' etc. What I need to do is when user tries to sort 'Status' column, that column should sort according to 'level'.

     google.visualization.events.addListener(table, 'sort',
              function(event) {

          if(event.column == 4){
               console.log("sorting column is "+event.column);


                data.sort([{column: event.column, desc: !event.ascending}]);
               chart.draw(view);
          }


              });

how to add sorting order (sort with level) for Status column?

Any help would be appreciated.

Upvotes: 1

Views: 1022

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

here are a couple options for custom sorting a Table chart...

first, you can use object notation to combine the values from both columns...
set the value (v:) as Level and the formatted value (f:) as Status
{v: 1, f: 'Critical'}

by default, the Table chart will use the value to sort
you could also use a DataView to add the column from a calculation

only problem here, the column type must be 'number', because that's what the value is...
the chart will right align the cells for that column

if you already have custom formatting, not a big deal, you can use css to correct, as in the example

next, to custom sort using the sort event...

set the config option --> sort: 'event'

this tells the chart custom sorting is being used and to display the data "as ordered"

you also must provide the following two config options

  sortAscending: true,
  sortColumn: 0

this tells the chart where to put the sorting arrow on the column headings (up / down arrows)

so if you override the sort for column 1 with 0,
still need to set config option --> sortColumn: 1

see following working snippet,

the sort for column 1 (Status) is overridden with column 0 (Level)
column 2 (Sort) uses the object notation as mentioned above

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Level', 'Status',   'Sort'],
      [1,       'Critical', {v: 1, f: 'Critical'}],
      [2,       'OK',       {v: 2, f: 'OK'}],
      [3,       'Warning',  {v: 3, f: 'Warning'}],
      [4,       'Message',  {v: 4, f: 'Message'}]
    ]);

    var options = {
      allowHtml: true,
      cssClassNames: {
        tableCell: 'googleTableCell'
      },
      sort: 'event',
      sortAscending: true,
      sortColumn: 0
    };

    var chart = new google.visualization.Table(document.getElementById('chart_div_table'));

    google.visualization.events.addListener(chart, 'sort', function (sender) {
      var sortColumn;

      // custom sort data
      switch (sender.column) {
        case 1:
          sortColumn = 0;
          break;

        default:
          sortColumn = sender.column;
      }
      data.sort([{column: sortColumn, desc: !sender.ascending}]);

      // display normal column sort arrow
      options.sortAscending = sender.ascending;
      options.sortColumn = sender.column;

      chart.draw(data, options);
    });

    chart.draw(data, options);
  },
  packages: ['table']
});
.googleTableCell {
  text-align: left !important;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div_table"></div>

Upvotes: 1

Related Questions