Here is the HTML Canvas code:
<div>
<canvas id="chartdiv" width="200" height="200"></canvas>
</div>
Below is the JSON data:
[{
"SID": "1",
"NAME": "niten",
"FTEPERCENT": "71.29",
"FTCPERCENT": "28.71"
}, {
"SID": "2",
"NAME": "jiten",
"FTEPERCENT": "82.08",
"FTCPERCENT": "17.92"
}]
And here is the corresponding code snippet:
window.onload = function() {
$.ajax({
type: "POST",
url: "ViewDirectManagersOverviewDetails.aspx/GetEmployeeOverviewDetailsForDirectManagers",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(Result) {
debugger;
Result = JSON.parse(Result.d);
var newctx1;
for (var i = 0; i < Result.length; i++) {
var data1 = parseFloat(Result[i].FTEPERCENT);
var data2 = parseFloat(Result[i].FTCPERCENT);
var tempData = {
labels: ["FTE", "FTC"],
datasets: [{
data: [data1, data2],
backgroundColor: [
"#FF6384",
"#36A2EB"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB"
],
borderWidth: 5
}]
};
// For a pie chart1
var ctx = document.getElementById("chartdiv").getContext("2d");
var myLineChart = new Chart(ctx, {
type: "pie",
data: tempData,
options: options,
title: {
display: true,
text: 'Employee Overview',
fontStyle: 'bold',
fontSize: 20
}
});
}
$('chartdiv').append(newctx1);
}
});
};
The above code currently plots a pie chart on the same canvas ID using JSON data with two array objects. However, the requirement now is to plot separate pie charts on the same canvas ID but each representing different array object from the JSON.
This will involve looping through the JSON data and drawing separate pie charts in table rows to represent the data visually.