score:0

Accepted answer

figured it out myself after following nagib's comment link.

just leaving it here in case anyone else is trying the same thing.

$(document).ready(function () {
    $.ajax({
        type: "get",
        url: "/?handler=agedata",
        contenttype: "application/json; charset=utf-8",
        datatype: "json",
        success: function (response) {

            var datatf = response.below35;
            var datafn = response.below49;
            var dataff = response.below55;
            var dataso = response.below60;
            var datasf = response.below65;
            var dataasf = response.above65;

            var cage = document.getelementbyid('agechart').getcontext('2d');
            var agechart = new chart(cage, {
                type: 'pie',
                data: {
                    labels: ['< 36', '36 - 49', '50 - 55', '56 - 60', '61 - 65', '> 65'],
                    datasets: [{
                        label: 'age group',
                        data: [datatf, datafn, dataff, dataso, datasf, dataasf],
                        backgroundcolor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        bordercolor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderwidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginatzero: true
                        }
                    }
                }
            });
        }
    });
});

and in my handler, the variables are the same as the one in the question and called it with jsonresult {...below35 = lessthreefive...}

end result enter image description here


Related Query