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;
}
}
}
}
}
});
}