ChartJS dynamically adding values with jQuery array

Question

I am trying to populate a piechart in ChartJS dynamically using data from a jQuery/AJAX query.

The only thing I am struggling with is creating the data in a format that chartJS understands. This is the required format:

var dynamicData = [
    { label: "One", value: 23 },
    { label: "Two", value: 33 },
    { label: "Three", value: 43 },
    { label: "Four", value: 53 },
]

When I try to create it, I get double quotes "" around each set of data. I know it is a simple mistake but I can't figure it out. This is how I am creating the data (partial jQuery code):

.success(function(response) {
    if(!response.errors && response.result) {
        var doughnutData = [];
        $.each(response.result, function( index, value) {
            doughnutData.push('{ label: "'+value[0]+'", value: '+value[2]+',color:"#F7464A" }');
       });

        console.log(doughnutData);

var doughnutOptions = {
    segmentShowStroke : true,
    segmentStrokeColor : "#fff",
    segmentStrokeWidth : 2,
    percentageInnerCutout : 50,
    animation : true,
    animationSteps : 100,
    animationEasing : "easeOutBounce",
    animateRotate : true,
    animateScale : true,
    onAnimationComplete : null
}
var ctx = document.getElementById("chart3").getContext("2d");
var mydoughnutChart = new Chart(ctx).Doughnut(dynamicData, doughnutOptions);
    } else {
    alert("error");
    }

The console shows:

["{ label: "17x1p14e6662", value: 16,color:"#F7464A" }", "{ label: "8734hjgfd784ew", value: 8,color:"#F7464A" }"]

What am I doing wrong?

Cesar Perez · Accepted Answer · 2017-04-13 09:01:32Z

1

The console is outputting the object as a string because you are pushing a string to the var doughnutData, you are doing this wrapping the object in quotes and concatenating the values to the string therefor treating the argument passed to the push method as a string type.

The proper way to use the push method to add an object to an array would be like this.

array.push({property:'string', property:2})

Meaning your code should look like this.

doughnutData.push({ label:value[0], value:value[2],color:"#F7464A" });

Here is a link on how the push method works on an array and Here is another link to javascript objects

Another thing is when you are creating the chart your are passing the var dynamicData instead of your var doughnutData.

edited Apr 13, 2017 at 9:01

answered Apr 13, 2017 at 8:49

Cesar Perez

1096 bronze badges

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

1 Comment

Bruno Over a year ago

Awesome! I understand the issue now. Thanks for taking the time to answer :)

Collectives™ on Stack Overflow

ChartJS dynamically adding values with jQuery array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related