Visualizing and Controling Aggregate data

[Matt N]

Hi! I am new to the whole Google Visualization API. I have some log
data, where each row represents a logged even associated with a
timestamp. I would like to draw a simple instances vs time line graph,
i.e. how many events happened on this date, etc. I have my data
retrieved and stored in a standard dataTable.

I know that I can do something like the following to get the aggregate
data (i'm only interested in the event count per time unit) :

var grouped = google.visualization.data.group(
data,
[0],
[{'column': 0, 'aggregation':
google.visualization.data.count, 'type': 'number'}]
);
However, what if I now want to be able to control the data suing a
dashboard? For instance, the ChartRangeFilter allows me to limit the
dates that I am looking at. However, there are times when I want the
granularity to be "hours" instead of "days". This means that my graph
will have 24 entries with instances of events happening at that time.
The ChartRangeFilter should still filter based on the overall data the
events happened.

The problem is that the control and the chart have to be working on
the same data. I simply can't make a DataView that does an aggregate
(group by + count) to draw the chart, while still controlling based on
the unaggregated data. I've tried disconnecting the control from the
graph, without luck, by listening to movements of the control.


google.visualization.events.addListener( control,'statechange',onControlStateChange );

function onControlStateChange() {
var controlState = control.getState();
console.log(controlState.lowValue);
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{column: 0, minValue:
controlState.lowValue, maxValue: controlState.highValue}]));
var grouped = google.visualization.data.group(
view,
[0],
[{'column': 0, 'aggregation':
google.visualization.data.count, 'type': 'number'}]
);

chart2.draw(grouped);
}


The controlState always seems to be undefined though :(. Any tips on
what I can do?

[asgallant]

Is "control" in scope in the onControlStateChange function?  If not, try it this way:

google.visualization.events.addListener(control, 'statechange', function () {
    var controlState = control.getState();

    var view = new google.visualization.DataView(data);
    view.setRows(data.getFilteredRows([{
        column: 0,

        // chartRangeFilters' state has a range property object with start and end properties 
        minValue: controlState.range.start,
        maxValue: controlState.range.end
    }]));
    var grouped = google.visualization.data.group(view, [0], [{

        column: 0,
        aggregation: google.visualization.data.count,
        type: 'number'
    }]);
    chart2.draw(grouped);

});​