{"spec_id":"line-timeseries-rolling","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// line-timeseries-rolling: Time Series with Rolling Average Overlay\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic fixed-seed LCG) ------------------------\n// Hourly temperature sensor readings with noise, smoothed by a 24-hour\n// rolling mean to reveal the underlying diurnal trend.\nlet seed = 42;\nfunction lcgRandom() {\n  seed = (seed * 1103515245 + 12345) % 2147483648;\n  return seed / 2147483648;\n}\n\nconst HOURS = 240; // 10 days of hourly readings\nconst WINDOW = 24; // 24-hour rolling window\nconst startDate = Date.UTC(2024, 5, 1, 0, 0, 0);\nconst hourMs = 3600 * 1000;\n\nconst rawSeries = [];\nfor (let i = 0; i < HOURS; i += 1) {\n  const timestamp = startDate + i * hourMs;\n  const diurnal = 6 * Math.sin((2 * Math.PI * (i % 24)) / 24 - Math.PI / 2);\n  const drift = 2 * Math.sin((2 * Math.PI * i) / (24 * 6));\n  const noise = (lcgRandom() - 0.5) * 3.5;\n  const temperature = 18 + diurnal + drift + noise;\n  rawSeries.push([timestamp, Number(temperature.toFixed(2))]);\n}\n\nconst rollingSeries = [];\nfor (let i = WINDOW - 1; i < HOURS; i += 1) {\n  let sum = 0;\n  for (let w = i - WINDOW + 1; w <= i; w += 1) {\n    sum += rawSeries[w][1];\n  }\n  rollingSeries.push([rawSeries[i][0], Number((sum / WINDOW).toFixed(2))]);\n}\n\n// --- Chart -------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"line\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"line-timeseries-rolling · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: \"Hourly sensor temperature with 24-hour rolling average\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    type: \"datetime\",\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    gridLineWidth: 1,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    title: { text: \"Date\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n  },\n  yAxis: {\n    title: {\n      text: \"Temperature (°C)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: {\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  tooltip: { enabled: false },\n  plotOptions: {\n    series: { animation: false, marker: { enabled: false } },\n  },\n  series: [\n    {\n      name: \"Raw Data\",\n      data: rawSeries,\n      color: t.palette[0],\n      opacity: 0.35,\n      lineWidth: 1.5,\n      zIndex: 1,\n    },\n    {\n      name: \"Rolling Average (24-Hour)\",\n      data: rollingSeries,\n      color: t.palette[1],\n      lineWidth: 3.5,\n      zIndex: 2,\n    },\n  ],\n});\n"}