1

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.

Improve this question

1 Answer 1

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks. I already fixed this problem. Thanks again for your support.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.