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<http://code.google.com/apis/chart/interactive/docs/events.html#The_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. On 12 October 2011 10:31, Marco Megna <[email protected]> wrote: > 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); > }); > } > } > > -- > 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. > > To post to this group, send email to > [email protected]. > To unsubscribe from this group, send email to > [email protected]. > For more options, visit this group at > http://groups.google.com/group/google-visualization-api?hl=en. > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
