Highcharts Angular dynamic update
I want to update my Highcharts gauge with a value from my Observable subscription below, but I can't figure out how to feed the series: data: [] value. I've looked at highchart examples but they all have static data in them. I cannot find any clear Angular documentation or a good Angular example to learn from. I'd appreciate any help. Here's my ts file source code:
import { Component, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core';
import { AuthService } from '../../../../services/auth.service';
import { TempsService } from '../../../shared/temps.service';
import { Temps } from '../../../shared/temps.model';
import More from 'highcharts/highcharts-more';
import { chart } from 'highcharts';
import * as Highcharts from 'highcharts';
More(Highcharts);
@Component({
selector: 'app-gauge',
styleUrls: [ './gauge.component.css'],
templateUrl: './gauge.component.html'
})
export class GaugeComponent implements AfterViewInit, OnInit {
private controller: string;
TT: number;
@ViewChild('container', { read: ElementRef }) container: ElementRef;
constructor(private tempsService: TempsService, public authService: AuthService) { }
ngOnInit() {
this.authService.isLoginSubject.subscribe((photon) => {
console.log(photon + ' is registered controller in gauge.component');
this.controller = photon;
});
}
ngAfterViewInit() {
this.tempsService.getGaugeTemps(this.controller);
if (this.tempsService.currentSubjectTT != null) {
this.tempsService.currentSubjectTT.subscribe((tt) => {
console.log('Target Temp is: ' + tt);
this.TT = tt;
// I WANT TO UPDATE THE GAUGE HERE...WITH THE VALUE IN this.TT
});
}
Highcharts.chart(this.container.nativeElement, {
credits: {enabled: false},
plotOptions: {
gauge: {
dataLabels: {
padding: 80,
borderWidth: 0,
style: {
fontSize: '30px'
}
}
}
},
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
margin: [0, 0, 0, 0],
spacingTop: 0,
},
title: {
text: null
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 500,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 15,
tickColor: '#666',
labels: {
step: 4,
rotation: 'auto'
},
title: {
text: 'F°'
},
plotBands: [{
from: 0,
to: 150,
color: '#C0C0C0' // gray
}, {
from: 151,
to: 225,
color: '#55BF3B' // green
}, {
from: 226,
to: 300,
color: '#DDDF0D' // yellow
}, {
from: 301,
to: 500,
color: '#DF5353' // red
}]
},
series: [{
name: 'Grill',
data: [0],
tooltip: {
valueSuffix: ' F°'
}
}]
});
}
}
Answer
Get reference to chart object
chart = Highcharts.chart(... someconfig);
When you get data from server just update series and redraw the chart
chart.series[0].update({
pointStart: newSeries[0].pointStart,
data: newSeries[0].data
}, true); //true / false to redraw
or
updateData() {
chart.series[0].setData([100]);
}
Update For angular
Package.json
in package.json added below dependencies
"dependencies": {
"highcharts": "^6.0.3", //if you are using angular6
"@types/node": "^10.1.3"
}
HTML
<div #chart></div>
<button (click)="setGuageValue(100)">Set value to 100</button>
<button (click)="setGuageValue(160)">Set value to 160</button>
Component
we need to include below from highchart
// tslint:disable-next-line:no-var-requires
const Highcharts = require('highcharts/highstock');
// tslint:disable-next-line:no-var-requires
require('highcharts/highmaps');
require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);
require('highcharts/highcharts-more')(Highcharts);
export class ChartComponent implements AfterViewInit {
@ViewChild('chart') public chartElement: ElementRef;
private chart;
configuration = {
credits: {enabled: false},
plotOptions: {
gauge: {
dataLabels: {
padding: 80,
borderWidth: 0,
style: {
fontSize: '30px'
}
}
}
},
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
margin: [0, 0, 0, 0],
spacingTop: 0,
},
title: {
text: null
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 500,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 15,
tickColor: '#666',
labels: {
step: 4,
rotation: 'auto'
},
title: {
text: 'F°'
},
plotBands: [{
from: 0,
to: 150,
color: '#C0C0C0' // gray
}, {
from: 151,
to: 225,
color: '#55BF3B' // green
}, {
from: 226,
to: 300,
color: '#DDDF0D' // yellow
}, {
from: 301,
to: 500,
color: '#DF5353' // red
}]
},
series: [{
name: 'Grill',
data: [0],
tooltip: {
valueSuffix: ' F°'
}
}]
};
ngAfterViewInit(): void {
this.highchartsShow();
}
highchartsShow() {
this.configuration.chart['renderTo'] = this.chartElement.nativeElement;
this.chart = Highcharts.chart(this.configuration);
}
setGuageValue(value: number) {
this.chart.series[0].setData([value]);
}
}
to use require in typescript code add types and typeRoots in tsconfig.app.json
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"types": ["node"],
"typeRoots": [
"node_modules/@types"
]
},