2

So I'm trying to make a simple bar chart like this one (see documentation).

I'm getting my data from an observable and trying to run change detection in the subscription because the data isn't showing up in the chart, but change detection isn't doing the trick. How do I get the data to show up in the chart if it isn't loaded until after the view initializes?

Here's my code:

bar-chart.component.ts

import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { DataLoadingService } from "../data-loading.service";

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.scss']
})
export class BarChartComponent implements OnInit {

  subscription: any;
  data: any;
  results: any[] = [];

  constructor(private dataService: DataLoadingService, private ref: ChangeDetectorRef) { }

  ngOnInit(): void {
      this.subscription = this.dataService.source.subscribe((val: any) => {
        this.data = val.body;
        for(let x = 0; x < this.data.length; x++) {
            let match = false;
            for(let y = 0; y < this.results.length; y++) {
                if (this.results[y]["name"] === this.data[x].outcome_level) {
                    match = true;
                    this.results[y]["value"] += 1;
                }
            }
            if(match === false) {
                this.results.push({"name": this.data[x].outcome_level, "value": 1})
            }
        }
        function compare(a: any, b: any) {
            if(a.name > b.name) return 1;
            if(a.name < b.name) return -1;

            return 0;
        }

        this.results.sort(compare);
        console.log(this.results);
        this.ref.detectChanges();
      } );
    console.log("from onInit: " + this.results);
  }

The output of the first console.log is as follows:

0: {name: "1", value: 3}
1: {name: "2", value: 6}
2: {name: "3", value: 1}
3: {name: "4", value: 2}

The output of console.log("from onInit: " + this.results) is empty

bar-chart.component.html

<ngx-charts-bar-vertical
  [results]="results"
  xAxis=true
  yAxis=true
  gradient=false
  legend=true
  showXAxisLabel=true
  showYAxisLabel=true
  xAxisLabel="OutcomeLevel"
  yAxisLabel="NumberOfProjects"
></ngx-charts-bar-vertical>
Peter Weeks
  • 291
  • 2
  • 16
  • `console.log("from onInit: " + this.results)` is returning nothing because your subscribe is called asynchronous and your console.log is not waiting your observable to finish. But, you are populating your results correctly...do you see some data on your chart? Inspect your chart and check the `this.results`, maybe is just not right data format? – smithnblack Apr 26 '20 at 19:14
  • I've checked the data format, it's an array of objects that have two properties, `name`, a string, and `value`, a number. I don't see any data on the chart and that's what I'm trying to figure out – Peter Weeks Apr 26 '20 at 19:22
  • I don't see any problem in your code. You don't need ref.detectChanges(). It updates data after u change it. Can u create stackblitz example of your code? – mr. pc_coder Apr 26 '20 at 19:31
  • this is my first time ever using stackblitz. Does this suffice? https://stackblitz.com/edit/angular-tmgmk8 – Peter Weeks Apr 26 '20 at 20:07
  • I don't know why it's having an issue parsing the JSON file right now, I apologize for that @pc_coder – Peter Weeks Apr 26 '20 at 20:56
  • I'm not getting that error in my application, and I've triple checked and the json file should be formatted correctly now. – Peter Weeks Apr 26 '20 at 22:45
  • @pc_coder have you had a chance to look at this today? I'm hoping to have this small prototype finished by Wednesday – Peter Weeks Apr 27 '20 at 21:11

1 Answers1

1

hello i had the same issue as yours , i managed to get a workaround :

  • 1 - add a new variable to your bar-chart.component.ts ( ex : dataReceived = false)
  • 2 - change the value of dataReceived to true at the of the subscribe methode
  • 3 - then bar-chart.component.html use *ngif(dataReceived) to render the chart

it seems that change detection doesn't work inside subscribe methode (Ps : it's only my conclusion and i'm new in Angular ^^)

Linkprada
  • 11
  • 2