Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

How to make Gauge chart dynamic as speedometer in angular 4 #264

Open
yashjit opened this issue Apr 13, 2018 · 1 comment
Open

How to make Gauge chart dynamic as speedometer in angular 4 #264

yashjit opened this issue Apr 13, 2018 · 1 comment

Comments

@yashjit
Copy link

yashjit commented Apr 13, 2018

Needed Dynamic charts using angular 4 - Observed no such way to make dynamic gauge chart in angular 4.

Code -

  1. 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()_

  1. 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.

@Jrubzjeknf
Copy link

This question is probably more appropriate at the highcharts github or stackoverflow.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants