Live Data

Four dashboards, each fed by one long-lived HTTP response: Server-Sent Events. The browser opens the stream with new EventSource(url) and the server keeps writing events into it. Open "How this works" under any panel to see the few lines of code behind it, then build your own.

📈 Labs Exchange

fictional companies

Symbol	Price	Change	High	Low

Click a row: the chart above is itself an API call to /api/v1/img/chart.svg.

How this works

const stream = new EventSource("https://api.scholarstack.cloud/api/v1/stream/stocks");
stream.addEventListener("quotes", (event) => {
  const { quotes } = JSON.parse(event.data);
  for (const q of quotes) console.log(q.symbol, q.price, q.change_percent);
});

🌱 Greenhouse

no alerts

How this works

const stream = new EventSource("https://api.scholarstack.cloud/api/v1/stream/sensors");
stream.addEventListener("readings", (event) => {
  const { readings } = JSON.parse(event.data);
  const alerts = readings.filter(r => r.status !== "ok");
  if (alerts.length) console.warn("Check the greenhouse!", alerts);
});

🏀 Scholar Hoops League

Waiting for games…

How this works

const stream = new EventSource("https://api.scholarstack.cloud/api/v1/stream/scores");
stream.addEventListener("snapshot", (e) => drawAllGames(JSON.parse(e.data).games));
stream.addEventListener("score", (e) => updateOneGame(JSON.parse(e.data)));

🧺 Your sandbox, live

How this works

// Every change to your sandbox is pushed here the moment it happens.
const stream = new EventSource(`https://api.scholarstack.cloud/api/v1/stream/sandbox/${key}`);
stream.addEventListener("todo.created", (e) => console.log("new todo!", JSON.parse(e.data)));