CODEWITHSUNDEEP
javascriptjqueryajaxchartschart.js
Sandro Vardiashvili
Sandro Vardiashvili

Reputation: 187

Is it possible to get chart js data using ajax?

I'm trying to get data of chart JS using AJAX. I've searched all forums including stackoverflow but none of them seem to work. Here is my code.

var chartData = {};

function respondCanvas() {
    new Chart(document.getElementById("exampleChartjsLine").getContext("2d")).Line(chartData);
}


var GetChartData = function () {
    $.ajax({
        url: "/control-panel/actions/saleStatistic.php",
        method: 'POST',
        data: {command: "authorsGrid"}
    }).done(function (data) {
        var chartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            scaleShowGridLines: true,
            scaleShowVerticalLines: false,
            scaleGridLineColor: "#ebedf0",
            datasets: [{
                fillColor: "rgba(204, 213, 219, .1)",
                strokeColor: $.colors("blue-grey", 300),
                pointColor: $.colors("blue-grey", 300),
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: $.colors("blue-grey", 300),
                data: data
            }, {
                fillColor: "rgba(98, 168, 234, .1)",
                strokeColor: $.colors("primary", 600),
                pointColor: $.colors("primary", 600),
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: $.colors("primary", 600),
                data: [28, 48, 40, 19, 86, 27, 90]
            }]
        };
        respondCanvas();
    });
};

    $(document).ready(function() {
        GetChartData();
    });

What I'm getting is this error from console log:

Console Log Error

Ajax call returns array in Javascript just like it should be in chart js:

Ajax Callback

Any kind of help will be much appreciated.

----- UPDATE (according to answer by Quince) -----

var chartData = {};

function respondCanvas(data) {
    new Chart(document.getElementById("exampleChartjsLine").getContext("2d")).Line(data);
}



var GetChartData = function () {
    $.ajax({
        url: "/control-panel/actions/saleStatistic.php",
        method: 'POST',
        data: {command: "authorsGrid"},
        success: function(data) {
           chartData = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                scaleShowGridLines: true,
                scaleShowVerticalLines: false,
                scaleGridLineColor: "#ebedf0",
                datasets: [{
                    fillColor: "rgba(204, 213, 219, .1)",
                    strokeColor: $.colors("blue-grey", 300),
                    pointColor: $.colors("blue-grey", 300),
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: $.colors("blue-grey", 300),
                    data: data
                }, {
                    fillColor: "rgba(98, 168, 234, .1)",
                    strokeColor: $.colors("primary", 600),
                    pointColor: $.colors("primary", 600),
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: $.colors("primary", 600),
                    data: [28, 48, 40, 19, 86, 27, 90]
                }]
           };
           respondCanvas(chartData);
        }
    });
};

    $(document).ready(function() {
        GetChartData();
    });

Upvotes: 0

Views: 2008

Answers (1)

Quince
Quince

Reputation: 15000

You declare chartData twice, the one used inside reposondCanvas is not the one you are writing to in done. Either pass the chartData as a parameter torespondCanvas and remove the global refence (I would recommend this if you do not need to continually update the data) or remove var from your second declaration

Upvotes: 1

Related Questions