build dynamic array for charts.js

Question

i'm having trouble with building an array in js to pass into a charts.js obj. I have the following array;

{"Questions":{"name":"Hello World"},"Options":{"inner":{"No":"723","Yes":"6","Maybe":"0"}}}

Which is passed through to the function below as 'response'. I want to cycle through each item in the 'inner' array and build an array of objects to pass into my chart.js.

function drawChart(response){
    var array = JSON.parse(response)
    var options = array['Options']['inner'];

    for(var option in options){
      var datasetValue = [];

      datasetValue.push = {
          value: parseInt(options[option]),
          color: "#F7464A",
          highlight: "#FF5A5E",
          label: option
      }
    }
    console.log(datasetValue);
    var mydata = {
        datasetValue
    }

    var pieData = [
        {
            value: 300,
            color: "#F7464A",
            highlight: "#FF5A5E",
            label: "Red"
        },
        {
            value: 50,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Green"
        },
        {
            value: 100,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Yellow"
        },
        {
            value: 40,
            color: "#949FB1",
            highlight: "#A8B3C5",
            label: "Grey"
        },
        {
            value: 120,
            color: "#4D5360",
            highlight: "#616774",
            label: "Dark Grey"
        }
    ];
    var ctxOptions = {
        responsive: true,
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
        showTooltips: false,
    };
    var pie_ctx = document.getElementById("donut").getContext("2d");
    var chart = new Chart(pie_ctx).Doughnut(mydata, ctxOptions);
  }

You can see above i have two arrays, my dynamic array i'm trying to build 'datasetValue' and 'pieData'. pieData is a sample, and if i pass this array into my new chart, the array works fine, but my datasetValue only seems to contain the last item, rather that all the objects as pieData does. Heres an output from my console.log(datasetValue);

[push: Object]
push
:
Object
color
:
"#F7464A"
highlight
:
"#FF5A5E"
label
:
"Maybe"
value
:
0

What i'm i doing wring in rebuilding my array to match the pieData array format?

mgamba · Accepted Answer · 2017-06-06 16:16:44Z

3

I think datasetValue.push = { is overriding the Array.push function for datasetValue. Try datasetValue.push( { to append.

Also, it's likely that only the very last value will be added to datasetValue since you're resetting it on every iteration:

for(var option in options){
      var datasetValue = [];

answered Jun 6, 2017 at 16:16

mgamba

1,2099 silver badges10 bronze badges

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

5 Comments

grhmstwrt Over a year ago

Thanks mate, you were right, i'd moved this inside the for. See my comment below

mgamba Over a year ago

@gsusonline it looks like you're still overriding the push function. What happens if you try switching to datasetValue.push( instead of datasetValue.push =?

grhmstwrt Over a year ago

Oh i've fixed that based on your comment, i moved the var datasetValue outside the for loop and made it .push({ rather than .push = {

mgamba Over a year ago

My guess is that you should be passing the bottom line Doughnut(datasetValue, ctxOptions)

grhmstwrt Over a year ago

Thats it!!! Thanks mate, you were absolutely right, the chart was reading a base array rather than the array of objects. Thanks again

Dino · Accepted Answer · 2017-06-06 16:19:08Z

2

Your datasetValue contains only last item because you instantiate it in for loop. Every time you go in a for loop, datasetValue will be recreated (set to empty array), therefore you only log the 'last' item. You should instantiate it outside the for loop.

var datasetValue = [];
for(var option in options){

  datasetValue.push = {
      value: parseInt(options[option]),
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: option
  }
}

answered Jun 6, 2017 at 16:19

Dino

8,37213 gold badges50 silver badges93 bronze badges

3 Comments

grhmstwrt Over a year ago

Thanks, thats corrected the loop, so my array now has 3 objects - however, it still doesn't seem to make my chart draw

Dino Over a year ago

It would be great if you could create a plunker or jsfiddle demo.

grhmstwrt Over a year ago

Sure, i'll try and create one now

Collectives™ on Stack Overflow

build dynamic array for charts.js

2 Answers 2

5 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Related