grhmstwrt
grhmstwrt

Reputation: 341

build dynamic array for charts.js

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?

Upvotes: 1

Views: 1161

Answers (2)

Dino
Dino

Reputation: 8292

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
  }
}

Upvotes: 2

mgamba
mgamba

Reputation: 1199

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 = [];

Upvotes: 3

Related Questions