bhylu.com

Advertisements

AI Chart.js

Create a real chart with fixed data and a zero baseline.

How it works

Chart.js supplies higher-level chart components over Canvas. Animation and responsive behaviour are useful in products but can complicate a tiny reproducible experiment, so this lab disables both. The three values are fictional tray counts, not a time forecast. Preserve the data labels and an accessible text description.

Run the code

This complete HTML document is a separate learning lab. Download download-labs.mjs into an empty folder and run node download-labs.mjs. For an unpublished local preview use node download-labs.mjs http://127.0.0.1:8000/examples/ai/. It saves hash-checked sources, pinned vendor assets and licence notices into a new bhylu-ai-lab folder and refuses an existing destination. Review the files, enter that folder, run node serve.mjs and open http://127.0.0.1:8138/chartjs.html. Select Run explicitly. The server is read-only, binds loopback and stops with Ctrl+C. It changes no PHP, Apache or database settings.

The reviewed browser baselines are TensorFlow.js 4.22.0, tfjs-vis 1.5.1, Brain.js 2.0.0-beta.24 (prerelease), Chart.js 4.5.1, D3 7.9.0 and Plotly.js 3.1.0. Only the libraries listed by this document load into the separate learning page. The plain JavaScript/Python playground does not supply them. TensorFlow.js labs select the CPU backend; no GPU support or speed claim follows.

Download the complete chartjs.html

Example

chartjs.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Bhylu AI - Chart.js</title>
    <style>
      body {
        font: 16px/1.6 system-ui;
        max-width: 760px;
        margin: 32px auto;
        padding: 0 20px;
        color: #0f3464;
        background: #fff;
      }
      button {
        font: inherit;
        padding: 8px 20px;
        background: #0078d4;
        color: white;
        border: 0;
        border-radius: 6px;
      }
      pre {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        background: #f3f7fc;
        padding: 16px;
      }
      canvas,
      svg,
      #chart {
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Chart.js</h1>
    <p>Create a real chart with fixed data and a zero baseline.</p>
    <p>
      This separate synthetic-data lab runs only when you select Run. It is not a model
      service or a production benchmark.
    </p>
    <canvas
      id="chart"
      width="480"
      height="320"
      aria-label="Synthetic tray counts 3, 5 and 4"
    ></canvas>
    <p>Session A: 3 trays; B: 5; C: 4.</p>
    <button id="run" type="button">Run example</button>
    <pre id="output" aria-live="polite"></pre>
    <script src="vendor/chart.min.js"></script>
    <script>
      const runButton = document.getElementById("run");
      const output = document.getElementById("output");
      const print = (value) => {
        output.textContent += String(value) + "\n";
      };
      window.aiDone = false;
      window.aiFailure = null;
      runButton.addEventListener("click", async () => {
        runButton.disabled = true;
        output.textContent = "";
        window.aiDone = false;
        window.aiFailure = null;
        try {
          if (window.aiChart) window.aiChart.destroy();
          const values = [3, 5, 4];
          window.aiChart = new Chart(document.getElementById("chart"), {
            type: "bar",
            data: {
              labels: ["Session A", "Session B", "Session C"],
              datasets: [{ label: "Trays", data: values, backgroundColor: "#0078d4" }],
            },
            options: {
              responsive: false,
              animation: false,
              scales: {
                y: { beginAtZero: true, title: { display: true, text: "Trays" } },
              },
              plugins: { legend: { display: false } },
            },
          });
          print("bars: " + window.aiChart.data.datasets[0].data.length);
          window.aiArtifact = { kind: "chartjs", values };
        } catch (error) {
          window.aiFailure = String(error);
          print("Error: " + error.message);
        } finally {
          window.aiDone = true;
          runButton.disabled = false;
        }
      });
    </script>
  </body>
</html>
Focus on the JavaScript operations

This excerpt omits document markup, local library loading and the explicit Run control. Use the full source to run it.

Operation excerpt

if(window.aiChart) window.aiChart.destroy();
const values = [3,5,4];
window.aiChart = new Chart(document.getElementById('chart'), {
  type:'bar',data:{labels:['Session A','Session B','Session C'],datasets:[{label:'Trays',data:values,backgroundColor:'#0078d4'}]},
  options:{responsive:false,animation:false,scales:{y:{beginAtZero:true,title:{display:true,text:'Trays'}}},plugins:{legend:{display:false}}}
});
print('bars: ' + window.aiChart.data.datasets[0].data.length);
window.aiArtifact = {kind:'chartjs',values};

Expected result

bars: 3

The retained chart object is destroyed before a later Run creates another instance on the same canvas. The test checks its actual dataset and rendered pixels. A three-bar display is not a statistical analysis or a reason to automate a decision.

Technical references

Advertisements