RXJS Observable & ng2-chart example

[ChrisWorks]

Does any one have a working example of how to update data, labels and colours dynamically on a ng2-chart using Observables?

I am basically trying to created a shared Chart module/component to be used by other components. But I want to be able to update the data and labels of the chart dynamically.

I have tried to use the ReactiveComponent pattern described in this issue:
angular/angular#5689

@Input() inputDataset: string;

public chartDataset: any = [];

constructor(private _reportService: ReportService) {
		super();
        this.observePropertyCurrentValue<string>('inputDataset')
            .subscribe(dataset => this.updateChart(dataset));
 }

However if I set the charDataset value in the updateChart method the chart is not updated. (the charDataset variable is the one using for ng2-chart html dataset tag)

updateChart(dataset) {

		this.chartDataset = dataset;

		/*
		this.charts.forEach((child) => {
			console.log("here", child);
			if (child.chartType == 'polarArea') {
  				child.labels.splice(0);
  				child.labels = this.chartLabels;
			}
			child.ngOnChanges({} as SimpleChanges);
		});
		  */
	}
}

I have tried to follow the example on how to update labels updated here:
#774

But the this.charts.forEach is undefined when running from the updateChart method, but is accessible in the ngOnInit or ngAfterViewInit

Anyone have any good ideas on how to this the "right" way?

[bjines]

I am not sure how to do it for multiple charts, and I might look into that later.

But what I am doing for a single chart is going in to the chart config and updating the values there and then calling an update. So it would look something like this:

if(this.chart.chart){
  this.chart.chart.config.data.datasets = this.chartDataset;
  this.chart.chart.config.data.labels = this.chartLabels;
  this.chart.chart.update();
}

Although, if you have multiple datasets, then the above will turn the color of all of your datasets grey (at least it does for me) so you might want to loop through and do something like:

for(let i =0; i < this.chartDataset.length; i++){
   this.chart.chart.config.data.datasets[i].data = this.chartDataset[i].data;
}

Hopefully this helps you a little if you haven't figured this out on your own yet.

[olavomachadoshibata]

Actually I have the same issue. When I have just one chat, I can get it from the html with:
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
then I am using:

if (this.chart && this.chart.chart && this.chart.chart.config) {
  this.chart.chart.config.data.datasets = this.chartDatasets;
  this.chart.chart.config.data.labels = this.chartLabels;
  this.chart.chart.config.options.legend = this.chartOptions.legend.display;
  this.chart.chart.config.options.scales.yAxes[1].display = yShow;
  this.chart.chart.update();
}

But now I need to create more than one chart dynamically using *ngFor and I do not know how to get these charts from the html to update manually those configurations. Have you guys figured out how to solve this?

[paviad]

Please see this #1071