ESP8266 (Web Server...
 
Notifications
Clear all

ESP8266 (Web Server - Part 5): how to use Google Charts to display gauges and charts


christophe
Posts: 253
Admin
Topic starter
(@chris)
Member
Joined: 5 years ago
wpf-cross-image

Now that we have a records we will add graphics to the Web interface of the ESP8266 using the Google Charts library. There are many libraries to create graphics and gauges in Javascript / HTML5. Google Charts is a very rich library that offers 28 different models (line, gauge, horizontal or vertical histogram, glove, pie,…

5 Replies
ca7bcdad0163421a4e39b842921ed863?s=80&d=mm&r=g
Posts: 2
 francesco maviglia
Guest
(@francesco maviglia)
Joined: 4 years ago

Great project, thank you very much. I have tried with wemos d1, and it worked immediately, even by modifying a little bit the code to use different sensors. I have anyway the issue that once the 7 hours are reached the graphs stop being updated, and the remain alwyas the same. I would immagine that they are meant to scroll as the time pgoes by, maybe even forgetting the past data. Does it work like this for you?
Thank you

Reply
3 Replies
christopher 1
 Projets DIY
Guest
(@Projets DIY)
Joined: 6 years ago

Posts: 207

Hello Francesco and thank you very much. No, I did not encounter this problem during the developments. Maybe it's a problem rated internet browser. You tried to close the page and open a new one?

Reply
ca7bcdad0163421a4e39b842921ed863?s=80&d=mm&r=g
 francesco maviglia
Guest
(@francesco maviglia)
Joined: 4 years ago

Posts: 2

Thank you. What I suspect is that the Json command remove was somehow missbehaving. I rolled back the library to the version that you showe in the tutorial 4 and now the graph seems to work fine (I will test the stability during the next few days). I will now train myself in changing the graph type and parameters (i.e. the duration increased to 24h), and see how it goes.

Reply
christopher 1
 Projets DIY
Guest
(@Projets DIY)
Joined: 6 years ago

Posts: 207

Perfect. thank you very much for your feedback.

Reply
fc8d0381fec87f07877c29c556cf05ff?s=80&d=mm&r=g
Posts: 1
 I B
Guest
(@I B)
Joined: 9 months ago

Nice work, I learned a lot of new things today like bootstrap, pub to html, how to use google charts, limitations of using google chart as offline etc.
But the software has one big problem. No history of data is preserved after reboot. The problem is in this code
std::unique_ptr<char[]> buf (new char[size]);
file.readBytes(buf.get(), size);
JsonObject& root = jsonBuffer.parseObject(buf.get());

from loadHistory() function. After file.close() at the end at the function root object is empty. Why? i don't know. I was using version 5 of the ArduinJson library, maybe if I will change code to be compatible with version 6 problem will solve.

Thank's for sharing, If you could give me a clue I will be happy to share results.

Reply
Share:
Join Us!
Recent Posts
Last Articles
DIY Projects
DIY Projects