Hi there. So I noticed in the interactive example that you linked, that when you touch the slider, the lines on the table go all out of whack. Specifically, I think it's flipping the axis or something. Is this from the code you used? I couldn't figure out where this was happening. I'm trying to do something similar to this(only not using a slider). If you could look into this, I'd be appreciative.
On Wednesday, 21 September 2011 04:16:57 UTC-5, Riccardo Govoni wrote: > > 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 view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/m9aExkd7ZLYJ. 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.
