Range selector in charts & Google IO 11 Video

[Sean De Buitleir]

Hi guys,

I am trying to implement a date range selector on a chart like in the
Google IO Video:

(Link to the exact moment I am referring to)
http://www.youtube.com/watch?v=NZtgT4jgnE8&feature=player_detailpage#t=868s

Here is the relevant slide from that presentation:
http://google-visualization-io2011.googlecode.com/hg/iframes/geo/xkcd_dilbert.html

Unfortunately the slide doesn't seem to work like the video After
looking at the source I found this: "showRangeSelector: true" but as
mention before it doesn't seem to work, and I couldn't find any
documentation on it at all.

Does anybody knows how I can get this to work? or at least pointers
how I can achieve the same effect

Thanks!

Sean

[visigoth]

Hi Sean,

The Google IO presentation you are referring to uses an internal API that we do not wish to document at this point, as it may be due to changes.

In fact, the reason that example no longer works is we changed the API since, and removed the showRangeSelector option entirely.

We are currently documenting a new control, ChartRangeFilter, which works very much in the same way - it wraps the RangeSelector chart that you attempted using but exposes a standard control API.

I hope it will be out in a matter of days.

However, if you would like to bind your control with a GeoChart, it could be that you will have to wait a bit longer, as I believe the current release will not handle this use case well.

Hope this helps,

Visigoth

[visigoth]

Good news,

We have released the ChartRangeFilter as part of the latest version.

Please try it out and tell us whether it works for you.

Visigoth

[Chris]

Can we get an example of the xkcd/dilbert using ChartRangeFilter? I have been trying to reproduce it on my own with no luck. I can't figure out how to specify a different view of the same data table to the range filter.  And it seems that a dashboard allows only one data table to be associated with it, and you associate a control with a different view of that data. I might be wrong though!

[asgallant]

Use the ui.chartView option to set the view used by the chartRangeFilter.  You are correct, the dashboards allow you to use only one DataTable, but you can set different views of the DataTable on every chart and control in the dashboard.

[Chris]

Thanks for the response. I've been hammering away at this, reading the doc several times and just can't make any progress on a working implementation using the new dashboard specs. My implementation is actually far simpler then the dilbert/xkcd scenarious: I just have a GeoChart intensity map (state, date, intensity as a number), and a DateRangerFilter which uses date on the x axis, and on the y axis, is the aggregate date's intensity. I did get it working well using the technique on the slide, but I would rather use the published API and take advantage of the features of the dashboard, if I could just manage to understand how it works.

Follows is my relevant code - 

        /***

          load the DataTable to be used for dashboard widgets

               I am loading from a JSON data source, using jQuery.

               I tried a variant using literals to load, but that actually proved to be far slower and crashed my browser.

       ***/

       var map = new google.visualization.DataTable();

    map.addRows(data.length);

       map.addColumn('string', 'State');

       map.addColumn('number', 'Intensity');

       map.addColumn('date', 'Date');

$.each(data, function(i,v) {

// set the values for both the name and the intensity

map.setValue(i, 0, v.region);

map.setValue(i, 1, v.intensity);

map.setValue(i, 2, parseDate(v.shipdate));

});

            /***

               load and draw the date range filter to be used for the map

            ***/

            // Group the data by Ship Date and Amount of Shipments

            timeselectdata = new google.visualization.data.group(

            map,

            [2],

            [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]

   );

   timeselectdataview = new google.visualization.DataView(data)

            timeselect = new google.visualization.ControlWrapper({

            'controlType': 'ChartRangeFilter',

            'containerId': 'timeselect',

                'options': {

                vAxis: {textPosition: 'none', minValue: 0},

                hAxis: {type: 'value'},

                legend: 'none'

                },

                'filterColumnIndex': 2,

                'ui': {

                   'chartType': 'LineChart',

                   'chartOptions': {

                     'chartArea': {'width': '90%'},

                     'hAxis': {'baselineColor': 'none'}

                    },

                 'chartView': timeselectdataview,

                 // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000

                 'minRangeSize': 86400000

            }

           });

[asgallant]

My apologies, I misstated earlier: you cannot set views on controls in general; chartRangeFilters specifically permit you to set views on them, but only as an initializer object - you cannot pass an instantiated DataView to them; ie, you might use:

chartView: {
    columns: [0, 1]

}

If you want to group data for the filter, you would have to do so before passing the data to the Dashboard.  If you specifically don't want grouped data for the chart itself, then some tricky manipulation is required to make it work, but it is doable.

[visigoth]

Hi Chris,

Please note that the 'chartView' option accepts a JSON object that specifies a DataView, not a DataView object.

Try replacing 'chartView': timeselectdataview with 'chartView': timeselectdataview.toJSON() and let us know how this works for you.

HTH,

Visigoth

[visigoth]

Looking more closely into this I realized that the fix I proposed is insufficient.

The problem is you need the ChartRangeFilter to filter the original DataTable (so the Dashboard would feed the GeoChart correctly), but pass an aggregated view to the underlying line chart.

Unfortunately, as you have already found out (I see you submitted an issue on this), DataViews do not support aggregation yet.

Sorry for the inconvenience,

Visigoth