Dashboard, Bindings and Pie Charts

[DeadRabbittt]

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

[Andrew Gallant]

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/

[DeadRabbittt]

Thanks, works perfect :). I now have another issue: Can't i put all the javascript code in an external file? I tried it and i called : 

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript" src="../../static/myJs/gChartsPerCategory.js"></script>

    <script type="text/javascript">

    google.load('visualization', '1.1', {packages: ['controls','table']});

    google.setOnLoadCallback(loadView());

    function loadView(){

        drawCategoryPickers();

        drawPieCharts();

        drawDummy();

        drawDashboard({{=dataShow}});

        drawTable();

    }

the functions are defined in my javascript file like this : 

function drawCategoryPickers(){...}

but i get the javascript error : Uncaught ReferenceError: drawCategoryPickers is not defined.

Is there a way of solving that?? 

[Andrew Gallant]

That should work.  Check to make sure the gChartsPerCategory.js file is being loaded.  You may have an invalid path.