-
Notifications
You must be signed in to change notification settings - Fork 112
Description
Needed Dynamic charts using angular 4 - Observed no such way to make dynamic gauge chart in angular 4.
Code -
-
Component File -
_speedMeter(){
//Speed
this.speedometer = {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
marginRight: 0,
height: 180,
},title: {
text: 'Speed'
},
credits: {
enabled: false
},
pane: {
size: 140,
startAngle: -130,
endAngle: 130,background: [{ backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#FFF'], [1, '#333'] ] }, borderWidth: 0, outerRadius: '100%' }, { backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#333'], [1, '#FFF'] ] }, borderWidth: 1, outerRadius: '100%' }, { // default background }, { backgroundColor: '#DDD', borderWidth: 0, outerRadius: '100%', innerRadius: '100%' }]},
// the value axis
yAxis: {
min: 0,
max: 200,minorTickInterval: 'auto', minorTickWidth: 1, minorTickLength: 10, minorTickPosition: 'inside', minorTickColor: '#666', tickPixelInterval: 30, tickWidth: 2, tickPosition: 'inside', tickLength: 10, tickColor: '#666', labels: { step: 2, rotation: 'auto' }, title: { text: 'km/h', y: 90, verticalAlign: 'bottom' }, plotBands: [{ from: 0, to: 120, color: '#55BF3B' // green }, { from: 120, to: 160, color: '#DDDF0D' // yellow }, { from: 160, to: 200, color: '#DF5353' // red }]},
series: [{
name: 'Speed',
data: [100]
// data: (function () {
// setInterval(function () {
// var point = this.speedometer.series[0].points[0],
// newVal,
// inc = Math.round((Math.random() - 0.5) * 20);// newVal = point.y + inc; // if (newVal < 0 || newVal > 200) { // newVal = point.y - inc; // } // point.update(newVal); // }, 3000); // }()),}]
}
const g = this;setInterval(function () {
// g.speedometer['series'][0].data[0].update(Math.round((Math.random() - 0.5) * 20)) let point = g.speedometer['series'][0].data[0] let newVal: any let inc = Math.round((Math.random() - 0.5) * 20); newVal = point + inc; if (newVal < 0 || newVal > 200) { newVal = point - inc; } console.log('new',newVal) //point.update(newVal); console.log('speed',g.speedometer['series'][0].data[0])}, 2000);
} // end speedometer()_
- Module Code -
// Highcharts
_import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as highchart from 'highcharts';
import * as highchartsHeatmap from 'highcharts/modules/heatmap';
import * as highchartsTreemap from 'highcharts/modules/treemap';
import * as HighchartsDrilldown from 'highcharts/modules/drilldown';
// Service
import { AceDeviceService } from "../device/device.service";
// For loading highcharts
declare let require:any;
export function highchartsFactory() {
const hc = require('highcharts');
const hcm = require('highcharts/highcharts-more');
const exporting = require('highcharts/modules/exporting');
const sg = require('highcharts/modules/solid-gauge');
hcm(hc);
highchartsHeatmap(hc);
highchartsTreemap(hc);
HighchartsDrilldown(hc);
exporting(hc);
sg(hc);
return hc;
}_
Need help. Solution specific to Angular 4 required.