How to create variable in javascript from two other variables - create chart using chartnew.js

Question

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.');
            }
        });
    }

Answer 1

remove square brackets in classdata variable as follows

var classdata = { labels: datalabels, datasets: data };

I'm guessing datalabels and data are returning as an arrays.