Create PieChart and Bind Dynamic values using SPServices.

Step 1:
Include the below references.

<script src="../../SiteAssets/jquery-1.10.2.js" type="text/javascript"></script>
<script src="../../SiteAssets/jquery.flot.min.js" type="text/javascript"></script>
<script src="../../SiteAssets/jquery.flot.pie.js" type="text/javascript"></script>
<script src="../../SiteAssets/jquery.numberformatter.js" type="text/javascript"></script>
<script src="../../SiteAssets/highcharts-custom.js" type="text/javascript"></script>
<script src="../../SiteAssets/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>

Step 2: 
Create a DIV tag with an ID.

<div id="flot-placeholder" style="width:550px;height:400px;margin:0 auto"></div>

Step 3:
Write a GetListItems method to retrieve the data that you want to show it in the PieChart.

function GetListItems_Pie()
{

var CsiteUrl = _spPageContextInfo.webServerRelativeUrl;
var ViewFields = "<ViewFields><FieldRef Name='Selection' /><FieldRef Name='Integer' /><FieldRef Name='Int' /></ViewFields>";
var FilteredValue = "<Query><Where><IsNotNull><FieldRef Name='Selection' /></IsNotNull></Where></Query>";

var GetChoices = [];
$().SPServices({
   operation: "GetListItems",
   async: false,
   webURL : CsiteUrl,
   listName: "PieChart",
   CAMLViewFields: ViewFields,
CAMLQuery: FilteredValue,
   completefunc: function (xData, Status) {
   alert(xData.responseText+ " " + Status);

   $(xData.responseXML).SPFilterNode("z:row").each(function() {

//GetChoices holds the Dataset to bind to the PieChart. The Format of the Dataset should be like below :

/*
var dataSet = 
    [
         {label: "Asia", data: 4119630000, color: "#005CDE" },
         { label: "Latin America", data: 590950000, color: "#00A36A" },
         { label: "Africa", data: 1012960000, color: "#7D0096" },
         { label: "Oceania", data: 35100000, color: "#992B00" },
         { label: "Europe", data: 727080000, color: "#DE000F" },
         { label: "North America", data: 344120000, color: "#ED7B00" }    
];
*/
                    GetChoices.push({
                 label:$(this).attr("ows_Country"),
                 data:$(this).attr("ows_Consumers")
        });
     });
   }
 });

Step 4:

Use the below format code for creating the PieChart.
   
var options = {
    series: {
        pie: {
            show: true,
            label: {
                show: true,
                radius: 180,
                formatter: function (label, series) {
                    return '<div style="border:1px solid grey;font-size:8pt;text-align:center;padding:5px;color:white;">' +
                    label+ ' : ' +
                    Math.round(series.percent) +
                    '%</div>';
                },
                background: {
                    opacity: 0.8,
                    color: '#000'
                }
            }
        }
    },
    legend: {
        show: true
    },
    grid: {
        hoverable: true
    }
};
 
    $.plot($("#flot-placeholder"),GetChoices, options );
}


Once you have completed this, you can see the result as below.



Comments