[visualization-api] passing chartrangefilter to another chart

Thu, 31 May 2012 06:01:47 -0700 

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 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.

Reply via email to