In this we demonstrate how we can update a graph with data from the server
The webb-browser must be able to show SVG files and have web-sockets implemented.
01: //----------------------------------------------------------------------
02: // storage-load-svg.js
03: //----------------------------------------------------------------------
04:
05: var w = 900;
06: var h = 550;
07:
08: $("#svg-picture").empty();
09:
10: var svg_name = "svg/barn.svg";
11:
12: var svg_img = d3.select("#svg-picture").append("svg").attr("width", w).attr("height", h);
13:
14: d3.xml(svg_name, "image/svg-xml", function(xml)
15: {
16:
17: var svgNode = xml.getElementsByTagName("svg")[0];
18: svg_img.node().appendChild(svgNode);
19:
20: innerSVG = svg_img.select("svg");
21:
22: // This works
23: innerSVG.select("#GT-7").select("tspan").html("Waiting");
24: d3.select("#GT-1").select("tspan").html("Waiting");
25:
26: });
27:
28: // This does not work why??
29: d3.select("#GT-3").select("tspan").html("Dont work");
30:
31: // This does not work why?????
32: innerSVG.select("#GT-2").select("tspan").html("Don't work");
33:
34:
01: <?php
02: //----------------------------------------------------------------------
03: //
04: // storage-info-update.php
05: // http://enterprisewebbook.com/ch8_websockets.html
06: //----------------------------------------------------------------------
07:
08: //
09: // We need a different kind of program not run by the server?
10: //
11:
12: header('Content-Type: text/event-stream');
13: header('Cache-Control: no-cache');
14:
15:
16: // Try not to buffer output from server
17: // ob_end_flush();
18:
19: // openlog("myScriptLog", LOG_PID | LOG_PERROR, LOG_LOCAL0);
20: // syslog(LOG_WARNING, "demo $counter");
21: // closelog();
22:
23: function send_message()
24: {
25:
26: // Be careful here. Every blank and newline counts!!
27: echo "data: <?xml version='1.0' encoding='utf-8'?>" .
28: "<html><body>" .
29: "<temp-gt-1>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-1>" .
30: "<temp-gt-2>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-2>" .
31: "<temp-gt-3>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-3>" .
32: "<temp-gt-4>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-4>" .
33: "<temp-gt-5>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-5>" .
34: "<temp-gt-6>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-6>" .
35: "<temp-gt-7>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-7>" .
36: "<temp-gt-8>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-8>" .
37: "<temp-gt-9>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-9>" .
38: "</body></html>\n\n";
39:
40: flush();
41:
42: }
43:
44: $started_at = time();
45: do
46: {
47: if(time() - $started_at > 600)
48: {
49: die();
50: }
51:
52: send_message();
53: usleep(100000);
54:
55: } while (true);
56:
57: //----------------------------------------------------------------------
58: // EOF
59: //----------------------------------------------------------------------
60: ?>
61: