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 :
/*
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.
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>
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
Post a Comment