javascript - Google Charts Gauge - Stack Overflow

admin管理员组

文章数量:1405193

Most charting gauges seem to only support a starting value (min) of 0.

We have a need for the starting value to be the max and end value to be min so that the needle is maxed out for the lowest value.

E.g. Think of the gauge as a ranking of top 20 developers the example below you were rated number 3.

google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Rank', 20 - 3]
  ]);
  var options = {
    width: 250,
    height: 250,
    redFrom: 0,
    redTo: 10,
    yellowFrom: 10,
    yellowTo: 15,
    greenFrom: 15,
    greenTo: 20,
    minorTicks: 20,
    max: 20,
    min: 0,
    majorTicks: ['20', '1']
  };

  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
  chart.draw(data, options);

}

<script type="text/javascript" src="={'modules':[{'name':'visualization','version':'1.1','packages':['gauge']}]}"></script>

<div id="chart_div" style="width: 400px; height: 400px;"></div>

Most charting gauges seem to only support a starting value (min) of 0.

We have a need for the starting value to be the max and end value to be min so that the needle is maxed out for the lowest value.

E.g. Think of the gauge as a ranking of top 20 developers the example below you were rated number 3.

google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Rank', 20 - 3]
  ]);
  var options = {
    width: 250,
    height: 250,
    redFrom: 0,
    redTo: 10,
    yellowFrom: 10,
    yellowTo: 15,
    greenFrom: 15,
    greenTo: 20,
    minorTicks: 20,
    max: 20,
    min: 0,
    majorTicks: ['20', '1']
  };

  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
  chart.draw(data, options);

}

<script type="text/javascript" src="https://www.google./jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['gauge']}]}"></script>

<div id="chart_div" style="width: 400px; height: 400px;"></div>

But the problem is since the gauge really does not support this I kinda hacked it to work they way I wanted. Everything works great except for 1 thing. You will notice the value says 17 at the bottom because of this hack:

['Rank', 20-3]

Can I write a line of jquery to replace this value in the svg results?

Any help would be appreciated.

• javascript
• jquery
• svg
• charts
• google-visualization

Share Improve this question Follow edited Oct 19, 2015 at 3:21 Tushar 87.3k2121 gold badges163163 silver badges181181 bronze badges asked Oct 19, 2015 at 3:17 CarntelCarntel 42911 gold badge44 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Change options and data:

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Rank', 3]
]);

var options = {
width: 250,
height: 250,
redFrom: 20,
redTo: 10,
yellowFrom: 10,
yellowTo: 5,
greenFrom: 5,
greenTo: 0,
minorTicks: 20,
max: 0,
min: 20,
majorTicks: ['20', '1']
  };

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);

}

https://jsfiddle/mblenton/xasppevj/

本文标签： javascriptGoogle Charts GaugeStack Overflow