Hi
I am trying to use chart.js plugins (namely the plugin annotation). The goal is to draw vertical lines on the chart to indicate some important information.
I am using DashBoard2 and attempting to use it via template. The chart itself is working but i am not able to have the plugin working.
On the webpage of the plugin it refers that is necessary to perform registration, but the steps are missing (or i am unable to find them, for when using Script tag)
This is the template code:
<template>
<div>
<canvas id="myChartSimple1" width="100" height="100"></canvas>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/3.0.1/chartjs-plugin-annotation.min.js"
integrity="sha512-Hn1w6YiiFw6p6S2lXv6yKeqTk0PLVzeCwWY9n32beuPjQ5HLcvz5l2QsP+KilEr1ws37rCTw3bZpvfvVIeTh0Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
export default {
data() {
this.myChart = null;
return {
title: 'Sensor 1 Vibration FFT',
lineColors: ['red', 'blue', 'green'],
//mychart: null,
xValues: [50,60,70,80,90,100,110,120,130,140,150],
yValues: [0.7,0.8,0.8,0.9,0.9,0.9,1.0,1.1,1.4,1.4,1.5]
}
},
watch: {
msg: function () {
if(this.mychart != null){
/*
if(this.msg.payload !== undefined){
this.mychart.data.labels = this.msg.payload.xValues;
for(var i = 0; i < this.mychart.data.datasets.length; i++){
if(this.msg.payload.dataset[i] === undefined){
this.mychart.data.datasets[i].data = [];
this.mychart.data.datasets[i].hidden = true;
}else{
this.mychart.data.datasets[i].label = this.msg.payload.dataset[i].name;
this.mychart.data.datasets[i].data = this.msg.payload.dataset[i].values;
this.mychart.data.datasets[i].hidden = false;
}
}
this.mychart.options.scales.x.max = Number(this.msg.chart_options.max_x);
this.mychart.options.scales.x.title.text = (this.msg.chart_options.xAxis_isHertz ? 'Frequency (Hz)' : 'RPM');
this.mychart.options.scales.y.title.text = (this.msg.chart_options.yAxis_ismG ? `G's` : `IPS`);
//Check Labels
console.log('Update Chart');
this.mychart.update();
console.log('Finish Update Chart');
console.log(this.mychart.data);
}
*/
this.mychart.update();
}
},
},
computed: {
},
methods: {
init: function () {
console.log('Going to start Chart.js');
const ctx = document.getElementById('myChartSimple1').getContext('2d');
Chart.register('chartjs-plugin-annotation');
this.mychart = new Chart(ctx, {
type: "line",
data: {
labels: this.xValues,
datasets: [{
backgroundColor: 'blue',
borderColor: 'blue',
data: this.yValues,
label: 'Series 1',
normalized: true,
hidden: false,
},{
backgroundColor:'red',
borderColor: 'red',
data: this.yValues,
label: 'Series 2',
normalized: true,
hidden: false,
},{
backgroundColor:'green',
borderColor: 'green',
data: this.yValues,
label: 'Series 3',
normalized: true,
hidden: false,
}]
},
options: {
animation: false,
responsive: true,
maintainAspectRatio: false,
plugins: {
autocolors: false,
title: {
display: true,
text: this.title,
color: "rgba(255, 255, 255,1)"
},
legend: {
display: true,
labels: {
color: 'rgb(255, 255, 255, 1)'
}
},
annotation: {
annotations: {
label1: {
type: 'line',
yMin: 0.5,
yMax: 0.5,
borderColor: 'rgb(255, 99, 132)',
borderWidth: 2,
drawTime: 'afterDraw'
}
}
}
},
scales: {
y: {
type: 'linear',
beginAtZero: true,
max: 2,
min: 0,
ticks: {
stepSize: 0.2,
color: 'rgb(255, 255, 255, 1)'
},
title: {
display: true,
text: 'IPS',
color: 'rgb(255, 255, 255, 1)'
}
},
x: {
type: 'linear',
beginAtZero: true,
max: 5000,
min: 0,
ticks: {
stepSize: 100,
color: 'rgb(255, 255, 255, 1)'
},
title: {
display: true,
text: 'Frequency (Hz)',
color: 'rgb(255, 255, 255, 1)'
}
}
}
}
});
console.log(this.mychart);
this.mychart.update();
},
},
mounted() {
// code here when the component is first loaded
let interval = setInterval(() => {
if (window.Chart) {
this.init();
console.log('Chart downloaded and started');
console.log(window);
// Babylon.js is loaded, so we can now use it
clearInterval(interval);
}
}, 100);
},
unmounted() {
// code here when the component is removed from the Dashboard
// i.e. when the user navigates away from the page
}
}
</script>
<style>
</style>
I have tried to use the function Chart.register but when doing so, sometimes it starts having error in console (not always)...
Any help is appreciated.
Curiosity was able to implement what was required using echarts, but updating 3 series with up to 2048 points for each series is very slow, around 1.6s per update, soo slow that locks the browser UI.
Thank You
