IoT Thermometer project: plot multiple graphs


#1

Hi!
I’m following the IoT Thermometer project found on Hackster.
Following this project, I can plot temperature graph.


How can I plot even humidity graph?
Thanks in advance!

#2

Hi gruppoe,

To plot the humidity graph, you have to send humidity data to the ZerynthApp changing the dict argument of the zapp.event() function:

zapp.event({"temperature":tmp, "humidity":hum}) #line48 of the Hackster example

Then you have to modify the index.html template to handle and plot the humidity data; you can create a new plot variable related to a new HTML <div> Tag and in the on_event function append the temperature data in the first plot and the humidity data in the second plot:

var temp = []  // instead of var data = []
var humid = []

$(document).ready(function () {
    var plot1 = $.plot("#updating-chart1", [ [] ], {
        ...
    });
    var plot2 = $.plot("#updating-chart2", [ [] ], {
        ...
    });

    Z.init({
    ...
    on_event:  function(evt){
        temp.push([temp.length,evt.payload.temperature])
        plot1.setData([temp]);
        plot1.setupGrid()
        plot1.draw();
        humid.push([humid.length,evt.payload.humidity])
        plot2.setData([<span>humid</span>]);
        plot2.setupGrid()
        plot2.draw();
        }
    })
})

Note: The new index.html template must be uploaded again in the ZerynthADM.

Let me know if this can help you :slight_smile:


#3

Thanks a lot!
I’ll try it  :slight_smile:


#4

Hi Matteo,
I’ve just tried your code but it doesn’t work, in fact after I made that change no one graph is plotted.
I think the problem is the string “#updating-chart1” here below (same speech for “#updating-chart2”):

var plot1 = $.plot("#updating-chart1", [ [] ], {
    series: {
        shadowSize: 0   // Drawing is faster without shadows
    },
    yaxis: {
        min: -20,
        max: 60
    },
    xaxis: {
        show: false
    }
});

in fact, if I replace it with “#updating-chart”, at least I can plot the first graph again.
I hope in a your answer, thanks in advance!


#5

Hi gruppoe,
You have to rename the div id for the first chart and create a new one for the second; here the entire code for the index.html file.

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zerynth</title>
<!-- LOAD JQUERY AND BOOTSTRAP -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
 crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
 integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
 crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- LOAD THE ZERYNTH ADM JS LIBRARY -->
<script src="https://api.zerynth.com/zadm/latest/z.js"></script>
<!-- LOAD Flot.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
</head>
<body>
<div style="text-align:center">
 <p id="status" style="background:#ddd;font-weight:bold"></p>
 
 <h1>Plot 1</h1>
 <div id="updating-chart1" style="height:300px"></div>
 
 <span>     <h1>Plot 2</h1></span>
 <div id="updating-chart2" style="height:300px"></div>

</div>
<script>
       var temp = []  
       var humid = []
       $(document).ready(function () {
           var plot1 = $.plot("#updating-chart1", [ [] ], {
               series: {
                   shadowSize: 0   // Drawing is faster without shadows
               },
               yaxis: {
                   min: -20,
                   max: 60
               },
               xaxis: {
                   show: false
               }
           });
           var plot2 = $.plot("#updating-chart2", [ [] ], {
                 series: {
                     shadowSize: 0   // Drawing is faster without shadows
                 },
                 yaxis: {
                     min: 20,
                     max: 99
                 },
                 xaxis: {
                     show: false
                 }
           });
         Z.init({
           on_connected:  function(){$("#status").html("CONNECTED")},
           on_error:  function(){$("#status").html("ERROR")},
           on_disconnected:  function(){$("#status").html("DISCONNECTED"); return true},
           on_online:  function(evt){$("#status").html("ONLINE");},
           on_offline:  function(evt){$("#status").html("OFFLINE");},
           on_event:  function(evt){
             console.log(evt)
             temp.push([temp.length,evt.payload.temperature])
             plot1.setData([temp]);
             plot1.setupGrid()
             plot1.draw();
             humid.push([humid.length,evt.payload.humidity])
             plot2.setData([humid]);
             plot2.setupGrid()
             plot2.draw();
       }
         })
     })     
   </script>
</body>
</html>

keep me posted!