Formatting Google Gauges

Projects Programming
1

I am using an Nodemcu 12E development board and using the Arduino IDE.

And I'm almost too embarrassed to ask this simple question. I have found quite a bit of code on how to use Google gauges and can get them to run on a simple webpage.

But I would like to display 12 gauges on one webpage.
But when I tried to do this the gauges are vertically displayed.

I would like them to fit into a table 1 gauge per box, or if that's not possible just to fill the webpage horizontally.

I have done a lot of trawling through Google and other sources of information, and there is a lot of information on displaying Google charts/gauges, but I cannot find much information on formatting. I am including the code below.

If I could request any help or pointers I would truly appreciate it.
Thank you in advance for sparing the time.

In he block of code below I have stripped out all the formatting that I was attempting as it didn't work anyway and made it almost impossible to see the wood from the trees. And I'm only displaying three gauges not the full nine.

void GetGaugeP(){
  webpage += "<script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>";
  webpage += F("<script type=\"text/javascript\">");
  webpage += F("google.charts.load('current',{packages: ['gauge']});");
  webpage += F("google.charts.setOnLoadCallback(drawgaugetemp);");
  webpage += "var temp=" + String(temp,2)+";";
  webpage += F("var gaugetempOptions={min:-10,max:50,yellowFrom:-10,yellowTo:0,greenFrom:0,greenTo:30,redFrom:30,redTo:50,minorTicks:10,majorTicks:['-10','0','10','20','30','40','50']};");
  webpage += F("var gaugetemp;");
  webpage += F("function drawgaugetemp() {gaugetempData = new google.visualization.DataTable();");
  webpage += F("gaugetempData.addColumn('number','deg-C');"); // 176 is Deg-symbol, there are problems displaying the deg-symbol in google charts
  webpage += F("gaugetempData.addRows(3);gaugetempData.setCell(0,0,temp);");
  
  webpage += F("gaugetemp = new google.visualization.Gauge(document.getElementById('gaugetemp_div'));");
  webpage += F("gaugetemp.draw(gaugetempData, gaugetempOptions);}");


  webpage += F("</script>");
  webpage += F("<div id='gaugetemp_div' style='width:200px;height:200px;'></div>");
 
}

Thank you again for any suggestions that you may kindly give me.

2

I would like them to fit into a table 1 gauge per box, or if that's not possible just to fill the webpage horizontally.

This is a question about using tables in HTML rather than an Arduino question. Have you tried putting the data in an HTML table, all on one row with one column per gauge ?

3

Hi thanks for the reply

Yes I did try but all the gauges stay in 1 cell and go down the page, and not across the page.
when I say table that was a way I thought of formatting the lay out.
any way of getting the gauges to go across the page will help.

4

all the gauges stay in 1 cell and go down the page

Please post the code that you tried.

5

Well I do a bit and see if it works, if not delete and try again.
but I do use this site to help me:

Again you can play about on this site until it looks OK then I code it and try again.

But still will not work with gauge's

6

You might be able to do it with flexboxes.

By the way, it's much, much easier to save the HTML files in the ESP's SPIFFS, instead of having inline Strings in your code.
Take a look at this guide.

Pieter