[SOLVED] Multiple options for Gauge Charts in Google Charts

Multiple options for Gauge Charts in Google Charts

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?

Solution

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>