Raspberry Pi python website with plotly graph updates
<p>I am currently working on a project from home where I have a network of Arduino's sending data (temp humidity etc.) to a raspberry pi.  I want to make the rasp take the data and using plotly make a variety of graphs and then embed said graphs into a website that automatically updates at a set interval.  I already have the network up and running I am just stuck on how to get the graphs on to a HTML page and have it update.  I was considering just running a Python script that makes a webpage and re-write it with the new graphs every time.  This seems highly inefficient so I was wondering if there was a better way of doing it?</p>

<p>Some time ago I had a very similar problem. A very simple solution was to use Python3's <code>http.server</code> to return a <code>JSON</code> with a time stamp and the temperature.</p>

<pre><code># !/usr/bin/env python3
from http.server import HTTPServer, BaseHTTPRequestHandler
import random
import json
import time

def send_header(BaseHTTPRequestHandler):
    BaseHTTPRequestHandler.send_response(200)
    BaseHTTPRequestHandler.send_header('Access-Control-Allow-Origin', '*')
    BaseHTTPRequestHandler.send_header('Content-type:', 'application/json')
    BaseHTTPRequestHandler.end_headers()


class MyRequestHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        # returns the temperature
        if self.path == '/temperature':
            send_header(self)
            self.wfile.write(bytes(json.dumps({'time': time.strftime('%H:%M:%S', time.gmtime()), 'temperature': random.randint(0, 100)}), 'utf-8'))

if __name__ == '__main__':
    # start server
    server = HTTPServer(('', 8099), MyRequestHandler)
    server.serve_forever()
</code></pre>

<p>The data is then received via simple vanilla <code>JavaScript</code> and put into <code>plotly</code>. Every 1000 ms a request is sent to the server and the graph is updated accordingly.</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            var temperatures;
            var temperatures_x = [];
            var temperatures_y = [];
            var server_url = "";

            //basic request handler
            function createRequest() {
                var result = null;
                if (window.XMLHttpRequest) {
                    // FireFox, Safari, etc.
                    result = new XMLHttpRequest();
                    if (typeof result.overrideMimeType != "undefined") {
                        result.overrideMimeType("text/xml"); // Or anything else
                    }
                } else if (window.ActiveXObject) {
                    // MSIE
                    result = new ActiveXObject("Microsoft.XMLHTTP");
                }
                return result;
            }
            //gets the temperature from the Python3 server
            function update_temperatures() {
                var req = createRequest();
                req.onreadystatechange = function () {
                    if (req.readyState !== 4) {
                        return;
                    }
                    temperatures = JSON.parse(req.responseText);
                    return;
                };
                req.open("GET", server_url + "/temperature", true);
                req.send();
                return;
            }

            //updates the graph
            function update_graph() {
                update_temperatures();
                temperatures_x.push(temperatures.time)
                temperatures_y.push(temperatures.temperature)
                Plotly.newPlot('graph_t', [{x: temperatures_x, y: temperatures_y}]);
            }

            //initializes everything
            window.onload = function () {
                document.getElementById("url").onchange = function () {
                    server_url = document.getElementById("url").value;
                };
                server_url = document.getElementById("url").value;
                //timer for updating the functions
                var t_cpu = setInterval(update_graph, 1000);
            };

        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;li&gt;
            URL and port&lt;input type="text" id="url" value="http://localhost:8099"&gt;
        &lt;/li&gt;
        &lt;div class="plotly_graph" id="graph_t"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

python html website plotly raspberry-pi3