function createTwoLineChart()

in assets/ml.js [117:186]


function createTwoLineChart(ctx, dataRows, unit) {
  ctx = clearChart(ctx);

  // For the x-axis labels, we'll convert the date string into something readable
  const labels = dataRows.map(row => {
    const d = new Date(row.date);
    // e.g. "26 Mar"
    return d.toLocaleDateString("en-US", { day: "numeric", month: "short" });
  });

  // Prepare the two data arrays:
  // 1) Engine Creation p50
  // 2) Inference p50
  const engineCreationData = dataRows.map(row => row.engine_creation_p50);
  const inferenceData = dataRows.map(row => row.inference_p50);

  charts[ctx.id] = new Chart(ctx, {
    type: "line",
    data: {
      labels,
      datasets: [
        {
          label: "Engine Creation p50 (ms)",
          data: engineCreationData,
          borderColor: "rgba(54, 162, 235, 1)",
          backgroundColor: "rgba(54, 162, 235, 0.2)",
          fill: true,
          tension: 0.3
        },
        {
          label: "Inference p50 (ms)",
          data: inferenceData,
          borderColor: "rgba(255, 99, 132, 1)",
          backgroundColor: "rgba(255, 99, 132, 0.2)",
          fill: true,
          tension: 0.3
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: {
          type: "category",
          ticks: {
            autoSkip: true,
            maxTicksLimit: 10
          }
        },
        y: {
          beginAtZero: true
        }
      },
      plugins: {
        legend: {
          display: true // Show which line is which
        },
        tooltip: {
          callbacks: {
            // Show e.g. "1.17 ms" in the tooltip
            label: function(tooltipItem) {
              return tooltipItem.raw + " " + unit;
            }
          }
        }
      }
    }
  });
}