in assets/telemetry-metrics.js [88:166]
function plotChart(id, labels, values1, title1, color1, values2, title2, color2) {
const ctx = document.getElementById(id+"-canvas").getContext('2d');
let chart = new Chart(ctx, {
type: 'scatter',
data: {
labels: labels,
datasets: [
{
label: title1,
data: values1,
borderColor: color1,
fill: false,
borderWidth: 1,
tension: 0.1,
trendlineLinear: {
style: "rgba(255,105,180, .8)",
lineStyle: "dotted",
width: 2
}
},
{
label: title2,
data: values2,
borderColor: color2,
fill: false,
borderWidth: 1,
tension: 0.1,
trendlineLinear: {
style: "rgba(255,105,180, .8)",
lineStyle: "dotted",
width: 2
}
}
]
},
options: {
scales: {
x: {
type: 'time',
time: { unit: 'day', tooltipFormat: 'll' },
title: { display: true, text: 'Build Date' }
},
y: {
beginAtZero: false,
title: { display: true, text: 'Time (ms)' }
}
},
plugins: {
zoom : {
pan: {
enabled: false,
},
zoom: {
mode: 'xy',
drag: {
enabled: true,
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
backgroundColor: 'rgba(54, 162, 235, 0.3)'
},
onZoom({ chart }) {
window.allCharts.forEach(c => {
c.zoomScale(
'x',
{ min: Math.trunc(chart.scales.x.min), max: Math.trunc(chart.scales.x.max) },
'none'
);
});
},
},
},
}
},
plugins: [backgroundColorPlugin]
});
displayMetrics(id+"-metrics", title1, values1, title2, values2);
window.allCharts.push(chart);
}