Grouping data after filtering requires a bit of hackery, but it's not too
hard to do. Replace your PieChart in the Dashboard with e dummy table that
is hidden in your HTML. Use a "ready" event handler on the dummy to get
the dummy's data, aggregate it, and draw your PieChart with the aggregated
data. Here's a demo: http://jsfiddle.net/asgallant/R9Fz4/
On Friday, May 23, 2014 12:42:08 PM UTC-4, DeadRabbittt wrote:
>
> Hi there,
>
> i have a question regarding the binding of data used in a dashboard, shown
> in a pie chart. This is a stripped down example:
>
> function drawVisualization() {
> // Prepare the data
> var dataShow = google.visualization.arrayToDataTable([
> ['Year' 'Month' 'Category' 'Value'],
> ['2014', 'January' 'Shop' 456],
> ['2014', 'February' 'Rent' 234],
> ['2014', 'March' 'Rent' 456],
> ['2014', 'April' 'Other' 234],
> ['2013', 'January' 'Rent' 222],
> ['2013', 'February' 'Other' 123]
> ]);
>
> // Define a category picker control for the Year column
> categoryPickerYear = new google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'controlYear',
> 'options': {
> 'filterColumnLabel': 'Year',
> 'ui': {
> 'labelStacking': 'vertical',
> 'allowTyping': false,
> 'allowMultiple': true
> }
> }
> });
> // Define a category picker control for the Month column
> categoryPickerMonth = new google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'controlMonth',
> 'options': {
> 'filterColumnLabel': 'Month',
> 'ui': {
> 'labelStacking': 'vertical',
> 'allowTyping': false,
> 'allowMultiple': true
> }
> }
> });
>
> // Define a Pie chart
> range = Array.apply(null, Array(5)).map(function (_, i) {return
> i;});
> pieInc = new google.visualization.ChartWrapper({
> 'chartType': 'PieChart',
> 'containerId': 'PieChartInc',
> 'options': {
> 'width': 400,
> 'height': 400,
> 'legend': 'none',
> 'title': 'Donuts eaten per person',
> 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
> 'pieSliceText': 'label'
> },
> // Instruct the piechart to use colums 2 and 3 ()
> // from the 'data' DataTable.
> 'view': {'columns': [2,3]}
> });
>
> // Create a dashboard
> dashboard = new
> google.visualization.Dashboard(document.getElementById('dashboard'));
> // Establish bindings, declaring the both the slider and the
> category
> // picker will drive both charts.
> dashboard.bind(categoryPickerYear,categoryPickerMonth);
> dashboard.bind(categoryPickerMonth,[pieInc,pieExp]);
> // Draw the entire dashboard.
> dashboard.draw(dataShow);
> }
>
> So the behaviour is the following:
> The dashboard is drawn with the pie chart, i chose a year and a month and
> it shows me the corresponding row. Perfect.
>
> But now i want the pie chart to *group my results*, so for example i
> chose the year 2014 but no month. Than it shows me 4 pies:
> Shop,Rent,Rent,Other. But i want the overall result for the year 2014. so i
> want the pie chart to show me : Shop,Rent,Other and sum up the rent for all
> the months available in this year. How can i achieve this? Any help is
> greatly appreciated.
> Another example would be if i chose two months, and the resulting pie
> chart should sum up the categories with the same name, instead of giving me
> many different slices with the same name.
>
> So long, M
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
