var y in Dynamic-update.htm

55 views

Skip to first unread message

nobody

unread,

Jan 23, 2016, 3:54:40 PM1/23/16

to dygraphs-users

A mobile web server is hosting continually updated temperature data through AJAX commands, temperature.xml and html elements. The system would have a nice look and feel if the data could be continually updated into the dynamic-update.html graph. The javascript for dynamic-update.html is set up within index.htm and runs without any errors, but the data is Math.random() and I would like to substitute the temperature data into the var y. I have been unsuccessful to this point, I have posted to stack overflow but have only received one suggestion.

Concisely, the index.htm is updated from the AJAX command: setTimeout("newAJAXCommand('temperature.xml', updateTemp, true)",500); within index.htm. The function newAJAXCommand is in the file mchp.js and is attached to this inquiry. The AJAX command updates the temperature data through temperature.xml and index.htm updates the text seen on the screen. Any one of the temperature data is updated on the index by the html statement: <div id="temp2" style="display:block;" align="center">Node 2 Temperature: <span id="NodeTemp2">?</span></div> but this statement has not been effective as the right hand side of the var y assingment in the Dygraph script.

What can statement or statements can I assign var y in the Dygraph javascript to reflect the changing temperature data from temperature.xml?

Thank you for your consideration of my problem!

Cy Drollinger

index.htm/dygraphs

<script src="javascript/dygraph-combined1_1_1_dev.js" type="text/javascript"></script>

<script type="text/javascript">
      var data = [];
      var t = new Date();
      for (var i = 10; i >= 0; i--) {
        var x = new Date(t.getTime() - i * 1000);
        data.push([x, Math.random()]);
      }

      var g = new Dygraph(document.getElementById("div_g"), data,
                          {
                            drawPoints: true,
                            showRoller: true,
                            valueRange: [0.0, 1.2],
                            labels: ['Time', 'Random']
                          });
      setInterval(function() {
        var x = new Date(); // current time
        var y = Math.random();
        data.push([x, y]);
        g.updateOptions( { 'file': data } );
      }, 1000);

    </script>

index.htm/Temperature (continually updating)

<script src="javascript/mchp.js" type="text/javascript"></script>

<body onload="newAJAXCommand('status.xml');">
<body onload="newAJAXCommand('temperature.xml');">

<form method="get" action="index.htm" onsubmit="btn=document.getElementById('btnSave'); btn.value='(please wait)'; btn.disabled = true;">


        <div id="alarm1" style="display:block;" > <label>Alarm Temperature 1:</label><input type="text" name="AlarmTemp1" value="~setAlarm(1)~" style="width:65px"/></div>

        <div id="temp2" style="display:block;" align="center">Node 2 Temperature: <span id="NodeTemp2">?</span></div>
           <div id="alarm2" style="display:block;" <label>Alarm Temperature 2:</label><input type="text" name="AlarmTemp2" value="~setAlarm(2)~" style="width:65px"/></div>


        <div id="temp3" style="display:block;" align="center">Node 3 Temperature: <span id="NodeTemp3">?</span></div>
            <div id="alarm3" style="display:block;" <label>Alarm Temperature 3:</label><input type="text" name="AlarmTemp3" value="~setAlarm(3)~" style="width:65px"/></div>


        <div id="temp4" style="display:block;" align="center">Node 4 Temperature: <span id="NodeTemp4">?</span></div>
        <div id="alarm4" style="display:block;" <label>Alarm Temperature 4:</label><input type="text" name="AlarmTemp4" value="~setAlarm(4)~" style="width:65px"/></div>

    <div><input id="btnsave" type="submit" class="sm" value="save"/></div>
</form>

setTimeout("newAJAXCommand('status.xml', updateStatus, true)",500);
setTimeout("newAJAXCommand('temperature.xml', updateTemp, true)",500);

Temperature.xml

<?xml version="1.0" encoding="utf-8"?>
<response>
<NodeTemp1>~NodeTemp(1)~</NodeTemp1>
<NodeTemp2>~NodeTemp(2)~</NodeTemp2>
<NodeTemp3>~NodeTemp(3)~</NodeTemp3>
<NodeTemp4>~NodeTemp(4)~</NodeTemp4>
</response>