1

I have a scattor plot with the following data:

[ 'HDD', 'Oil Consumption']
['100','1000']
['50','500']
['10,'100']

Say each data point is taken from a specific date:

[ 'HDD', 'Oil Consumption', 'Date']
['100','1000','1 January 2015']
['50','500', '1 February 2015']
['10,'100', '1 March 2015']

How can I add a filter (DateRangeFilter preferably) to filter based on the date column, even though the date column isn't really apart of the scatter plot.

Jglstewart
  • 696
  • 1
  • 8
  • 16

1 Answers1

2

You do this with ChartWrapper, ControlWrapper and a Dashboard.

Here is the documentation related to this from Google.

Basically, you instead of initiating a chart with new google.visualization.ScatterChart(document.getElementById('yourId')) you use something called ChartWrapper (which is, in my opinion, an easier and more readable way of doing this).

Then you create a ControlWrapper (a wrapper for your control (date range filter) element).

Lastly you bind your ControlWrapper to your ChartWrapper via your Dashboard. Your data could be like:

        var data = google.visualization.arrayToDataTable([
      ['Age', 'Weight', 'Date'],
      [ 8,      12, new Date(2015, 10, 1)],
      [ 4,      5.5, new Date(2015, 10, 2)],
      [ 11,     14, new Date(2015, 10, 3)],
      [ 4,      5, new Date(2015, 10, 4)],
      [ 3,      3.5, new Date(2015, 10, 5)],
      [ 6.5,    7, new Date(2015, 10, 6)]
    ]);

A ChartWrapper could look like this: 

var scatterWrap = new google.visualization.ChartWrapper({
        chartType:'ScatterChart',
        containerId:'chart_div',
        dataTable:data,
        view:{
            columns:[0, 1] // This makes sure your ScatterChart won't try to use the third column for visualization, that would result in an error.
        }
    });

and a ControlWrapper like this

var dateRangeWrap = new google.visualization.ControlWrapper({
        controlType:'DateRangeFilter',
        containerId:'dateRange',
        options:{
            filterColumnIndex:2
        }
    });

Finally initializing and binding to your Dashboard: 

      var googleDashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
      googleDashboard.bind(dateRangeWrap, scatterWrap);
      googleDashboard.draw(data);

This would all end in this Fiddle. (Note that you need to load controls instead of corechart in your google.load).

Henrik Aronsson
  • 1,383
  • 9
  • 17
  • I just got it to work! Wish I could say I did it this way... would have been way smarter. Oh well. Version 2! Thanks so much. – Jglstewart Nov 23 '15 at 16:38
  • You probably just changed your view to exclude the columns with "bad" data (the date column), or? – Henrik Aronsson Nov 23 '15 at 21:53
  • I actually built a table and controlled the table and then grabbed the first two columns from the table to build the scatter plot... it worked fine, but was plain ridiculous. I have since replaced my method with your solution which makes way more sense. I was missing the ability to set the view columns. Which was extremely important and valuable – Jglstewart Nov 25 '15 at 17:23