Here's the link to the fixed version. http://jsfiddle.net/nPWYh/28/
On Tuesday, 19 June 2012 17:49:48 UTC-5, Benjamin Press wrote: > > Okay, I figured out what the problem was. When you were creating the new > set of columns to display on the graph, you were cutting off the "Year" > column. If, before the for loop, you push the 0th column onto the array, it > fixes everything. You also set the iteration to start at the low value, > instead of low value minus 1. > > On Tuesday, 19 June 2012 16:45:59 UTC-5, Benjamin Press wrote: >> >> 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/-/htM6edlWHEEJ. 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.
