I have implemented the timeline filter but the ChartRange filter chart doesn't display anything on the UI.
http://jsfiddle.net/nH2XL/ It works as expected but with no data on the control user wouldn't know the exact range he is looking at. I am doing the cart on both Date columns. Is it a bug or am I doing something wrong? On Sunday, October 6, 2013 5:33:26 AM UTC-7, asgallant wrote: > > Set the "filterColumnIndex" option to 1: > > var control = new google.visualization.ControlWrapper({ > 'controlType': 'ChartRangeFilter', > 'containerId': 'control', > 'options': { > // Filter by the start date > 'filterColumnIndex': 1, > 'ui': { > 'chartType': 'LineChart', > 'chartOptions': { > 'chartArea': {'width': '90%'}, > 'hAxis': {'baselineColor': 'none'} > }, > > 'chartView': { > 'columns': [0, 3] > }, > // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000 > 'minRangeSize': 86400000 > } > }, > // Initial range: 2012-02-09 to 2012-03-20. > 'state': {'range': {'start': new Date(2012, 1, 9), 'end': new > Date(2012, 2, 20)}} > }); > > On Saturday, October 5, 2013 10:44:34 AM UTC-4, Newto apis wrote: >> >> I am not sure how to add the filter on the startDate row. Do I have to >> add it in ChartWrapper. I have added the "filterColumnIndex" in >> ControlWrapper. Here is the code I changed in ControlWrapper: >> >> var control = new google.visualization.ControlWrapper({ >> 'controlType': 'ChartRangeFilter', >> 'containerId': 'control', >> 'options': { >> // Filter by the date axis. >> 'filterColumnIndex': 0, >> 'ui': { >> 'chartType': 'LineChart', >> 'chartOptions': { >> 'chartArea': {'width': '90%'}, >> 'hAxis': {'baselineColor': 'none'} >> }, >> >> 'chartView': { >> 'columns': [0, 3] >> }, >> // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000 >> 'minRangeSize': 86400000 >> } >> }, >> // Initial range: 2012-02-09 to 2012-03-20. >> 'state': {'range': {'start': new Date(2012, 1, 9), 'end': new >> Date(2012, 2, 20)}} >> }); >> >> >> >> On Friday, October 4, 2013 9:09:40 PM UTC-7, asgallant wrote: >>> >>> You can use the ChartRangeFilter with a Timeline chart...sort of. The >>> filter can only act on one column of data, so you must choose to filter >>> either the start dates or end dates, and then set the "filterColumnIndex" >>> property of the ControlWrapper to the appropriate column index (1 for start >>> date, 2 for end date). >>> >>> On Friday, October 4, 2013 6:28:52 PM UTC-4, Newto apis wrote: >>>> >>>> I have been trying to use the chartRangeFilter for the new >>>> >>>> google.visualization.Timeline but was not successful. Here is the code I >>>> have written, could you please let me know if this is possible. If >>>> possible also please let me know what am i doing wrong here. >>>> >>>> <html> >>>> <head> >>>> <script type="text/javascript" src="https://www.google.com/jsapi";></script> >>>> <script type="text/javascript"> >>>> google.load('visualization', '1.1', {packages: ['controls']}); >>>> google.setOnLoadCallback(drawVisualization); >>>> function drawVisualization() { >>>> var dashboard = new google.visualization.Dashboard( >>>> document.getElementById('dashboard')); >>>> >>>> var control = new google.visualization.ControlWrapper({ >>>> 'controlType': 'ChartRangeFilter', >>>> 'containerId': 'control', >>>> 'options': { >>>> // Filter by the date axis. >>>> 'filterColumnIndex': 0, >>>> 'ui': { >>>> 'chartType': 'LineChart', >>>> 'chartOptions': { >>>> 'chartArea': {'width': '90%'}, >>>> 'hAxis': {'baselineColor': 'none'} >>>> }, >>>> // Display a single series that shows the closing value of the >>>> stock. >>>> // Thus, this view has two columns: the date (axis) and the stock >>>> value (line series). >>>> 'chartView': { >>>> 'columns': [0, 3] >>>> }, >>>> // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000 >>>> 'minRangeSize': 86400000 >>>> } >>>> }, >>>> // Initial range: 2012-02-09 to 2012-03-20. >>>> 'state': {'range': {'start': new Date(2012, 1, 9), 'end': new >>>> Date(2012, 2, 20)}} >>>> }); >>>> >>>> var chart = new google.visualization.ChartWrapper({ >>>> 'chartType': 'Timeline', >>>> 'containerId': 'chart', >>>> 'options': { >>>> 'width': 900, >>>> 'height': 500, >>>> } >>>> }); >>>> >>>> var data = new google.visualization.DataTable(); >>>> data.addColumn({ type: 'String', id: 'TestAction' }); >>>> >>>> data.addColumn({ type: 'date', id: 'Start' }); >>>> data.addColumn({ type: 'date', id: 'End' }); >>>> data.addRows([ >>>> [ 'MO Call', new Date(2013,10,2,12,0,0,0), new >>>> Date(2013,10,2,12,0,10,0)], >>>> [ 'MO Call', new Date(2013,10,2,12,0,25,0), new >>>> Date(2013,10,2,12,1,0,0)], >>>> [ 'MO Call', new Date(2013,10,2,12,1,20,0), new >>>> Date(2013,10,2,12,1,40,0)], >>>> [ 'Browser', new Date(2013,10,2,12,0,10,0), new >>>> Date(2013,10,2,12,0,30,0)], >>>> [ 'Browser', new Date(2013,10,2,12,0,45,0), new >>>> Date(2013,10,2,12,1,0,0)], >>>> [ 'Browser', new Date(2013,10,2,12,1,20,0), new >>>> Date(2013,10,2,12,1,40,0)], >>>> [ 'Browser', new Date(2013,10,2,12,2,10,0), new >>>> Date(2013,10,2,12,2,25,0)], >>>> [ 'WIFI', new Date(2013,10,2,12,0,10,0), new >>>> Date(2013,10,2,12,0,30,0)], >>>> [ 'WIFI', new Date(2013,10,2,12,0,45,0), new >>>> Date(2013,10,2,12,1,0,0)], >>>> [ 'WIFI', new Date(2013,10,2,12,1,20,0), new >>>> Date(2013,10,2,12,1,40,0)]]); >>>> >>>> dashboard.bind(control, chart); >>>> dashboard.draw(data); >>>> } >>>> </script> >>>> </head> >>>> >>>> <body style="font-family: Arial;border: 0 none;"> >>>> <div id="dashboard"> >>>> <div id="chart"></div> >>>> <div id="control"></div> >>>> >>>> >>>> >>>> </div> >>>> </body> >>>> </html> >>>> >>>> -- 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.
