Live Chart Html

HTML / CSS / JS Open Kit Simulator ↗ All recipes

About this recipe

Libraries / imports

No imports detected

Hardware / pins

No physical pins or components referenced

Key API calls

document.getElementById() setInterval()

How to run

Press Render preview — renders live in a sandboxed iframe with mocked /api/*.

Editor html edits auto-save

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Live Chart</title>
<style>body{margin:0;padding:24px;font-family:system-ui;background:#0b1220;color:#f1f5f9}canvas{background:#1e293b;border-radius:12px;display:block;max-width:100%}</style>
</head><body>
<h2>Live Temperature</h2>
<canvas id="c" width="700" height="260"></canvas>
<script>
const c = document.getElementById('c'), ctx = c.getContext('2d');
const data = [];
function draw(){
  ctx.fillStyle='#1e293b'; ctx.fillRect(0,0,c.width,c.height);
  if (data.length < 2) return;
  const min = Math.min(...data), max = Math.max(...data), r = max - min || 1;
  ctx.strokeStyle='#0ea5e9'; ctx.lineWidth=2; ctx.beginPath();
  data.forEach((v,i) => {
    const x = (i/(data.length-1)) * (c.width-20) + 10;
    const y = c.height - ((v-min)/r) * (c.height-40) - 20;
    if (i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
  });
  ctx.stroke();
  ctx.fillStyle='#7dd3fc'; ctx.font='12px system-ui';
  ctx.fillText(data[data.length-1].toFixed(1) + '°C', c.width-70, 20);
}
setInterval(() => {
  data.push(22 + Math.sin(Date.now()/3000) * 3 + Math.random());
  if (data.length > 60) data.shift();
  draw();
}, 500);
</script></body></html>

Output ready

Output will appear here after you click Run.

About this recipe

Libraries / imports

Hardware / pins

Key API calls

How to run

We use cookies to make DIY KIT work.