ng2-chart api data gets overwritten when I try populate a line chart

25 Views Asked by At

I'm trying to populate 3 lines on graph using ng2-charts like this:

updateOrdersChartOptions(ordersChartData: AllDocsView2Chart) {
    if (ordersChartData) {
      for (let i = 0; i < ordersChartData.linesData.length; i++) {
        for (let j = 0; j < ordersChartData.linesData[i].length; j++) {
          this.lineChartData.datasets[0].data[j] = ordersChartData.linesData[i][j];
          console.log(ordersChartData.linesData[i][j]);
        }
      }

      this.lineChartData.labels = ordersChartData.chartLabel;

      this.chart?.update();
    }
  }

but the chart only shows the values in the first set - see screenshot enter image description here

all data displays in the console correctly:

enter image description here

So my question is how do I show the three sets of data coming back from api call?

1

There are 1 best solutions below

0
tercou1 On

resolved the problem - I made the mistake of not passing i-index into datasets

updateOrdersChartOptions(ordersChartData: AllDocsView2Chart) {
    if (ordersChartData) {
      for (let i = 0; i < ordersChartData.linesData.length; i++) {
        for (let j = 0; j < ordersChartData.linesData[i].length; j++) {
          this.lineChartData.datasets[i].data[j] = ordersChartData.linesData[i][j];
        }
      }

      this.lineChartData.labels = ordersChartData.chartLabel;

      this.chart?.update();
    }
  }

now the chart looks like this: enter image description here

which is what I was looking for