Time Series Chart Html | Html Time Series Graph | Time Series Chart Code | How To Make Html Chart | Charting Time Series Html | Html Time Series Display | Create Time Series In Html | Time Series Using Html | Chartjs Line Chart | Chartjs Lines | Line Charts In Chartjs | Chartjs Line Graph | How To Make A Line Chart With Chartjs | Chartjs Line Tutorial | Creating Line Charts Using Chartjs | Chartjs For Line Graphs | Live Chart Cdn | Cdn For Live Charts | Can I Use Live Chart Cdn | How To Access Live Chart Cdn | Live Chart Cdn Availability | Using Live Chart Cdn | What's A Live Chart Cdn | Chart Js Sensor Dashboard | Chartjs Sensor Dashboard? | Sensor Data On Chartjs | Dashboard With Chartjs Sensors | Chart.js For Sensor Info | Make Sensor Dashboard Chartjs | Sensor Chart Dashboard | Chartjs Sensor Display Board

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>Sensor Chart</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
  <style>body{font-family:system-ui;padding:24px;background:#0b1220;color:#f1f5f9}canvas{background:#1e293b;border-radius:12px}</style>
</head>
<body>
<h2>Live temperature</h2>
<canvas id="chart" width="700" height="280"></canvas>
<script>
const ctx = document.getElementById('chart').getContext('2d');
const data = { labels: [], datasets: [{
  label: 'Temp (C)', data: [],
  borderColor: '#0ea5e9', tension: 0.3, fill: true,
  backgroundColor: 'rgba(14,165,233,0.18)'
}]};
const chart = new Chart(ctx, { type: 'line', data, options: { animation: false,
  scales: { x: { ticks: { color: '#94a3b8' } }, y: { ticks: { color: '#94a3b8' } } },
  plugins: { legend: { labels: { color: '#f1f5f9' } } }
}});
setInterval(() => {
  const t = new Date().toLocaleTimeString();
  const v = 22 + Math.sin(Date.now()/3000)*2 + Math.random()*0.5;
  data.labels.push(t); data.datasets[0].data.push(v);
  if (data.labels.length > 30) { data.labels.shift(); data.datasets[0].data.shift(); }
  chart.update();
}, 1000);
</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.