Awesome, works perfect!
On Tue, Aug 13, 2013 at 6:46 PM, asgallant <[email protected]>wrote: > Creating the CategoryFilter is similar to creating the ChartRangeFilter: > > var categoryFilter = new google.visualization.ControlWr**apper({ > controlType: 'CategoryFilter', > containerId: 'category_filter_div', > options: { > filterColumnLabel: 'Exercise Name' > } > }); > > and you bind the two controls to the chart like this: > > myDashboard.bind([myDateSlider, categoryFilter], [myLine]); > > > On Tuesday, August 13, 2013 5:39:59 PM UTC-4, Steven Brooks wrote: > >> Awesome, that worked as usual. My next goal would be to have a filter >> for the 'Exercise Name' column. The walkthrough video for Google Scripts >> give a search filter with the following code: >> >> var exerciseFilter = Charts.newCategoryFilter() >> .setFilterColumnLabel("**Exercise") >> .build(); >> >> This is different than the code I currently have. If I wanted to do a >> ColumnFilter, would I have to choose the column in a similar way as your >> answer? I am assuming it is something along the lines of: >> >> Making a new filter (don't currently know the syntax for that >> Setting the filter column to 'Exercise Name' >> Binding that filter with the other charts >> >> Thoughts? >> >> On Tue, Aug 13, 2013 at 5:25 PM, asgallant <[email protected]>wrote: >> >>> The ChartRangeFilter draws a simplified version of a chart using the >>> data it is presented with; in your case, you are giving it 3 columns, one >>> date (fine), one number (fine), and one string (not fine). You have to >>> hide the string column from the filter's chart in order to get it to draw >>> successfully. Use the "ui.chartView.columns" option to set the columns >>> used by the filter's chart: >>> >>> >>> var myDateSlider = new google.visualization.**ControlWr**apper({ >>> 'controlType': 'ChartRangeFilter', >>> 'containerId': 'control_div', >>> 'options': { >>> 'filterColumnLabel': 'Date', >>> ui: { >>> chartView: { >>> columns: [0, 1] >>> } >>> } >>> } >>> }); >>> >>> >>> On Tuesday, August 13, 2013 5:18:47 PM UTC-4, Steven Brooks wrote: >>>> >>>> I am having trouble with my dashboard. I took this code from a blog I >>>> found on building dashboards. It works fine with a RangeFilter, LineChart, >>>> and Table as long as their are only two columns but when three are added it >>>> errors out. The table will show with the three columns and the linechart >>>> will show just the two columns I specified, but the rangefilter errors out >>>> with "All series on a given axis must be of the same data type×" >>>> >>>> >>>> Here is the code I currently have: >>>> >>>> <script type="text/javascript" src="//www.google.com/jsapi"><****/script> >>>> >>>> <script type="text/javascript"> >>>> google.load('visualization', '1', { packages : ['controls'] } ); >>>> google.setOnLoadCallback(**creat**eTable); >>>> >>>> function createTable() { >>>> // Create the dataset (DataTable) >>>> var myData = new google.visualization.**DataTable**(); >>>> myData.addColumn('date', 'Date'); >>>> myData.addColumn('number', 'Weight'); >>>> myData.addColumn('string', 'Exercise Name'); >>>> myData.addRows([ >>>> [new Date(2014, 6, 12), 90, "Squat"], >>>> [new Date(2014, 6, 13), 80, "Squat"], >>>> [new Date(2014, 6, 14), 100, "Squat"], >>>> [new Date(2014, 6, 15), 80, "Squat"], >>>> [new Date(2014, 6, 16), 70, "Squat"] >>>> ]); >>>> >>>> // Create a dashboard. >>>> var dash_container = document.getElementById('**dashb**oard_div'), >>>> myDashboard = new google.visualization.**Dashboard**(dash_container); >>>> >>>> >>>> // Create a date range slider >>>> var myDateSlider = new google.visualization.**ControlWr**apper({ >>>> 'controlType': 'ChartRangeFilter', >>>> 'containerId': 'control_div', >>>> 'options': { >>>> 'filterColumnLabel': 'Date' >>>> } >>>> }); >>>> >>>> // Table visualization >>>> var myTable = new google.visualization.**ChartWrap**per({ >>>> 'chartType' : 'Table', >>>> 'containerId' : 'table_div' >>>> }); >>>> >>>> // Bind myTable to the dashboard, and to the controls >>>> // this will make sure our table is update when our date changes >>>> myDashboard.bind(myDateSlider, myTable); >>>> >>>> // Line chart visualization >>>> var myLine = new google.visualization.**ChartWrap**per({ >>>> 'chartType' : 'LineChart', >>>> 'containerId' : 'line_div', >>>> 'view': {'columns': [0, 1]} >>>> }); >>>> >>>> // Bind myLine to the dashboard, and to the controls >>>> // this will make sure our line chart is update when our date changes >>>> >>>> myDashboard.bind(myDateSlider, myLine ); >>>> >>>> myDashboard.draw(myData); >>>> } >>>> </script> >>>> >>>> <div id="dashboard_div"> >>>> <div id="control_div"><!-- Controls renders here --></div> >>>> <div id="line_div"><!-- Line chart renders here --></div> >>>> <div id="table_div"><!-- Table renders here --></div> >>>> </div> >>>> >>>> Thanks for any help. >>>> >>> -- >>> You received this message because you are subscribed to a topic in the >>> Google Groups "Google Visualization API" group. >>> To unsubscribe from this topic, visit https://groups.google.com/d/** >>> topic/google-visualization-**api/6r5b1F31S7Q/unsubscribe<https://groups.google.com/d/topic/google-visualization-api/6r5b1F31S7Q/unsubscribe> >>> . >>> To unsubscribe from this group and all its topics, send an email to >>> google-visualization-api+**[email protected]. >>> To post to this group, send email to google-visua...@**googlegroups.com. >>> >>> Visit this group at http://groups.google.com/** >>> group/google-visualization-api<http://groups.google.com/group/google-visualization-api> >>> **. >>> For more options, visit >>> https://groups.google.com/**groups/opt_out<https://groups.google.com/groups/opt_out> >>> . >>> >>> >>> >> >> -- > You received this message because you are subscribed to a topic in the > Google Groups "Google Visualization API" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/google-visualization-api/6r5b1F31S7Q/unsubscribe > . > To unsubscribe from this group and all its topics, send an email to > [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/groups/opt_out. > > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
