You need to do a few things: 1) throw away the second DataTable (data2) 2) create the ScatterChart as a ChartWrapper instead of a regular chart 3) use the 'view' option of the ScatterChart's ChartWrapper to restrict it to the opening and closing data columns (2 and 3) in the DataTable 4) bind the control to both of the charts
See the fixed code here: http://jsfiddle.net/asgallant/t3S4Y/ On Thursday, May 31, 2012 6:11:38 AM UTC-4, Mashandburn wrote: > > I am a newbie to the visualization API, so appologies if this has been > covered. I couldn't find a thread exactly about what I am trying to > do. I am trying to use the chartrangefilter to use it to manipulate > multiple graphs. I have taken the ChartRangFilter Control Example, > and added a scatter plot of open and close stock prices. I had hoped > that using the slider would also change the scatter plot to show only > the points (high vs. low) during the selected date range. Any help is > appreciated. > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// > www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="content-type" content="text/html; charset=utf-8"/ > > > <title> > Google Visualization API Sample > </title> > <script type="text/javascript" src="http://www.google.com/jsapi";></ > script> > <script type="text/javascript"> > google.load('visualization', '1.1', {packages: ['corechart', > 'controls']}); > </script> > <script type="text/javascript"> > 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': 'CandlestickChart', > 'containerId': 'chart', > 'options': { > // Use the same chart area width as the control for axis > alignment. > 'chartArea': {'height': '80%', 'width': '90%'}, > 'hAxis': {'slantedText': false}, > 'vAxis': {'viewWindow': {'min': 0, 'max': 2000}}, > 'legend': {'position': 'none'} > }, > > }); > //data table for time-dependent range selector > var data = new google.visualization.DataTable(); > data.addColumn('date', 'Date'); > data.addColumn('number', 'Stock low'); > data.addColumn('number', 'Stock open'); > data.addColumn('number', 'Stock close'); > data.addColumn('number', 'Stock high'); > > //data table for high vs low scatter plot > var data2 = new google.visualization.DataTable(); > data2.addColumn('number', 'Stock open'); > data2.addColumn('number', 'Stock close'); > > // Create random stock values, just like it works in reality. > var open, close = 300; > var low, high; > for (var day = 1; day < 121; ++day) { > var change = (Math.sin(day / 2.5 + Math.PI) + > Math.sin(day / 3) - Math.cos(day * 0.7)) * 150; > change = change >= 0 ? change + 10 : change - 10; > open = close; > close = Math.max(50, open + change); > low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * > 15; > low = Math.max(0, low); > high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * > 15; > var date = new Date(2012, 0 ,day); > data.addRow([date, Math.round(low), Math.round(open), > Math.round(close), Math.round(high)]); > data2.addRow([Math.round(open), Math.round(close)]); > } > // Create and draw the visualization for Open vs Close > stock price > var ac = new > google.visualization.ScatterChart(document.getElementById('visualization')); > > ac.draw(data2, { > title : 'Open vs Close', > isStacked: true, > width: 915, > height: 400, > vAxis: {title: "Open"}, > hAxis: {title: "Close"} > }); > dashboard.bind(control, chart); > dashboard.draw(data); > } > > google.setOnLoadCallback(drawVisualization); > </script> > > </head> > <body style="font-family: Arial;border: 0 none;"> > <div id="visualization" style="width: 915px; height: 400px;"></ > div> > <div id="dashboard"> > <div id="chart" style='width: 915px; height: 300px;'></div> > <div id="control" style='width: 915px; height: 50px;'></div> > </div> > </body> > </html> -- 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/-/1hK4yqBoCrUJ. 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.
