How to Create Piechart in sharepoint 2010 Based on the List item Values? Only using Javascript/jquery

Question

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.

Answer 1

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,
        color:"#F38630"
    },
    {
        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.

Answer 2

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

Answer 3

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.