{"spec_id":"spc-xbar-r","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// spc-xbar-r: Statistical Process Control Chart (X-bar/R)\n// Library: highcharts 12.6.0 | JavaScript 22.22.3\n// Quality: 87/100 | Created: 2026-06-20\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Deterministic LCG random number generator\nlet _seed = 42;\nfunction lcgRand() {\n  _seed = ((_seed * 1664525 + 1013904223) >>> 0);\n  return _seed / 0x100000000;\n}\n\n// Standard normal via polar Box-Muller\nlet _spare = null;\nfunction randN() {\n  if (_spare !== null) { const s = _spare; _spare = null; return s; }\n  let u, v, r;\n  do { u = lcgRand() * 2 - 1; v = lcgRand() * 2 - 1; r = u * u + v * v; } while (r >= 1 || r === 0);\n  const c = Math.sqrt(-2 * Math.log(r) / r);\n  _spare = v * c;\n  return u * c;\n}\n\n// Generate 28 subgroups of n=5 shaft diameter measurements (target 25.00mm, σ=0.06mm)\nconst N = 28;\nconst N_SUB = 5;\nconst TARGET = 25.0;\nconst SIGMA = 0.06;\n\nconst xbarVals = [], rVals = [];\nfor (let i = 0; i < N; i++) {\n  const sub = [];\n  // Sample 25 (i=24): tooling wear causes elevated variability → OOC range event\n  const localSigma = (i === 24) ? SIGMA * 4 : SIGMA;\n  for (let j = 0; j < N_SUB; j++) {\n    // Inject upward shifts to create realistic OOC signals\n    let shift = 0;\n    if (i >= 9 && i <= 11) shift = 0.22;  // process drift (samples 10-12)\n    if (i === 19) shift = 0.30;            // isolated spike (sample 20)\n    sub.push(TARGET + shift + randN() * localSigma);\n  }\n  xbarVals.push(sub.reduce((a, b) => a + b, 0) / N_SUB);\n  rVals.push(Math.max(...sub) - Math.min(...sub));\n}\n\n// Control chart constants for n=5: A2=0.577, D3=0, D4=2.115\nconst A2 = 0.577, D3 = 0, D4 = 2.115;\nconst xbb = xbarVals.reduce((a, b) => a + b, 0) / N;\nconst rb  = rVals.reduce((a, b) => a + b, 0) / N;\n\nconst xUCL = xbb + A2 * rb;\nconst xLCL = xbb - A2 * rb;\nconst xUWL = xbb + (2 / 3) * A2 * rb;\nconst xLWL = xbb - (2 / 3) * A2 * rb;\nconst rUCL = D4 * rb;\nconst rUWL = rb + (2 / 3) * (rUCL - rb);\n\nconst fix3 = v => Math.round(v * 1000) / 1000;\nconst flat  = (v, n) => Array(n).fill(fix3(v));\nconst cats  = Array.from({length: N}, (_, i) => `S${i + 1}`);\n\n// Build X-bar series data with OOC point highlighting\nconst xbarData = xbarVals.map(v => {\n  const ooc = v > xUCL || v < xLCL;\n  return {\n    y: fix3(v),\n    marker: ooc\n      ? { fillColor: '#AE3030', radius: 8, lineWidth: 2, lineColor: '#AE3030', symbol: 'circle' }\n      : { symbol: 'circle', radius: 4, fillColor: t.palette[2] }\n  };\n});\n\n// Build R series data with OOC point highlighting\nconst rData = rVals.map(v => {\n  const ooc = v > rUCL;\n  return {\n    y: fix3(v),\n    marker: ooc\n      ? { fillColor: '#AE3030', radius: 8, lineWidth: 2, lineColor: '#AE3030', symbol: 'circle' }\n      : { symbol: 'circle', radius: 4, fillColor: t.palette[2] }\n  };\n});\n\nHighcharts.chart(\"container\", {\n  chart: {\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n    marginTop: 80,\n    marginBottom: 100,\n    marginLeft: 100,\n    marginRight: 50\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"spc-xbar-r · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" }\n  },\n  subtitle: {\n    text: \"Shaft Diameter (mm) — CNC Machining Process | 28 Subgroups, n=5\",\n    style: { color: t.inkSoft, fontSize: \"14px\" }\n  },\n  xAxis: {\n    categories: cats,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    gridLineWidth: 0,\n    labels: {\n      style: { color: t.inkSoft, fontSize: \"13px\" },\n      step: 2\n    },\n    title: {\n      text: \"Sample Number\",\n      style: { color: t.inkSoft, fontSize: \"14px\" }\n    }\n  },\n  yAxis: [\n    {\n      title: {\n        text: \"X-bar (mm)\",\n        style: { color: t.inkSoft, fontSize: \"14px\" }\n      },\n      labels: {\n        style: { color: t.inkSoft, fontSize: \"13px\" },\n        formatter: function () { return this.value.toFixed(3); }\n      },\n      gridLineColor: t.grid,\n      lineColor: t.inkSoft,\n      tickColor: t.inkSoft,\n      top: \"7%\",\n      height: \"43%\",\n      offset: 0\n    },\n    {\n      title: {\n        text: \"Range (mm)\",\n        style: { color: t.inkSoft, fontSize: \"14px\" }\n      },\n      labels: {\n        style: { color: t.inkSoft, fontSize: \"13px\" },\n        formatter: function () { return this.value.toFixed(3); }\n      },\n      gridLineColor: t.grid,\n      lineColor: t.inkSoft,\n      tickColor: t.inkSoft,\n      top: \"53%\",\n      height: \"42%\",\n      offset: 0,\n      min: 0\n    }\n  ],\n  legend: {\n    enabled: true,\n    layout: \"horizontal\",\n    verticalAlign: \"bottom\",\n    align: \"center\",\n    itemStyle: { color: t.inkSoft, fontSize: \"13px\" },\n    itemHoverStyle: { color: t.ink },\n    symbolWidth: 24,\n    margin: 16\n  },\n  tooltip: { enabled: false },\n  plotOptions: {\n    series: {\n      animation: false,\n      lineWidth: 2,\n      states: { hover: { lineWidthPlus: 0 } }\n    }\n  },\n  series: [\n    // --- X-bar chart ---\n    {\n      name: \"X-bar\",\n      type: \"line\",\n      data: xbarData,\n      color: t.palette[2],\n      yAxis: 0,\n      zIndex: 3,\n      legendIndex: 0,\n      enableMouseTracking: false\n    },\n    {\n      name: \"Center (X̄)\",\n      type: \"line\",\n      data: flat(xbb, N),\n      color: t.palette[0],\n      lineWidth: 3,\n      yAxis: 0,\n      marker: { enabled: false },\n      legendIndex: 1,\n      enableMouseTracking: false\n    },\n    {\n      name: \"UCL / LCL (±3σ)\",\n      type: \"line\",\n      data: flat(xUCL, N),\n      color: '#AE3030',\n      dashStyle: \"Dash\",\n      lineWidth: 1.5,\n      yAxis: 0,\n      marker: { enabled: false },\n      legendIndex: 2,\n      enableMouseTracking: false\n    },\n    {\n      name: \"\",\n      type: \"line\",\n      data: flat(xLCL, N),\n      color: '#AE3030',\n      dashStyle: \"Dash\",\n      lineWidth: 1.5,\n      yAxis: 0,\n      marker: { enabled: false },\n      showInLegend: false,\n      enableMouseTracking: false\n    },\n    {\n      name: \"Warning (±2σ)\",\n      type: \"line\",\n      data: flat(xUWL, N),\n      color: '#DDCC77',\n      dashStyle: \"ShortDash\",\n      lineWidth: 1,\n      yAxis: 0,\n      marker: { enabled: false },\n      legendIndex: 3,\n      enableMouseTracking: false\n    },\n    {\n      name: \"\",\n      type: \"line\",\n      data: flat(xLWL, N),\n      color: '#DDCC77',\n      dashStyle: \"ShortDash\",\n      lineWidth: 1,\n      yAxis: 0,\n      marker: { enabled: false },\n      showInLegend: false,\n      enableMouseTracking: false\n    },\n    // --- R chart ---\n    {\n      name: \"\",\n      type: \"line\",\n      data: rData,\n      color: t.palette[2],\n      yAxis: 1,\n      zIndex: 3,\n      showInLegend: false,\n      enableMouseTracking: false\n    },\n    {\n      name: \"\",\n      type: \"line\",\n      data: flat(rb, N),\n      color: t.palette[0],\n      lineWidth: 3,\n      yAxis: 1,\n      marker: { enabled: false },\n      showInLegend: false,\n      enableMouseTracking: false\n    },\n    {\n      name: \"\",\n      type: \"line\",\n      data: flat(rUCL, N),\n      color: '#AE3030',\n      dashStyle: \"Dash\",\n      lineWidth: 1.5,\n      yAxis: 1,\n      marker: { enabled: false },\n      showInLegend: false,\n      enableMouseTracking: false\n    },\n    {\n      name: \"\",\n      type: \"line\",\n      data: flat(rUWL, N),\n      color: '#DDCC77',\n      dashStyle: \"ShortDash\",\n      lineWidth: 1,\n      yAxis: 1,\n      marker: { enabled: false },\n      showInLegend: false,\n      enableMouseTracking: false\n    }\n  ]\n});\n"}