Provide Chart.js with data via AJAX JSON not working?

Question

I'm building a dashboard and I want to display information from my database directly to Chart.js.

I've created the Ajax and it returns the correct data. I've put this altogether in the following code:

$.ajax({
    type: 'GET',
    url: "http://localhost/cwwa/web/app.php/AJAX/dashboard/",
    contentType: "application/json",
    success: function(json) {

        var ChartData = json.enviFig;

        var oacData = [
            $.each(ChartData, function(i, item) {
                {
                    value: ChartData[i].totalTonne;
                    color: "#F7464A";
                    highlight: "#FF5A5E";
                    label: ChartData[i].wasteType;
                }
            })
        ];

        var rCM = document.getElementById("recycledChartMain").getContext("2d");

        var recycledChartMain = new Chart(rCM).Pie(oacData);

    }

});

However, when the page is loaded the graph doesn't appear. Firebug doesn't an error either, only this warning relating to the Chart.js file:

canvas: an attempt to set strokeStyle or fillStyle to a value that is neither a string, a CanvasGradient, or a CanvasPattern was ignored.

What's going wrong?

Christophe · Accepted Answer · 2014-07-09 17:10:54Z

1

The way you populate oacData doesn't sound right. I would expect this:

var oacData = [];
$.each(ChartData, function(i, item) {
    oacData.push(
        {
            value: ChartData[i].totalTonne,
            color: "#F7464A",
            highlight: "#FF5A5E",
            label: ChartData[i].wasteType
        }
    );
});

edited Jul 9, 2014 at 17:10

answered Jul 9, 2014 at 1:04

Christophe

28.3k29 gold badges105 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mickburkejnr Over a year ago

It threw an error, saying it was missing a } after wasteType; but changing the ; to a , remove this error, so it runs without an error now. However the chart doesn't appear?

Christophe Over a year ago

Code corrected, inside an object you should use commas, not semi-colons.

rihardsp · Accepted Answer · 2014-07-09 01:09:54Z

0

Now oacData is objects within an array within an array. That's why Chart.js can't parse your data. Just omit the brackets like:

var oacData = $.each(ChartData, function(i, item) {
                {
                    value: ChartData[i].totalTonne;
                    color: "#F7464A";
                    highlight: "#FF5A5E";
                    label: ChartData[i].wasteType;
                }
            });

And you will have an array with objects.

answered Jul 9, 2014 at 1:09

rihardsp

641 silver badge5 bronze badges

Collectives™ on Stack Overflow

Provide Chart.js with data via AJAX JSON not working?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related