Passing Array to Chart.js not working, chart not rendering

Question

I am trying to display a chart by passing in arrays of data to Chart.js. If I pass arrays, the chart does not render at all; it's as if the arrays are all empty. If I hard code the values into the location where the arrays are, the chart renders fine. I'm new to JavaScript/TypeScript... I found these similar questions, but they don't seem to work in my situation:

Array not working correctly in Chartjs

How to add datas to chart js from javascript array itself?

Here is my code. The chart does not render if I remove the hard coded arrays and un-comment the array variables.

  buildChart() {
var momentArr = new Array(); var weightArr = new Array(); var bmiArr = new Array();
this.weightList.forEach(elements => {
  elements.forEach(element => {
    momentArr.push(element.moment);
    weightArr.push(element.weight);
    bmiArr.push(element.bmi);
  });
})

console.log(momentArr);
console.log(weightArr);
console.log(bmiArr);

this.weightChart = new Chart(this.weightCanvas.nativeElement, {
  type: 'line',
  data: {
    labels: [1500948156623,1500948161541], //momentArr,
    datasets: [
      {
        label: 'Weight',
        borderColor: "#3cba9f",
        fill: false,
        data: [300, 280] //weightArr
      },
      {
        label: 'BMI',
        borderColor: "#8e5ea2",
        fill: false,
        data: [150, 140] //bmiArr
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          displayFormats: {
            quarter: 'MMM YYYY'
          }
        }
      }],
      yAxes: [{
        type: 'linear',
        ticks: { beginAtZero: false}
      }]
    }
  }

});
}

FYI, weightList is a FirebaseListObservable.

What does the output of you console.log statements look like? Is there a chance that the data in weightList is strings and not numbers? — Mark
– Mark, Commented Jul 25, 2017 at 3:03
All three arrays are numbers (same numbers as in the code. I tried screen shotting the console output, but was unable to.) All three arrays have length 2, and in console print out as: [ ] , expanded, : num 1, num2 — banncee
– banncee, Commented Jul 25, 2017 at 10:15
I double checked the output of the log, and they are all numbers, and the variable is an Array. — banncee
– banncee, Commented Jul 25, 2017 at 23:55

John Townsend · Accepted Answer · 2017-07-31 12:11:57Z

2

You will want to do

this.weightChart.data.datasets[0].data.concat(weightArr);

this.weightChart.update();

And so on for the other datasets. If the concat isn't working, you'll want to loop through weightArr and push to the chart, then update.

for (var i = 0 ; i < weightArr.length; i++){
            this.weightChart.data.datasets[0].data.push(weightArr[i]);
}

this.weightChart.update();

Hope this helps!

answered Jul 31, 2017 at 12:11

John Townsend

3364 silver badges7 bronze badges

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

4 Comments

banncee Over a year ago

Thanks for the suggestion - will try it out tonight. Still, I don't understand why the arrays of data have to be 'loaded' after creating the Chart and then re-updated?

John Townsend Over a year ago

So in the version I am using (I believe it is 2.6.X) the initial create does not require you to call chart.update(). Later on though you are required to call chart.update() if you change the the chart JSON object. I think it is because chartjs uses the canvas and must redraw the entire canvas on each update.

banncee Over a year ago

I tried both of your suggestions, and still the chart does not have any data. I am really at a loss as to why this wouldn't work...any help is greatly appreciated!

banncee Over a year ago

I found the Chart.JS docs for updates, but it is exactly what you suggested, and what I did - chartjs.org/docs/latest/developers/updates.html

banncee · Accepted Answer · 2017-08-25 01:12:54Z

1

Turns out that the issue wasn't chart.js at all; it was the asynchronous nature of data retrieval from Firebase. I added a ref.on(....) and populate the arrays as mentioned in the answer by @john townsend, and it is rendering correctly now. Thanks for your help!

answered Aug 25, 2017 at 1:12

banncee

96914 silver badges31 bronze badges

Collectives™ on Stack Overflow

Passing Array to Chart.js not working, chart not rendering

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related