How to print google pointer bottom label outside guage?

Question

I am trying to print the bottom label of Google sensors on the outside (just below the corresponding sensors). In addition, I want to provide two different suffixes for two sensors. I tried to provide separate formatting (formatter1, formatter2) for both and separate data (data1 and data2), but did not even draw gauges (without errors). In this case, draw_data_guage will have a fourth argument.

 var e = document.getElementById('draw_chart'); e.onclick = draw_data_gauge(80, 68, '%'); function draw_data_gauge(cpu_data, memory_data, suffix) { console.log("in guage") google.charts.load('current', { 'packages': ['gauge'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data1 = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['CPU', cpu_data], ['Memory', memory_data], ]); var options = { width: 500, height: 150, redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5, }; var formatter1 = new google.visualization.NumberFormat({ suffix: suffix, }); formatter1.format(data1, 1); var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data1, options); } } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <input name="Button" type="button" value="Draw" id="draw_chart" /> <div id="chart_div"></div> 

I want the bottom label of the sensor to be displayed outside and able to give separate suffixes for both sensors. Consider the jsfiddle link. I want to display percentages (bottom label) outside the sensors just below them. My jsfiddle link is here . Thanks in advance.

Answer 1

Your direction for separating graphs is correct. Here's how to do it:

 div { display: inline-block; } 

 <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type="text/javascript"> google.load('visualization', '1', { packages: ['gauge'] }); google.setOnLoadCallback(drawChart); function drawChart() { var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5 }; var source = [{ data: ['Memory', 80], suffix: '%' }, { data: ['CPU', 55], suffix: '?' }, { data: ['Network', 68], suffix: '$' }, ]; source.map((item, index) => { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], item.data ]); var formatter = new google.visualization.NumberFormat({ suffix: item.suffix, fractionDigits: 0 }); formatter.format(data, 1); document.body.innerHTML += '<div id="chart_div_' + index + '"></div>'; var chart = new google.visualization.Gauge(document.getElementById('chart_div_' + index)); chart.draw(data, options); }); // dynamic update, randomly assign new values and redraw //setInterval(function() { // data.setValue(0, 1, 40 + Math.round(60 * Math.random())); // formatter.format(data, 1); // chart.draw(data, options); //}, 1000); // //setInterval(function() { // data.setValue(1, 1, 40 + Math.round(60 * Math.random())); // chart.draw(data, options); //}, 1000); // //setInterval(function() { // data.setValue(2, 1, 40 + Math.round(60 * Math.random())); // chart.draw(data, options); //}, 1000); } </script> 

On the position of the text, I think it is impossible. You can add a div under each chart with text.