CODEWITHSUNDEEP
angularchart.jsng2-charts
Somayeh
Somayeh

Reputation: 61

chart cannot read multiple datasets from the back-end (single data is fine)

I am using Angular 4, Chart.js 2.8.0 and ng2-charts 1.6.0 to create charts in my webpage. I have inserted the path to the chart.min.js (scripts section) in the angular-cli file and also imported ChartsModule in the app.module.ts file.

I first created the chart with the static data like below which worked fine (after constructor and before ngOnInit):

ts file

....
public barChartData: ChartDataSets[] = [
    {data: [1,2,3,4,5], 
      label: 'Data 1'},
    {data: [5,6,7,8,9], label: 'Data 2'}
  ];
....

html file

<div class="container">
    <div style="display: block">
      <canvas baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType">
      </canvas>
    </div>
  </div>

Then, I tried to give it the back-end datasets (arrays of numbers: exmple: [11,12,13,14,15]). I had one called which was read after the ngOnInit:

this.test2 = this.tests.testResults;

I used the single data input like below and it worked fine:

<div class="container">
    <div style="display: block" *ngIf="test2.length">
      <canvas baseChart
              [data]="test2"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType">
      </canvas>
    </div>
  </div>

But as soon as I want to make it two datasets in the ts file like below, it gives an error of "data not defined".

ts file (notice test 2 is [11,12,13,14,15])

....
public barChartData: ChartDataSets[] = [
    {data: this.test2, 
      label: 'Data 1'},
    {data: [5,6,7,8,9], label: 'Data 2'}
  ];
....

html file

<div class="container">
    <div style="display: block" *ngIf="barChartData.length">
      <canvas baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType">
      </canvas>
    </div>
  </div>

what am I doing wrong here?

Upvotes: 0

Views: 890

Answers (2)

Somayeh
Somayeh

Reputation: 61

I could find the solution. Have a look at this link. I defined my variable as below (this solved all the errors I mentioned above):

private test2: any[] = [{ data: [] }];

also, I changes the location of calling the barChartData.

First, in export class:

public barChartData;

then, inside my function that calls the backend data:

this.barChartData = [
            {data: this.test2, label: 'Data 1'},
            {data: this.test3, label: 'Data 2'}
          ];

This worked for me.

Upvotes: 1

Orestis Zekai
Orestis Zekai

Reputation: 922

You are inserting data dynamically so you need to make an update on change. You will need ChangeDetectorRef for this. Do the following steps:

1) Add this in your imports:

import { ChangeDetectorRef } from '@angular/core';

2) Add this in the constructor:

private cdRef: ChangeDetectorRef

3) After changing the data do this:

this.cdRef.detectChanges();

Upvotes: 0

Related Questions