What do I need to do to have my Raspberry Pi host a webpage with dials indicating CPU temperature, CPU load, etc., in real time?

I am good with Unix commands and scripting, but I have nearly no web experience. I have a script that grabs metrics I’m interested in, like CPU load or system temp and updates a file every 10 seconds. I would like to point my iPad to a local website hosted by my Raspberry Pi, that has a real-time updating graphical representation of this data.

I’ve worked before setting up a simple Apache web server, and I can write HTML and JavaScript. Besides that, I am lost and need someone to point me in the right direction.

I use Grafana with InfluxDB for this on my Raspberry Pi 3. They are both relatively easy to setup and connect to each other. They even work well in Docker containers on the Raspberry Pi.

I stream all my updates into InfluxDB as they are generated. Then Grafana does all the graphical work of displaying them in a nice visual format. I designed a simple dashboard just for my old iPad with its smaller screen.

It does sound like a lot of installing and overhead, but it sure does look pretty.

For having a lightweight and very easy web monitoring dashboard to setup (and extend) monitoring page on your Raspberry you have got RPi Monitor.

It comes with some defaults and the configuration is mostly editing a couple of simple text files. I configured it easily to add humidity graphs from a DTH21.

For realtime applications on the web the best tool is WebSocket. Usually these are implemented in the application server, not the web server, but Apache provides a way to proxy websockets. This could easily provide per second or subsecond updates.

Which library you use on the application server depends on what web platform you want to use, but for example a popular one for Node.js is Socket.IO.

On the client side you can set up a connection like this:

socket = new WebSocket("ws://website.net:8282");

socket.addEventListener('message', function (event) {
    var message = event.data;
    // Code to update site
});

On the server side with Node.js using the basic WebSocket library:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8282 });
wss.on('connection', function connection(ws) {
  dataOnUpdateEvent(function(event) {
    var data = event.getdata();
    var message = parseData(data);
    ws.send(message);
  });
});