Sorry, my bad, I've written my response too soon. ChartWrapper.draw() method does not accept a datatable parameter, so my suggestion to use:
slider.draw(dataTable); lineChart.draw(dataTable); is wrong. Instead, I created this example http://jsfiddle.net/nPWYh/ which should accomplish what you want. The slider lets you operate a column-wise filtering of the datatable. The way it works is the following: - set up a ControlWrapper for the slider and give it the datatable in its 'dataTable' initialization parameter. - set up a ChartWrapper for the chart and give it the datatable in its 'dataTable' initialization parameter. - wire up the 'statechange' listener on the control - do _not_ use google.visualization.Dashboard but just manually draw() both the slider and the chart (for the reasons described above). - Whenever the statechange event fires, alter the chart 'view' and redraw it (note that to keep the example readable, I use a simplified filtering logic rather than the one you're using. As said, note that the 'controls' API was initially designed for row-level filtering, so the example goes a bit outside the beaten track. For example, the 'filterColumnIndex' parameter (which would instruct the control which column operate upon) is useless in this scenario, but still required by the API. -- R. On 20 September 2011 19:19, uover82 <[email protected]> wrote: > Hi Richardo - thanks for the help > > This doesn't seem to work, unfortunately - dashboard bind/draw seems > to be required for rendering, and wired/commenting the > onControlChange() handler doesn't seem to have any impact. > In any case, the row/column filtering problem remains. > > I'll keep working/looking - can you think of any other options? > > Thanks > > John > > On Sep 20, 8:17 am, Riccardo Govoni ☢ <[email protected]> wrote: > > Thanks, here's the explanation for the behavior you see. > > > > Dashboards have been designed (in the current released status) to perform > > row-wise filtering. Therefore the dashboard.bind(slider, lineChart) line > > instructs the dashboard to filter the datatable row-wise whenever the > slider > > is operated, and to feed the output of said filtering to the line chart. > > > > In addition to that, your code also listens for changes in the slider > status > > and feeds a column-filtered view to the line chart. > > > > There's a race condition issue here (depending on which event handler is > > invoked first in response to slider changes, either yours or the > dashboard > > one) which results in the weird behavior you experience. > > > > Since you are taking care of manually wiring the slider and the linechart > > together, you can get rid of : > > > > dashboard.bind( slider,lineChart ); > > dashboard.draw( dataTable ); > > > > and replace it with: > > > > slider.draw(dataTable); > > lineChart.draw(dataTable); > > > > basically removing all the dashboard management logic (which you don't > need > > since it operates row-wise) and retaining only the control and the > linechart > > which you manually draw and wire together with your > > onControlStateChange()handler. > > > > Would that work? > > -- R. > > > > On 20 September 2011 16:03, uover82 <[email protected]> wrote: > > > > > > > > > > > > > > > > > Certainly, Richardo - thanks for the assistance. > > > > > Here's the dashboard code: > > > > > function responseHandler(response) { > > > // Remove the loading message (if exists). > > > var loadingMsgContainer = document.getElementById('loading'); > > > loadingMsgContainer.style.display = 'none'; > > > > > if (!gadgetHelper.validateResponse(response)) { > > > // Default error handling was done, just leave. > > > return; > > > } > > > > > dataTable = response.getDataTable(); > > > > > var tx = prefs.getBool("haxis_time_format"); > > > > > if ( tx ) > > > formatTimeXAxis( dataTable ); > > > > > var ref = getMaxColumn( dataTable ); > > > > > // Define a slider control for the y-axis. > > > slider = new google.visualization.ControlWrapper({ > > > 'controlType': 'NumberRangeFilter', > > > 'containerId': 'control1', > > > 'options': { > > > 'filterColumnIndex': ref, 'minValue': 0, > > > 'ui': > > > { 'labelStacking':'horizontal','orientation':'vertical','label':'' } > > > } > > > }); > > > > > google.visualization.events.addListener( > > > slider,'statechange',onControlStateChange ); > > > > > dashboard.bind( slider,lineChart ); > > > dashboard.draw( dataTable ); > > > }; > > > > > function formatTimeXAxis( _table ) { > > > // format the x-axis in time-only format. > > > var v; > > > var sp; > > > for ( var i = 0;i<_table.getNumberOfRows();i++ ) { > > > v = _table.getValue( i,0 ); > > > sp = v.indexOf( ' ' ); > > > if ( sp > 0 ) { > > > ts = v.substring( sp+1,v.length ); > > > _table.setValue( i,0,ts ); > > > } > > > } > > > > > Also, using the default binding/linkage seems to produce similar > > > results - filtered rows/columns. > > > > > Let me know what you think - thanks > > > > > John > > > > > On Sep 20, 7:34 am, Riccardo Govoni ☢ <[email protected]> wrote: > > > > Would you mind pasting the code you use to assemble the > > > > google.visualization.Dashboard as well, if any? > > > > > > I suspect you are using a google.visualization.Dashboard linking > together > > > > the slider with the linechart, _and_ your own onControlStateChange > > > callback. > > > > The former is geared toward performing row filtering (that's the way > > > > dashboards work by default), while your code performs the column > > > filtering. > > > > The combination of the two is likely to generate the problem you > > > describe. > > > > > > -- R. > > > > > > On 20 September 2011 15:25, uover82 <[email protected]> wrote: > > > > > > > Hi All, > > > > > > > I'm working with a dashboard linking a slider with a line chart > > > > > filtering/displaying multiple columns/series. > > > > > Things work well/as expected to some extent. However, within > certain > > > > > filter ranges, the underlying data table seems to begin filtering > row > > > > > data as well as columns, which is the problem. Here's some related > > > > > code snippets: > > > > > > > function onControlStateChange() { > > > > > var controlState = slider.getState(); > > > > > var filteredView = > > > > > filterView( dataTable,controlState.lowValue,controlState.highValue > ); > > > > > lineChart.setView( filteredView.toJSON() ); > > > > > lineChart.draw(); > > > > > } > > > > > > > function filterView( _table,_min,_max ) { > > > > > // filter a data table by min, max column values, producing a > > > > > data view. > > > > > var validColumns = [ 0 ]; > > > > > var cellValue; > > > > > var valid; > > > > > for ( var i = 1;i<_table.getNumberOfColumns();i++ ) { > > > > > valid = true; > > > > > for ( var j = 0;j<_table.getNumberOfRows() && valid;j++ ) { > > > > > cellValue = _table.getValue( j,i ); > > > > > if ( (cellValue < _min || cellValue > _max) && cellValue > != > > > > > null ) > > > > > valid = false; > > > > > } > > > > > > > if ( valid ) > > > > > validColumns.push( i ); > > > > > } > > > > > > > var filteredView = new google.visualization.DataView( _table > ); > > > > > filteredView.setColumns( validColumns ); > > > > > > > return filteredView; > > > > > } > > > > > > > validColumns data appears to remain correct/consistent, while the > > > > > underlying data table/chart seems to suffer the problem in some > filter > > > > > ranges. > > > > > > > Has anyone else experienced this issue and/or know of a remedy? > > > > > > > Thanks > > > > > > > John > > > > > > > -- > > > > > 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. > > > > > -- > > > 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. > > -- > 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. > > -- 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.
