Visualise SP2010 Rest Data With Google Visualization API

January 21, 2011

Some time ago I was testing out the Google Visualization API with SharePoint 2010 Rest functionality. The Google Visualization API is very handy if you want to visualize your data.

My intention was to create a pie chart to visualise the task statuses. The data was consumed from the SharePoint 2010 REST service with the help of jQuery.

With jQuery it is very simple to retrieve the results from the REST service. All you need to do is to create a call to the URL of the REST service with the getJSON method.

The URL to the REST service is the following: “http://YOUR SITE/_vti_bin/ListData.svc”. In my case the full url to the task list is: “http://your site/_vti_bin/ListData.svc/Tasks?$orderby=Status asc”. As you can see it will retrieve all my tasks and order them by the status value. This result can than be used to create a pie chart.

On the Google Visualization site I did a quick search for a pie chart. Google shows you an example of the pie chart and the corresponding code.

Here is my code, feel free to make some code optimisation.

You can place this code in a HTML Form Web Part. The end result will be the following.

Task list with four tasks

Task list with four tasks


Pie chart with four tasks

Pie chart with four tasks


Task list with 10 tasks

Task list with 10 tasks.


Pie chart from 10 tasks

Pie chart from 10 tasks

Comments