Multiple options for Gauge Charts in Google Charts

Question

I'm using google charts to render a gauge charts for 3 values (inlet pressure, outlet pressure and difference) Example

I'm using this example jsfiddle , but I have an issue that all the 3 gauges have the same options and ranges so I need to make each of them has its options (colors, rangers, ...).

I read that I can make that by making 3 divs (a div for each gauge) but in my case I need the 3 gauges to be in one div as the example.

So, is there a way to pass a multiple options?

Answer 1

it's not possible to pass multiple options...

but you can use css to align the charts and display the same as one,

.gauge {
  display: inline-block;
}

<div id="chart_div">
  <div class="gauge" id="chart_in"></div>
  <div class="gauge" id="chart_out"></div>
  <div class="gauge" id="chart_diff"></div>
</div>

see following working snippet...

 google.charts.load('current', { packages: ['gauge'] }).then(function () { var dataIn = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Inlet', 80] ]); var dataOut = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Outlet', 55] ]); var dataDiff = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Difference', 68] ]); var optionsIn = { width: 133, height: 120, redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5 }; var optionsOut = { width: 134, height: 120, redFrom: 80, redTo: 100, yellowFrom: 65, yellowTo: 80, minorTicks: 5 }; var optionsDiff = { width: 133, height: 120, redFrom: 70, redTo: 100, yellowFrom: 55, yellowTo: 70, minorTicks: 5 }; var chartIn = new google.visualization.Gauge(document.getElementById('chart_in')); var chartOut = new google.visualization.Gauge(document.getElementById('chart_out')); var chartDiff = new google.visualization.Gauge(document.getElementById('chart_diff')); chartIn.draw(dataIn, optionsIn); chartOut.draw(dataOut, optionsOut); chartDiff.draw(dataDiff, optionsDiff); setInterval(function() { dataIn.setValue(0, 1, 40 + Math.round(60 * Math.random())); chartIn.draw(dataIn, optionsIn); }, 13000); setInterval(function() { dataOut.setValue(0, 1, 40 + Math.round(60 * Math.random())); chartOut.draw(dataOut, optionsOut); }, 5000); setInterval(function() { dataDiff.setValue(0, 1, 60 + Math.round(20 * Math.random())); chartDiff.draw(dataDiff, optionsDiff); }, 26000); }); 

 .gauge { display: inline-block; } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"> <div class="gauge" id="chart_in"></div> <div class="gauge" id="chart_out"></div> <div class="gauge" id="chart_diff"></div> </div>