Quantcast
Channel: SharePoint 2013 - Development and Programming forum
Viewing all articles
Browse latest Browse all 7589

Error with Drop-Downs Filters on Google Charts

$
0
0

I have been working on different ways to create google charts, but this time i wanted to add a drop-down filter to my chart to make it abit more interactive. I'm pulling my data from a sharePoint list and that works up untill i try to aggreagate the data, and then build a new dataArray for the charts to feed off.

But i keep getting an error " Uncaught TypeError: Cannot read property 'call' of undefined"

but i can seem to spot what the issue is. My best guess would be the newData variable but i'm having a brain freeze here. Any help would be very much appreciated

<script type="text/javascript" src="https://www.google.com/jsapi"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><!--Div that will hold the dashboard--><div id="dashboard_div"><!--Divs that will hold each control and chart--><div id="filter_div"></div><div id="chart_div"></div><div id="NumberOfUsersPerRegion"></div></div><script>
google.load('visualization', '1.1', {packages: ['controls']});

function NumberOfUsersPerRegion () {

            var dataCharts = new google.visualization.DataTable();
            dataCharts.addColumn('string', 'Location');
            dataCharts.addColumn('string', 'Category');
            dataCharts.addColumn('string', 'User Count');

             var requestUri = _spPageContextInfo.webAbsoluteUrl +"/_api/Web/Lists/getByTitle('NPT Tickets')/items?$select=Loc,Category,Ticket_x0020_By/Title&$Expand=Ticket_x0020_By/Title";

             // execute AJAX request
                $.ajax({
                                url: requestUri,
                                type: "GET",
                                async:false,
                                headers: { "ACCEPT": "application/json;odata=verbose" },
                                success: function (data) {
                                                console.log(data);

                                                var dataResults = data.d.results;
                                                var Regions;
                                                var timelost;
                                                var addTimeLost = 0;
                                                var Users;
                                                var Categorys;


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


                                                                Timelost = dataResults[i].Time_x0020_Lost;
                                                                Location = dataResults[i].Loc;
                                                                Users = dataResults[i].Ticket_x0020_By.Title;
                                                                Categorys = dataResults[i].Category;
                                                                console.log(Users);
                                                                console.log(Categorys);
                                                                console.log(Location);
                                                                dataCharts.addRow([Location ,Categorys, Users]);

                                                }

                                  },

                        });
                       // console.log(dataCharts);


             var newData = google.visualization.data.group(dataCharts, [{
                      column: 0,
                  }], [{
                      column: 1,
                      label: 'Category',
                      type: 'string'
                  }], [{
                      column: 2,
                      label: 'Number of users',
                      aggregation: google.visualization.data.count,
                      type: 'number'
                  }]);



                  var countryPicker = new google.visualization.ControlWrapper({
                            'controlType': 'CategoryFilter',
                            'containerId': 'filter_div',
                            'options': {
                                'filterColumnLabel': 'Location',
                                'ui': {
                                    'labelStacking': 'vertical',
                                    'allowTyping': false,
                                    'allowMultiple': false,
                                    'allowNone': false
                                }
                            },
                                'state': {
                                selectedValues: ['Asia:Malampaya']
                               }
            });

            var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

           // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          }
        });



        dashboard.bind(countryPicker, pieChart);
        console.log(newData);

        // Draw the dashboard.
        dashboard.draw(dataCharts);







             }//end of function NumberOfUsersPerRegion



google.setOnLoadCallback(NumberOfUsersPerRegion);

</script>



Viewing all articles
Browse latest Browse all 7589

Trending Articles