Google Dashboard keeps giving error "Cannot read property 'call' of undefined"

[Madubuko Ogbobe]

i'm struggling with understanding how to build google dashboard. i have everything required to makeup the dashboard but i keep getting stuck with the error "Cannot read property 'call' of undefined". i don t know what to do anymore.

i am generating the data for the dataTable from a sharepoint list.

i have my DataTable, Controls, Charts and Dashboard but still i cant get it to come together. Any help allowing me understand how to get this to work will be much appreciated.

    <!--Load the AJAX API-->

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

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

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">

      // Load the Visualization API and the corechart package.

      // Set a callback to run when the Google Visualization API is loaded.

      

      // Callback that creates and populates a data table,

      // instantiates the column chart , passes in the data and

      // draws it.

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

    

    

function NumberOfUsersPerRegion () {

    

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

            dataCharts.addColumn('string', 'Location');  

            dataCharts.addColumn('string', 'Category');

            dataCharts.addColumn('string', 'Users');  

             var requestUri = _spPageContextInfo.webAbsoluteUrl +

                      "/_api/Web/Lists/getByTitle('NPT Form')/items?$select=h1g4/Title,Location,Time_x0020_Lost,Cat/Title&$expand=Cat/Title,h1g4/Title";

             // execute AJAX request

                $.ajax({

                                url: requestUri,

                                type: "GET",

                                async:false,

                                headers: { "ACCEPT": "application/json;odata=verbose" },

                                success: function (data) {                                 

                                                console.log(data);

                                                var count = 0; 

                                                var dataResults = data.d.results;

                                                var Regions;

                                                var timelost;

                                                var addTimeLost = 0;

                                                

                                                //console.log(dataResults);

                                                for (i=0; i< data.d.results.length; i++) {                                    

                                                                count = count + 1;

                                                                Regions = dataResults[i].Regions;

                                                                Timelost = dataResults[i].Time_x0020_Lost;

                                                                Location = dataResults[i].Location;

                                                                Category = dataResults[i].Cat.Title;

                                                                Users = dataResults[i].h1g4.Title;

                                                               // addTimeLost = addTimeLost + dataResults[i].Time_x0020_Lost;

                                                                dataCharts.addRow([ Location, Category, Users ]); 

                                                                

                                                }

                                                console.log(count);

                                  },

            

                        });

                

                // Define category pickers ////////////////

                var divPicker = new google.visualization.ControlWrapper({

                    'controlType': 'CategoryFilter',

                    'containerId': 'control1',

                    'options': {

                        'filterColumnLabel': 'Location',

                        'ui': {

                            'labelStacking': 'vertical',

                            'allowTyping': false,

                            'allowMultiple': false

                        }

                    }

                });

                var subdivPicker = new google.visualization.ControlWrapper({

                    'controlType': 'CategoryFilter',

                    'containerId': 'control2',

                    'options': {

                        'filterColumnLabel': 'Category',

                        'ui': {

                            'labelStacking': 'vertical',

                            'allowTyping': false,

                            'allowMultiple': false

                        }

                    }

                });

                // Define a column chart

                var columnChart = new google.visualization.ChartWrapper({

                    'chartType': 'ColumnChart',

                    'containerId': 'chart2',

                    // Configure the column chart

                    'view': {'columns': [1, 2]}

                }); 

                 var table = new google.visualization.ChartWrapper({

                    'chartType': 'Table',

                    'containerId': 'chart1',

                    'options': {

                        'width': '100%'

                    },

                    'view': {'columns': [0, 1, 2]}

                }); 

                var columnChart1  = new google.visualization.ChartWrapper({

                    'chartType': 'ColumnChart',

                    'containerId': 'chart3',

                    //group the data for the pie chart

                    'dataTable' : google.visualization.data.group(dataCharts, [0],

                    [{'column': 2, 'aggregation': google.visualization.data.Count, 'type': 'number'}])

                }); 

              

                 // Create the dashboard.

                 new google.visualization.Dashboard(document.getElementById('dashboard')).

                    // Configure & bind the controls 

                bind(divPicker, subdivPicker).

                    bind(subdivPicker, [table, columnChart]).

                    // Draw the dashboard

                draw(columnChart1);  

                google.visualization.events.addListener(subdivPicker, 'ready',

   

                function(event) {

                    // group the data of the filtered table and set the result in the pie chart.

                    columnChart1.setDataTable( google.visualization.data.group(

                    // get the filtered results

                    table.getDataTable(),

                    [0],

                    [{'column': 2, 'aggregation': google.visualization.data.Count, 'type': 'number'}]

                ));

                    // redraw the pie chart to reflect changes

                    columnChart1.draw();

                });

                google.visualization.events.addListener(subdivPicker, 'statechange',

   

                function(event) {

                    // group the data of the filtered table and set the result in the pie chart.

                    columnChart1.setDataTable( google.visualization.data.group(

                    // get the filtered results

                    table.getDataTable(),

                    [0],

                    [{'column': 2, 'aggregation': google.visualization.data.Count, 'type': 'number'}]

                ));

                    // redraw the pie chart to reflect changes

                    columnChart1.draw();

                });

                

             

    }

        google.setOnLoadCallback(NumberOfUsersPerRegion);

    </script>

<div id="dashboard">

            <table width="100%">

                <tr style='vertical-align: top'>

                    <td style='width: 17%; font-size: 0.9em;'>

                        <div id="control1"></div>

                        <div id="control2"></div>

                    </td>

                    <td>

                        <div style="float: left;" id="chart2"></div>

                    </td>

                    <td><div style="float: left;" id="chart3"></div>

                    </td>

                </tr>

                <tr><td>&nbsp;</td>

                    <td><div style=" " id="chart1"></div>  

                    </td><td>&nbsp;</td>

                </tr>

            </table>

        </div>

 

[Daniel LaLiberte]

You appear to be using both the old jsapi loader and the new gstatic loader.  Probably a bad idea that might be causing the problem you are seeing.  You should only use the new gstatic loader, and therefore you would call google.charts.load and google.setOnLoadCallback.   

I also wonder if the problem might be with your google.visualization.data.Count references, if that function is somehow not available when it should be.  You might just try replacing that with your own function to see if it changes the error you get.

Hard to tell what is going on otherwise because I can't run your example as is - the data url construction starts _spPageContextInfo.

--
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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/dfd55329-fe20-4b62-8080-dd7291d849f3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA