How to create an array of objects dynamically in javascript for a pie chart

Question

I am working on creating dynamic values for a pie chart which is a graph from chart.js I have created a variable which contains multiple object values which needs to be passed in the array for pie graph. If I pass the variable nothing shows up but if I pass the same static values to the variable the pie chart starts working. I searched for various methods but could not make it work with my code. My code looks like this:

  /*PIE Chart*/
    var elements = [];
    var counter;
    jQuery.ajax({
    type: 'POST',
    url: 'ajax-request.php',
  data: {},
  success: function(response){
    //here data is means the out put from the php file it is not           
     $('#StudentID').val()
    var jsonData = JSON.parse(response);
        console.log(elements); 
        var pieData;
        for (var i = 0; i < jsonData.length; i++) {
            counter = jsonData[i];
            var sale = roundFloat(counter.sales,2);
            elements+= '{value:'+sale+',color: "#FDB45C",highlight: "#FFC870",label:"'+counter.sku+'"},';

        }
        var pieData = [elements];

    var ctx = document.getElementById("pie-chartjs").getContext("2d");
    window.myPie = new Chart(ctx).Pie(pieData);
   } 
   });

Hint: elements is a string hence pieData is an array of one element i.e the string value of elements. I guess the Pie function is supposed to take an array of objects. — Ankur
– Ankur, Commented Aug 31, 2015 at 7:06
I get this value in console for 'elements' : {value:9982154.22,color: "#FDB45C",highlight: "#FFC870",label:"GL2010B"},{value:1473462.15,color: "#FDB45C",highlight: "#FFC870",label:"PL009"},{value:1009087.15,color: "#FDB45C",highlight: "#FFC870",label:"PL006"}, which comes dynamic from ajax request. When I pass this complete response copied from console the Pie chart works. But it doest work when I pass the variable 'elements'. — P Singh
– P Singh, Commented Aug 31, 2015 at 8:36
How can I create a key value pair as an object like this color: "#FFC870" highlight: "#FFC871" label: "Some Name" value: 50 Currently I am getting the output 0 as key and the complete string as its value which is incorrect. 0: "{value:217419.2,color: "#be4bc7",highlight: "#FFC870",label:"Some name"}," Any Help?? — P Singh
– P Singh, Commented Aug 31, 2015 at 10:24

potatopeelings · Accepted Answer · 2015-08-31 10:48:44Z

1

You need to make a couple of changes to your code to make this work.

pieData should be an array of objects. So instead of appending a string, you need to push the object into the array. Once you do that that elements is an array of objects and you can directly assign it to pieData

Below is the changed code block

for (var i = 0; i < jsonData.length; i++) {
    counter = jsonData[i];
    var sale = roundFloat(counter.sales, 2);
    elements.push({
        value: sale,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: counter.sku
    })
}
var pieData = elements;

answered Aug 31, 2015 at 10:48

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

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

Collectives™ on Stack Overflow

How to create an array of objects dynamically in javascript for a pie chart

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related