I have a CustomList in Sharepoint 2010 as Mentioned Below.have two columns Team and Values of Team

List A

Team         ValuesofTeam
A                9
A                6
B                7
C                9
B                2
C                1
A                4

I need to sum the values of each team and draw a pie chart in sharepoint 2010.

How can i take the sum of each team and draw a pie chart in sharepoint 2010 of content editor webpart.

For ex: Sum of A value =19, sum of B value =9, sum of C value =10

Based on the sum of these team i need to create a pie chart.

How can i achieve this reqiuirement?

Please help

Thanks in advance.


For this you can use the Chart.js

At first create a canvas Element:

<canvas id="myChart" width="400" height="400"></canvas>

Then parse your list for example with REST with jQuery:

var urlQuery = "https://www.url.i/site/_vti_bin/ListData.svc/ListA";
var teamA = 0;
var teamB = 0;
var teamC = 0;    
$.getJSON(urlQuery,function(data) {
   $.each(data.d.results, function(i, item) {
      if(item.Team == 'A'){
         teamA += item.ValuesOfTeam;
      if(item.Team == 'B'){
         teamB += item.ValuesOfTeam;
      if(item.Team == 'C'){
         teamC += item.ValuesOfTeam;

Create the Chart:

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Pie(data,options);
var data = [
        value: teamA,
        value : teamB,
        color : "#E0E4CC"
        value : teamC,
        color : "#69D2E7"
Pie.defaults = {
    //Boolean - Whether we should show a stroke on each segment
    segmentShowStroke : true,
    //String - The colour of each segment stroke
    segmentStrokeColor : "#fff",
    //Number - The width of each segment stroke
    segmentStrokeWidth : 2,
    //Boolean - Whether we should animate the chart 
    animation : true,
    //Number - Amount of animation steps
    animationSteps : 100,
    //String - Animation easing effect
    animationEasing : "easeOutBounce",
    //Boolean - Whether we animate the rotation of the Pie
    animateRotate : true,
    //Boolean - Whether we animate scaling the Pie from the centre
    animateScale : false,
    //Function - Will fire on animation completion.
    onAnimationComplete : null

You may have to change something in the code but it should work with something like this. You can also use the Google Chart this works similar.

  • Hello The list A may contains same team name A with multiple items. For ex: i have did team A contains 3 values. We have to sum from sharepoint list for the teams. we could not able to hard code as 19,9,10 – madhan Jul 17 '13 at 9:29
  • 1
    @madhan, the first code snippet sums up the values. Look at it! – teylyn Jul 17 '13 at 9:47
  • mbauer Thanks for your solution.I have used the Google chart. – madhan Jul 18 '13 at 5:52

Nice solution from mbauer!

You could do the same sort of thing with Excel REST as you have the enterprise licence. I have a blog outlining the basics here http://paylord.wordpress.com/2013/04/20/excel-rest-meets-xsl


Try Alex Bautz's Charts solution: http://spjsblog.com/2012/09/20/spjs-charts-for-sharepoint-update-20-09-2012/ All JQ/JS

Good luck.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.