CODEWITHSUNDEEP
javascriptangulargoogle-visualization
Mohammad Nasir
Mohammad Nasir

Reputation: 77

How to change the needle color of gauge chart of angular-google-charts?

I want to change the needle color of gauge chart. enter image description here I am using the following code to produce this gauge chart

@ViewChild('googlechart', {static: true})
  googlechart: GoogleChartComponent;
  public gaugeChart: { type: string; data: (string | { v: number; f: string })[][]; options: { width: number; height: number; greenFrom: number; greenTo: number; redFrom: number; redTo: number; yellowFrom: number; yellowTo: number; minorTicks: number; majorTicks: string[] } } = {
    type: 'Gauge',
    data: [
      ['Water', {v: 78, f: '78%'}]
    ],
    options: {
      width: 500,
      height: 500,
      greenFrom: 50,
      greenTo: 100,
      redFrom: 0,
      redTo: 20,
      yellowFrom: 20,
      yellowTo: 50,
      minorTicks: 10,
      majorTicks: ['0%', '100%']
    }
  };

Here needle color is red. I want to make it blue or green. How can I do it?

Upvotes: 0

Views: 1497

Answers (1)

Masum
Masum

Reputation: 11

Suppose we r going to show plan vs actual data from SQL database by using PHP Here $total_act is the actual value from SQL chart_div is my HTML div ID

google.charts.load('current', {'packages': ['gauge']}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['TOTAL', {v: <?php print_r($total_act); ?>, f: '<?php print_r($total_act_lastday); ?>'} ],
  ]);


  var options = {
    width: screen.width, height: 200, greenFrom:20000, greenTo:40000, redFrom: 0, redTo:20000, minorTicks: 0, max:40000,min:0,majorTicks: ['0%', '', '', '', '100%'],
  };


  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Gauge(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('circle'), function(circle) {
      if (circle.getAttribute('fill') === '#4684ee') {
        circle.setAttribute('fill', '#000000');
      }
    });
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
      if (path.getAttribute('stroke') === '#c63310') {
        path.setAttribute('stroke', '#000000');
        path.setAttribute('fill', '#000000');
      }
    });
  });

  chart.draw(data, options);
});

Note : circle.setAttribute is for change round ball color path.setAttribute is for change needle color

Upvotes: 1

Related Questions