Description:
In this example, we explain that how to display pie chart in Dynamic CRM using HTML Web Resource. Alternatively, how to display revenue vs cost of particular opportunity in pie chart using HTML web Resource and Canvas JS chart in Dynamic CRM.or how to display pie chart in Dynamic CRM entity form using JavaScript and Web Resource.
So here we explain that how to get data of the Opportunity
entity and display it in Pie Chart dynamically using HTML Web Resource and
JavaScript in Dynamic CRM.
<html>
<head>
<script>
var
book = [];
function
GetPercentageEngagedAndRecieved(opportunityId) {
debugger;
var
oDataUri = window.parent.Xrm.Page.context.getClientUrl() + "/xrmservices/2011/OrganizationData.svc/OpportunitySet?$filter=OpportunityId
eq Guid'" + opportunityId.replace("{",
"").replace("}", "") +
"'&$select=new_PercentageEngaged,new_percentagereceived";
//alert(oDataUri);
$.ajax({
type: "GET",
async: false,
contentType: "application/json; charset=utf-8",
datatype: "json",
url: oDataUri,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
},
success: function (data, textStatus, XmlHttpRequest) {
for
(var i = 0; i < data.d.results.length; i++)
{
var percentageengaged = new
Object();
percentageengaged["y"] =
data.d.results[i].new_PercentageEngaged;
percentageengaged["label"] = "%
engaged";
book.push(percentageengaged);
var percentagereceived = new
Object();
percentagereceived["y"] =
data.d.results[i].new_percentagereceived;
percentagereceived["label"] = "%
received";
book.push(percentagereceived);
}
},
error: function
(XMLHttpRequest, textStatus, errorThrown) { }
});
}
function
LoadChart() {
debugger;
var
opportunityId = window.parent.Xrm.Page.data.entity.getId();
GetPercentageEngagedAndRecieved(opportunityId);
var
options = {
title: {
text: "Opportunity Summary"
},
subtitles: [{
text: ""
}],
animationEnabled: true,
data: [{
type: "pie",
startAngle: 40,
toolTipContent: "<b>{label}</b>: {y}%",
showInLegend: "true",
legendText: "{label}",
indexLabelFontSize: 16,
indexLabel: "{label} - {y}%",
dataPoints: book
}]
};
$("#chartContainer").CanvasJSChart(options);
}
</script>
</head>
<body onload="LoadChart();">
<script type="text/javascript" src="../../ClientGlobalContext.js.aspx"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body>
</html>
0 comments:
Post a Comment