Angular2 -highcharts: refresh chart data
I first try to display a blank chart first and then populate the data. The charts are displayed when the component is initialized and charts are added via the chart options list, although the empty chart renders successfully, I cannot redraw it with updated data. I am trying to populate data through a service using a promise (adding a dummy value for a link).
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import { ChartModule } from 'angular2-highcharts';
import { configs } from './configs';
@Component({
selector: 'my-app',
template: `
<div *ngFor="let chart of charts">
<div #chart></div>
</div>`
})
export class AppComponent {
charts = [];
constructor(){}
ngOnInit(): void{
configs.forEach(config => {
//Add charts
this.charts.push(config);
});
}
ngAfterViewInit(): void {
this.charts.forEach(chart => {
chart.series.push({
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
});
});
}
}
configs.ts
export const configs = [
{
chart:{
type:'line',
renderTo: 'line_chart'
},
chartName : 'abc',
title : {text : ''},
tabHolder : {'id':'line_chart','heading':'Line Chart'},
xAxis:{categories:[]},
plotOptions: {
line: {
dataLabels: {enabled: true},
}
},
series: []
},
{
chart:{
type:'bar',
renderTo: 'bar_chart'
},
chartName : 'xyz',
title: {text: ''},
tabHolder : {'id':'bar_chart','heading':'Bar Chart'},
xAxis: {
categories: [],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {text: ''},
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: []
}
]
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule } from 'angular2-highcharts'
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import { AppComponent } from './app.component';
declare var require: any;
export function highchartsFactory() {
return require('highcharts');
}
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
ChartModule,
],
providers: [{
provide: HighchartsStatic,
useFactory: highchartsFactory,
}],
bootstrap: [AppComponent]
})
export class AppModule { }
+3
source to share
1 answer
It looks like angular2-highcharts is just a thin wrapper over Highcharts. The docs show you how to get a basic custom graph.
Template:
<chart [options]="options"
(load)="saveInstance($event.context)">
</chart>
component:
saveInstance(chartInstance) {
this.chart = chartInstance;
}
Since you have an array, you may want to group your initial parameters using the appropriate native chart.
Template:
<div *ngFor="let chart of charts">
<chart [options]="chart.options"
(load)="saveInstance($event.context, chart)">
</chart>
</div>
component:
ngOnInit(): void{
configs.forEach(config => {
//Add charts
this.charts.push({
options: config,
nativeChart: null // To be obtained with saveInstance
});
});
}
saveInstance(chartInstance, chart) {
chart.nativeChart = chartInstance;
}
Then use your own API to add your series and redraw:
ngAfterViewInit(): void {
this.charts.forEach(chart => {
chart.nativeChart.addSeries({
name: "...",
data: [...]
}, true);
});
}
+3
source to share