Chart Sharepoint list data with Google Visualization API using REST Service and JSON

758 views
Skip to first unread message

Manou

unread,
Sep 11, 2015, 2:27:46 PM9/11/15
to Google Visualization API
Hello,

I have the following json data from our Sharepoint Server and I am trying to use Google charts to generate a pie chart and a bar chart:

I have 4 teams for which I need to create a separate pie chart. For each pie chart, I need to:
1) count the number of all open task by team;
2) count the number of past due tasks by Team. To achieve this I am thinking of checking if the due date is past then count the total number the past due tasks by Team and show on the chart,
3) Count the total number of tasks that are due in 7 days from today by team.

And for the Bar chart, I need to:
4) generate a bar chart for all the 4 teams with the average task duration

So far I am able to pull the data from the server and show some basic piechart, which is not in the format that I need. Grouping or categorization is missing.

I need help with with grouping the different elements of the list item by TeamName when producing the pie chart per team.

I have spent many days trying to solve this without success.

My data from our SharePoint list looks like below:

{
   
"d":
   
{
       
"results":
       
[
           
{
               
"__metadata":
               
{
                   
"id": "Web/Lists(guid'0000-000-0000-3344-afret4532')/Items(11)",
                   
"uri": "https://myserver/home/siteDev/_api/Web/Lists(guid'0000-000-0000-3344-afret4532')/Items(11)",
                   
"etag": ""22"",
                   
"type": "SP.Data.TasksDevelopment"
               
},
               
"TeamName": "Team, (TE-08)",
               
"TaskName": "Task1",
               
"DueDate": "2014-04-25T04:00:00Z",
               
"Status": "Closed",
               
"Created": "2014-02-24T05:00:00Z",
               
"DateClosed": "2014-04-17T04:00:00Z",
               
"TaskDuration": "18",
               
"PastDueDate": "2014-04-26T04:00:00Z"
           
},
           


           
    Here is my current REST code that I am using and it is from the following blog post: http://blogs.microsoft.co.il/justguy/2013/05/22/google-charts-pie-2-with-angularjs-in-sharepoint-2013-using-rest/
   
  
  $scope.loadREST = function () {

    jQuery
.ajax({

        url
: "https://myserver/home/siteDev/_api/Web/Lists/GetByTitle('Teams')/Items?
       

        type: "
GET",

        dataType: "
json",

        async: "
true",

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

        success: function (data) {

            var newData = [];


            jQuery.each(data.d.results, function(index,value) {

                newData.push([value.TeamName, value.Task_Duration]);
            });

            $scope.$apply(function(){

                $scope.chartData = newData;

            });

        },

        error: function () {

            alert("
error");

        }

    });

};


Tatyana Baytler

unread,
Jun 20, 2018, 8:59:49 AM6/20/18
to Google Visualization API
Hi, have you solve the issues? Can you share with us?
Reply all
Reply to author
Forward
0 new messages