Dashboard sort

[cam luc]

My dashboard has a categoryPicker, a table, a barChart and a pieChart.
It also has code to synchronize the sort order between the table and
the other 2 charts.
(I call dashboard.draw(data) in the sort event listener)

The code works but it has an uncomfortable period of browser
Nonresponding (~ 5 seconds). The data set has only 6 rows.
Perhaps Google Visualization team can improve on this?

[NA]

That does seem really slow. Is there any chance there are extra calls
to the draw() or sort() functions that you aren't aware are
happening? Try throwing a few console.log() calls to see what's
happening.

That type of delay just seems so slow for just 6 rows. My first
suspicion is that more work is going on than you think. But then
again, perhaps not, and maybe in the setup you have the visualization
just happens to be slow.

[cam luc]

I think that is not the case. When the sorting code is commented,
my page runs fast. It should not have to do with the setup.

[visigoth]

Could you please send us a link to your page or an example HTML file demonstrating the slowness?

Thanks,

Visigoth

[Riccardo Govoni ☢]

~5 seconds for a 6 rows table is not right. I'd like to see same sample code that highlights the issue. Maybe events are wired up in such a way that the dashboard is inadvertently redrawn multiple (read: a lot) times on each sort event?

/R.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/QAzGE0YJSUkJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Marco Megna]

I have problem on the same thing.

 

here my code, what's wrong?

---------------------------------------------------------------------------------

 

google.load('visualization', '1.1', {'packages':['controls']}); 
google.setOnLoadCallback(drawDashboard);

 

function drawDashboard() {

 

var dashboard = new google.visualization.Dashboard(
          document.getElementById('dashboard'));
  
var data = new google.visualization.DataTable(); 
 data.addColumn('number', 'ID'); 
....

 data.addColumn('number', 'Peso');
 data.addRows([...some rows...]);
 
var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table',
    'options': {
      'width': 'automatic'
    },
     'view': {'columns': [1,...,10]}
});

 

google.visualization.events.addListener(table, 'ready', onReady);

 

var titoloPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control4',
    'options': {
      'filterColumnLabel': 'Nome',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false   
      }
    }
  });

 

(... other ControlWrapper)

var chart = new google.visualization.ChartWrapper({
          'chartType': 'BarChart',
          'containerId': 'chart1',
          'options': {
            'width': 600,
            'height': 600,
            'chartArea': {top: 0, right: 0, bottom: 0}
     },
          'view': {'columns': [2,10]}
        });

  ...(other dashboard.bind)
  dashboard.bind(titoloPicker, [chart, table]);

  dashboard.draw(data);
   
      function onReady() {
 google.visualization.events.addListener(table.getChart(), 'sort',
 function(event) {
        data.sort([{column: event.column, desc: !event.ascending}]);
 dashboard.draw(data);
      });
     }
}

[Riccardo Govoni ☢]

The issue you have is that your code accumulates unnecessary listeners every time you click on the table header, because of an implicit loop between your table 'ready' event and the listener that reacts to sorting events:

- when the table is 'ready' , the onReady() method is called.

- onReady() adds a listener for the 'sort' event on the table

- when you click a table header, the 'sort' event fires

- the 'sort' event triggers a dashboard redraw

- the dashboard redraw implicitly redraws the table is well.

- when the table draws, it fires a 'ready' event. Go back to step 1.

So every time you change the table sorting, the number of listeners (and consequent redraws) increases exponentially (to be precise, your dashboard will redrawn 2^n-1 times on the nth click to change the table sorting). After a few clicks the whole thing will slow down to a crawl.

You can easily debug this by adding a console.log statement in your 'sort' event callback and see how many times it fires.

The solution is to break the cycle. After all you want to attach the 'sort' listener only after the table has been drawn the first time. So you can change your code to the following:

var readyListener = google.visualization.events.addListener(table, 'ready', onReady);

...

function onReady() {

  google.visualization.events.removeListener(readyListener)

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

-- R.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/CuXKGpWx9P0J.

[asgallant]

It seems rather silly to have to register for the 'ready' event on the chartWrapper in order to register for other events on the chart.  Might I make the request that all events fired by a chart filter up to the chartWrapper as well?  It currently works for 'select' events on some charts (does not work with tables), it would be nice if it worked for all events.