Today we got a new requirement to show a Radar chart on Opportunity form. The input of this chart will be available from the current record. I used Chart.js to complete this requirement. It's a open source and can be use in a simple steps.
1) Prepare HTML web resource like below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script src="Chart.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var chartLabels = [];
var painLabel = window.parent.Xrm.Page.getControl("tk_pain").getLabel();
var powerLabel = window.parent.Xrm.Page.getControl("tk_power").getLabel();
var visionLabel = window.parent.Xrm.Page.getControl("tk_vision").getLabel();
var valueLabel = window.parent.Xrm.Page.getControl("tk_value").getLabel();
var crtaLabel = window.parent.Xrm.Page.getControl("tk_crta").getLabel();
var collaborateLabel = window.parent.Xrm.Page.getControl("tk_collaborate").getLabel();
chartLabels.push(painLabel);
chartLabels.push(powerLabel);
chartLabels.push(visionLabel);
chartLabels.push(valueLabel);
chartLabels.push(crtaLabel);
chartLabels.push(collaborateLabel);
var chartData = [];
var painValue = window.parent.Xrm.Page.getAttribute("tk_pain").getValue();
var powerValue = window.parent.Xrm.Page.getAttribute("tk_power").getValue();
var visionValue = window.parent.Xrm.Page.getAttribute("tk_vision").getValue();
var valueValue = window.parent.Xrm.Page.getAttribute("tk_value").getValue();
var crtaValue = window.parent.Xrm.Page.getAttribute("tk_crta").getValue();
var collaborateValue = window.parent.Xrm.Page.getAttribute("tk_collaborate").getValue();
chartData.push(painValue);
chartData.push(powerValue);
chartData.push(visionValue);
chartData.push(valueValue);
chartData.push(crtaValue);
chartData.push(collaborateValue);
var data = {
labels: chartLabels,
datasets: [{
label: "Strength of Sale",
data: chartData
}]
};
var options = {
scale: {
ticks: {
min: 0,
max: 5,
stepSize: 1
},
beginAtZero: true
}
};
var ctx = document.getElementById("strengthChart").getContext("2d");
Chart.defaults.global.defaultFontFamily = 'Verdana';
Chart.defaults.global.defaultFontColor = 'black';
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
});
</script>
<style>
canvas#strengthChart {
margin: 0 auto;
display: block;
width: 320px;
height: 300px;
}
</style>
</head>
<body>
<div style="float:left">
<canvas id="strengthChart"></canvas>
</div>
</body>
</html>
2) Place that HTML web resource on the Form and the output will looks like below.
1) Prepare HTML web resource like below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script src="Chart.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var chartLabels = [];
var painLabel = window.parent.Xrm.Page.getControl("tk_pain").getLabel();
var powerLabel = window.parent.Xrm.Page.getControl("tk_power").getLabel();
var visionLabel = window.parent.Xrm.Page.getControl("tk_vision").getLabel();
var valueLabel = window.parent.Xrm.Page.getControl("tk_value").getLabel();
var crtaLabel = window.parent.Xrm.Page.getControl("tk_crta").getLabel();
var collaborateLabel = window.parent.Xrm.Page.getControl("tk_collaborate").getLabel();
chartLabels.push(painLabel);
chartLabels.push(powerLabel);
chartLabels.push(visionLabel);
chartLabels.push(valueLabel);
chartLabels.push(crtaLabel);
chartLabels.push(collaborateLabel);
var chartData = [];
var painValue = window.parent.Xrm.Page.getAttribute("tk_pain").getValue();
var powerValue = window.parent.Xrm.Page.getAttribute("tk_power").getValue();
var visionValue = window.parent.Xrm.Page.getAttribute("tk_vision").getValue();
var valueValue = window.parent.Xrm.Page.getAttribute("tk_value").getValue();
var crtaValue = window.parent.Xrm.Page.getAttribute("tk_crta").getValue();
var collaborateValue = window.parent.Xrm.Page.getAttribute("tk_collaborate").getValue();
chartData.push(painValue);
chartData.push(powerValue);
chartData.push(visionValue);
chartData.push(valueValue);
chartData.push(crtaValue);
chartData.push(collaborateValue);
var data = {
labels: chartLabels,
datasets: [{
label: "Strength of Sale",
data: chartData
}]
};
var options = {
scale: {
ticks: {
min: 0,
max: 5,
stepSize: 1
},
beginAtZero: true
}
};
var ctx = document.getElementById("strengthChart").getContext("2d");
Chart.defaults.global.defaultFontFamily = 'Verdana';
Chart.defaults.global.defaultFontColor = 'black';
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
});
</script>
<style>
canvas#strengthChart {
margin: 0 auto;
display: block;
width: 320px;
height: 300px;
}
</style>
</head>
<body>
<div style="float:left">
<canvas id="strengthChart"></canvas>
</div>
</body>
</html>
2) Place that HTML web resource on the Form and the output will looks like below.
No comments:
Post a Comment