Simple graph on YUN

Official Hardware Classic Yún
1

Hi,

I would like to show temperature value with sketch TemperaturewebPanel in simple line graph for the 5 measurements.
Does anyone have suggest.

Franc

2

I think you can do it creating an external html page (placed in /var/www) that call your TemperaturewebPanel script.
How is your experience with javascript/html?

This is a way to do it:
1 - change the script TemperatureWebPanel , so it give back not an html page but a JSON or XML
2 - create an html/js page on /var/www/ that:

  • do a HTTP Get to the page at point 1
  • parse the xml/json at point1 and plot the result on the page with a javascript chart library

Some of them:

it should works

3

Thanks for the reply dega1999.
My knowledge is poor for javascript/html.
Can you be more specific.

Franc

4

I will post an example tomorrow morning, if none else will reply early :wink:

5

Hi,

i have a similar setup (but only 2 sensor values) and i used "Highcharts". its a jquery library, and they have plenty of examples on theyr site to learn from.

i just put all the data in a txt file (1 line per minute) and then my website reads the textfile and makes the data usable for the graph. (parsed in jquery, but actually i just modified an example from theyr site a little bit to fit my data)

if you browse this forum, i made a thread about some minor issue i had with it, and attached a screenshot of the site.

6

One easy approach is to store your temp value in a file at the location "/www/sd" (which is shortcut to "/sd/your_project/www") and read this file from a html page using jQuery / JSON to parse.
Or you could make your html page poll for new data using the REST-API of Yun, like I did.
Anyway in both solution you have to make an html page with a little JavaScript and get familiar with jQuery.

BTW: for graphs I use foot.js: http://www.flotcharts.org

7

this is my solution.. the previous solution are better ..but meanwhile I've produced something.. so... this is what I did :.
I Changed the temperature web panel example:
1 - I've added this at the beginning:
float lastTemp[5];
to save the last 5 temperature
2 - Replaced this part
client.print("Current time on the Yun: ");
client.println(timeString);
client.print("
Current temperature: ");
client.print(temperature);
client.print(" degrees C");
client.print("
This sketch has been running since ");
client.print(startString);
client.print("
Hits so far: ");
client.print(hits);
with this one:
lastTemp[hits%5] = temperature;
for(int i=0;i<5;i++){
client.print(lastTemp*);*

  • client.print(";");*
  • }*
  • client.println(timeString+";"+startString+";"+hits+";");*
    So the page from arduino now it retuns all the data plus the last 5 temperature read.
    3 - I've replaced the files in /arduino/www/TemperatureWebPanel with the ones attached with this post: it uses jquery and jflot
    The result is this page: http://postimg.org/image/5bfsc460f/ (Screenshot)
    TemperaturePlot.zip (84.5 KB)
8

Nice! 8)

9

It works perfectly!
Thank you dega9999 and all the others.
That's what I was looking for.

I have a question?
I would like to send text file (*. txt) from SD card on the host server.

Franc