Dynamically Populate ng2 chart in Angular 4

Question

I have written a sample application to fetch data from service in json format and bind it to the chart on UI.

The problem is when ever I try to bind the data, it doesn't. I tried in many ways to bind data but was unsuccessfull.

Functionality is as follows: Page 1: contains 2 dropdowns. 1 with Chart Type & 2nd with Sample Type. On selection of both dropdown values, I click on a button which triggers a function fetchData() in GlobalService.

Below is getter & setter in GlobalService

 getChartData() {
  return this.chartData;
 }

 setChartData(response: any) {
   this.chartData = response.data;
   // console.log(this.chartData);
 }

 getChartlabel() {
  return this.chartLabel;
 }

 setChartLabel(response: any) {
   this.chartLabel = response.label.label;
   // console.log(this.chartLabel);
 }

 getResponse() {
   return this.response;
 }
 setResponse(response: any) {
   this.response = response;
   // console.log(response);
 }

and function goes like this

 fetchData(chart: any, sample: any) {
  console.log();
  const request = {
    chartType: this.selectedChart, // 'BAR | LINE'
    sampleType: this.selectedSample // 'COUNT'
  };

  this.http.post('http://localhost:22222/school/getData', request, this.options)
    .subscribe(
      res => {
        res = res.json();
        const responseData = res;
        console.log(responseData);
        if (responseData.hasOwnProperty('data')) {
          console.log('Data Fetched');
          this.setResponse(responseData); // Setting response
          this.setChartData(responseData); // setting data
          this.setChartLabel(responseData); // setting label
          this.router.navigate(['/gotoChartPage']); // navigating to next page chart.html
        } else {
          alert('Data Fetch Failed');
        }
      });
 }

Now my chart.html looks like this as mentioned in here

<div id='barDiv' class="onerow" *ngIf="1">
        <h4 class="m-2">Bar Chart</h4>
    <div style="display: block">
        <canvas baseChart width="800" height="500"
                [datasets]="barChartData" // --> This is where i want to update Data
                [labels]="barChartLabels" // --> This is where i want to update Labels
                [options]="barChartOptions"
                [legend]="barChartLegend"
                [chartType]="barChartType">
          </canvas>
      </div>      

Then my Chart.component is as follows

  /*******************BAR CHART*********************************/
  public barChartOptions: any = {
     scaleShowVerticalLines: false,
    responsive: true
  };

 public barChartLabels: Array<any> = []; // ["STD 1", "STD 2", "STD 3", "STD 4", "STD 5", "STD 6", "STD 7", "STD 8", "STD 9", "STD 10"]; Sample Data
 public barChartType  = 'bar';
 public barChartLegend  = true;
 public barChartData: any[]  = []; // [ {'data': [40, 32, 42, 23, 43, 35, 50, 48, 37, 45], label: 'COUNT'}]; -- Sample Data

 constructor(private global: GlobalService) {
  this.barChartData =  this.global.chartData;
  this.barChartLabels =  this.global.chartLabel;
}

My response from json comes in this format:

For Single dataSets:

{
 "data":
    {"data": [40,32,42,23,43,35,50,48,37,45], "label":"COUNT"},
 "label":
    {"label":["STD 1","STD 2","STD 3","STD 4","STD 5","STD 6","STD 7","STD 8","STD 9","STD 10"]}
}

and

For multiple dataSets:

{
 "data":
    {"data": [40,32,42,23,43,35,50,48,37,45], "label":"MVM"},
    {"data": [04,03,02,03,03,05,50,80,07,45], "label":"HVD"},
    {"data": [20,32,42,23,43,60,50,48,70,40], "label":"BMS"},
 "label":
    {"label":["STD 1","STD 2","STD 3","STD 4","STD 5","STD 6","STD 7","STD 8","STD 9","STD 10"]}
}

When I try to assign in this way, the chart doesn't come up. But if I hardcode the values in the barChartLabels & barChartData the Charts displays.

I also tried in this way

`<canvas baseChart width="800" height="500"
   [datasets]="global.chartData" // --> This is where I need to update Data
   [labels]="global.chartLabel" // --> This is where I need to update Labels
   [options]="barChartOptions"
   [legend]="barChartLegend"
   [chartType]="barChartType">
 </canvas>`

Help is appreciated. I am stuck with this from more than my brain can think of.

I came across this example on stack : CLICK & CLICK But, its not the correct way to do.

I am wondering why the data doesn't get bind to the charts like this directly

   [datasets]="global.chartData" // --> This is where I need to update Data
   [labels]="global.chartLabel"

Answer 1

Your global service holds the current data sets in the chartData member, and you read that variable once in your component's constructor. However when the data changes, the chartData member in your global service is replaced, but the one in your component keeps pointing to the original, so you never see a change.

You could use an observable stream in your global service to notify clients of change in data.