Skip to content
New issue

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

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

Already on GitHub? Sign in 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.

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

No branches or pull requests

2 participants