I want to display a stacked chart using chartnew.js in aspx page . I got all relevant data from webmethods. The data for chart is in the format
var classdata = {
labels: ["English", "French", "Science", "Maths", "SS", "IT","Computer","Arts"],
datasets: [
{
data: [3, 3, 2, 7, 1, 3, 4, 9],
fillColor: "#B1CD4F",
title: "EXCELLENT"
}, {
data: [5, 2, 10, 4, 2, 8, 4, 2],
fillColor: "#4663EA",
title: "FAIR"
}, {
data: [6, 5, 4, 4, 0, 7, 4, 2],
fillColor: "#B812E0",
title: "GOOD"
}, {
data: [0, 0, 3, 0, 0, 1, 0, 1],
fillColor: "#4173D1",
title: "NEEDS IMPROVEMENT"
}, {
data: [2, 0, 2, 0, 1, 1, 1, 2],
fillColor: "#55E949",
title: "SATISFACTORY"
}, {
data: [7, 6, 2, 8, 3, 3, 10, 7],
fillColor: "#4DD1E7",
title: "VERY GOOD"
}]
}
I got all these data from two webmethods. I took it in two separate variables. That is the labels values to a variable named "datalables" and the dataset values to variable named "data".
Now i want to combine these two variables and create the data for chart. I tried like the following, but it is not working ie the chart is not displaying.
var classdata = {labels: [datalabels],
datasets: [data]
};
How can i combine these two variables to make the chart? Someone please help.
The complete code is here.
function LoadClassChart() {
$.ajax({
type: "POST",
url: "Home.aspx/GetClassChart",
data: JSON.stringify({ Grade: $('select[id$=BatchDropDownList1]').val(), Term: $('select[id$=TermDropDownList1]').val() }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$(".classdivstyle").css("backgroundImage", "url(/Images/back.png)");
var data;
try {
data = r.d;
}
catch (e) {
if (e instanceof SyntaxError) {
alert(e.message);
}
else {
throw (e);
}
}
var el = document.getElementById("<%= classcanvas.ClientID %>");
var ctx = el.getContext('2d');
var classdata = {
labels: [datalabels],
datasets: [data]
};
var newopts = {
inGraphDataShow: true,
inGraphDataFontColor: 'white',
inGraphDataFontSize: 14,
inGraphDataFontStyle: 'bold',
highLight: true,
highLightSet: { fillColor: "red", inGraphDataFontColor: "black", inGraphDataFontSize: 18 },
highLightFullLine: true,
datasetFill: true,
scaleFontSize: 16,
canvasBorders: true,
graphTitle: $('select[id$=TermDropDownList1]').val() + " Performance",
graphTitleFontFamily: "'Segoe UI'",
graphTitleFontSize: 22,
graphTitleFontColor: "#666",
graphSubTitle: "Class Teacher : ",
legend: true,
yAxisLabel: "Students",
xAxisLabel: "Subjects",
yAxisUnit: "Nos.",
annotateDisplay: true,
dynamicDisplay: true
}
$(".classdivstyle").css("backgroundImage", "none");
var myBarChart = new Chart(ctx).StackedBar(classdata, newopts);
},
failure: function (response) {
alert('There was an error in loading chart.');
}
});
}
