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.
