An archive of community.esquilo.io as of Saturday January 26, 2019.

Creating Charts with data from Esquilo on Web Page

gary.vandergaast

I am looking to add charts on my web page to track the values generated by my Esquilo (temperature sensor attached) in real time. My system is working well, but for now it simply publishes the data value to a text box. I have been investigating some Java Script charting options, but have not found anything that shows explicitly how to get new data from the Esquilo into a chart on the web page. For example, would I use the NUT program to create a data file or would it be better to do it in a Java script? Any suggestions or, better yet, example projects doing this kind of thing would be appreciated.
Thanks.

pjackson

We usually do this with a client-side JavaScript library. This demo is a good example:

https://github.com/esquiloio/lib/tree/master/demos/imu

That one uses the Flot lib, but you should be able to use any client-side JS one.

sevej

I've had good success with Google Charts (see https://developers.google.com/chart/).

Here is a summary of how it works:
1. A webserver generates a webpage containing the data wrapped in Google-specific javascript that detail the type of chart requested. I do this on an Raspberry Pi with PHP code that iterates over the data selected from a MySQL database. Here, the Esquilo would act as the webserver with nut code iterating over the data set

.
2. The javascript is executed on the client
3. As part of the execution of the Google-specific javascript functions, the embedded data is sent to Google
4. Google returns the chart graphic that is displayed in a div tag

Some of the features I've used include:
1. Multiple data series
2. Multiple vertical axes
3. Customizable mouse-over tooltips
4. Dynamic crosshairs

An example Curve Chart is attached.

Steve