JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
No logarithms:
<div id="chart_div_1"></div>
With logarithms:
<div id="chart_div_2"></div>
JavaScript
function drawChart () {
var data = google.visualization.arrayToDataTable([
['Name', 'Value'],
['Foo', 980],
['Bar', 5500],
['Baz', 48600]
]);
// set the base to use for the logarithms
var base = 10;
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: 'Value',
calc: function (dt, row) {
var val = dt.getValue(row, 1);
return {v: Math.log(val) / Math.log(base), f: val.toString()};
}
}]);
var noLogGauge = new google.visualization.Gauge(document.getElementById('chart_div_1'));
noLogGauge.draw(data, {
height: 200,
width: 600,
min: 0,
max: 100000
});
var logGauge = new google.visualization.Gauge(document.getElementById('chart_div_2'));
logGauge.draw(view, {
height: 200,
width: 600,
min: 0,
max: 5
});
}
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);