frame

IoT Thermometer project: plot multiple graphs

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!

Comments

  • 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([humid]);
    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 :)
    Matteo Cipriani
    Zerynth Support Team
  • gruppoe Member
    Thanks a lot!
    I'll try it  :)
  • gruppoe Member
    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!

  • 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>
         
         <h1>Plot 2</h1>
         <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!

    Matteo Cipriani
    Zerynth Support Team
Sign In or Register to comment.

ZERYNTH Community

@ 2016 Zerynth.com, all rights reserved.