# Lightweight Java Graph

**URL:** <https://discourse.nodered.org/t/lightweight-java-graph/79005>\
**Category:** Hardware\
**Created:** [7 June 2023 04:16 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005 "2023-06-07T04:16:52Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![allacmc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allacmc/32/73549_2.png) [@allacmc](https://discourse.nodered.org/u/allacmc)\
**Post date:** [7 June 2023 04:16 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/1 "2023-06-07T04:16:52Z")

</div>

I'm developing a product that involves using an ESP32 microcontroller in conjunction with NODE-Red.

Inside the microcontroller there will be an embedded webserver and I would like to place a graphic, but I need a very light, lean graphic that does not have any external links. Because the webserver won't browse the internet.

Any suggestion ?

I don't know if I can post this here in this forum. As you are all beasts... I decided to ask for help.

---

<div class="post-metadata">

**Author:** ![sdrshnptl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sdrshnptl/32/40446_2.png) [@sdrshnptl](https://discourse.nodered.org/u/sdrshnptl)\
**Post date:** [7 June 2023 04:32 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/2 "2023-06-07T04:32:18Z")

</div>

Hello @allacmc ,  
You can use node red and influxdb to store high volume data at millisecond rate and plot on nodered ui graph easily.  
if not this could help you [https://randomnerdtutorials.com/esp32-plot-readings-charts-multiple/](https://randomnerdtutorials.com/esp32-plot-readings-charts-multiple/)  
There may not be storage of data involve. you have to figure it out.

---

<div class="post-metadata">

**Author:** ![allacmc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allacmc/32/73549_2.png) [@allacmc](https://discourse.nodered.org/u/allacmc)\
**Post date:** [7 June 2023 05:19 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/3 "2023-06-07T05:19:13Z")

</div>

I already imagined that posting the doubt here would cause confusion.

So in my case I use ESP32 with an internal webserver.

This ESP32 does not have access to the internet or the network, nor to any server with node-red, nor influx-db.

I can work with good graphics, but they depend on the internet.

But I need something that doesn't depend on the internet and it can't be that huge java code either.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/b/0b44717dd3ec672e74e913c4ed9633f9320cab12.png)

I can make it work fine.

More need something without external references (can not depend on the internet).

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 June 2023 06:41 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/5 "2023-06-07T06:41:53Z")

</div>

Let me ask some clarifying questions.

Do you really mean Java or do you mean JavaScript?

This graph is to be displayed when a user browses to the esp embedded webpage (not the node-red dashboard)?

Apart from the product you are building involves node-red, what does part does node-red have to do with this?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [7 June 2023 08:52 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/6 "2023-06-07T08:52:19Z")

</div>

There are several javascript charting libraries, chart.js for example. A search will find others.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [7 June 2023 08:58 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/7 "2023-06-07T08:58:53Z")

</div>

You can use any chartlibrary that is served via cdn, download and serve it locally.

I use [apexcharts](https://apexcharts.com/javascript-chart-demos/) for these use cases, their [cdn library is here](https://cdn.jsdelivr.net/npm/apexcharts).

Perhaps helpful - [serve the file via SPIFFS](https://techtutorialsx.com/2018/10/04/esp32-http-web-server-serving-external-javascript-file/)

---

<div class="post-metadata">

**Author:** ![allacmc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allacmc/32/73549_2.png) [@allacmc](https://discourse.nodered.org/u/allacmc)\
**Post date:** [7 June 2023 13:04 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/8 "2023-06-07T13:04:15Z")

</div>

But was the library is big kb

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [7 June 2023 13:28 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/9 "2023-06-07T13:28:36Z")

</div>

How much storage does the ESP32 have?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 June 2023 14:51 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/10 "2023-06-07T14:51:56Z")

</div>

chart.js seems to be only 60k in basic form

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [7 June 2023 15:53 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/11 "2023-06-07T15:53:38Z")

</div>

I'm confused. Do you want the chart embedded as an image in the ESP? If so, why? Why not get Node-RED to do the charting? If you don't want it embedded, I'm not sure why you are worried?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [7 June 2023 16:05 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/12 "2023-06-07T16:05:52Z")

</div>

using SPIFFS you should have enough storage.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 June 2023 16:19 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/13 "2023-06-07T16:19:52Z")

</div>

@TotallyInformation - my understanding is that the idea is for the esp to be completely disconnected from internet but be able to serve up charts of locally acquired data - no Node-RED at all in this picture so far - so needs a charting library and web server running locally (as well as data acquisition and storage)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [7 June 2023 16:43 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/14 "2023-06-07T16:43:48Z")

</div>

Ah, I see. So yes, using the ESP's local store would enable the chart JavaScript library to be kept locally and incorporated into the web page.

Another, possibly not quite so nice approach might be the old fashioned way which would be to build the image bitmap manually. Writing yourself some C++ functions to "draw" the axes and points. Would be easiest to avoid drawing lines between the points though I've no doubt someone has created a simple C library to do just that somewhere.

To be honest though, I think that an ESP32 would have more than enough CPU, storage and memory to handle serving up a simple line chart (and being pedantic for a second, this IS a _chart_, not a _graph_ 😉 ).

I generally prefer [uPlot](https://github.com/leeoniya/uPlot) at around 45k but I would agree that [Chart.js](https://www.chartjs.org/) would be decent and is simple to use. Chartist.js is also about the same size as chart.js I think but it is harder to work with.

---

<div class="post-metadata">

**Author:** ![allacmc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allacmc/32/73549_2.png) [@allacmc](https://discourse.nodered.org/u/allacmc)\
**Post date:** [7 June 2023 17:03 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/15 "2023-06-07T17:03:06Z")

</div>

exactly, the ESP32 is completely disconnected from the internet and even so I need to generate the graph. Although I use the Red node I need this esp32 to work completely disconnected.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [7 June 2023 18:38 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/16 "2023-06-07T18:38:01Z")

</div>

You now have the information you need to do this.

---

<div class="post-metadata">

**Author:** ![allacmc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allacmc/32/73549_2.png) [@allacmc](https://discourse.nodered.org/u/allacmc)\
**Post date:** [8 June 2023 02:55 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/17 "2023-06-08T02:55:21Z")

</div>

I would like to thank you for the suggestions.

That were reported in the topic, although this forum is not ESP32 I already knew that the people here are wild enough to take these questions by letter.

I made the decision to search one of the several libraries suggested and upload the js file internally in ESP32.

In this way, it generates the graph completely disconnected from the WEB.

Thanks again to all.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 June 2023 02:55 UTC](https://discourse.nodered.org/t/lightweight-java-graph/79005/18 "2023-06-22T02:55:26Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.