I had a project that need to plot 2 sine wave graphs in a same div. The value of two graphs can be change by using input slider. The two graphs will be activated by clicking on corresponding button. For the first running, everything seems perfect when every plot was activated after a button clicking button. But when I clicked the button again, the graph disappeared and when I changed the value of sine wave, there was error like this:
plotly-latest.min.js:37 Uncaught TypeError: Cannot read properties of undefined (reading ‘length’)
at r.cleanData (plotly-latest.min.js:37:730774)
at r.redraw (plotly-latest.min.js:37:779206)
at update (sinewave_plot.js:103:12)
at lo_a_slide.oninput (sinewave_plot.js:117:5)
at el.setValue (input-knobs.js:197:12)
at ik.pointermove (input-knobs.js:243:14)
Can anyone help me to solve this problem. And this is my script:
Summary
let freq = document.getElementById(“freqSlider”).value;
let amp = document.getElementById(“ampSlider”).value;
let lo_freq = document.getElementById(“LOfreqSlider”).value;
let lo_amp = document.getElementById(“LOampSlider”).value;
let n = 20000;
let pi = Math.PI
let x = , y = , lo_x = , lo_y = ;
let xmax = 1/100;
// initialization
for (i = 0; i < n; i++) {
x[i] = xmax * i / (n) ;
y[i] = amp * Math.sin(2 * pi * x[i] * freq);
}
for (j = 0; j < n; j++) {
lo_x[j] = xmax * j / (n) ;
lo_y[j] = lo_amp * Math.sin(2 * pi * x[j] * lo_freq);
}
let trace_init = {
x: x,
y: y,
mode: ‘slines’,
}
let lo_trace_init = {
x: lo_x,
y: lo_y,
mode: ‘slines’,
}
let data = [trace_init]
let lo_data = [lo_trace_init]
let layout = {
plot_bgcolor: “rgba(46, 191, 240, 0.6)”,
title: ‘’,
xaxis: {
range: [0, xmax],
showaxis: false,
title: ‘’,
showgrid: false,
zeroline: false,
showline: false,
showticklabels: false
},
yaxis: {
range: [-10.1, 10.1],
title: ‘’,
showgrid: true,
zeroline: false,
showline: false,
showticklabels: false,
}
};
function testpoint1 () {
let xmax = 1/100;
document.getElementById(“plot1”).style.display = “block”;
document.getElementById(“plot2”).style.display = “none”;
Plotly.newPlot(‘plot1’,data,layout, {displayModeBar: false})
function update(){
let freq = document.getElementById(“freqSlider”).value;
let amp = document.getElementById(“ampSlider”).value;
for (i = 0; i < n; i++) {
x[i] = xmax * i / (n) ;
y[i] = amp * Math.sin(2 * pi * x[i] * freq);
}
data = {x:x , y:y ,mode:trace_init.mode}
Plotly.redraw(‘plot1’,data,layout);
}
let f_slide = document.getElementById(‘freqSlider’);
let f_sliderDiv = document.getElementById(“f_sliderAmount”);
let a_slide = document.getElementById(‘ampSlider’);
let a_sliderDiv = document.getElementById(“a_sliderAmount”);
f_sliderDiv.innerHTML = document.getElementById(‘freqSlider’).value;
a_sliderDiv.innerHTML = document.getElementById(‘ampSlider’).value;
f_slide.oninput = function() {
f_sliderDiv.innerHTML = this.value;
update(this.value);
}
a_slide.oninput = function() {
a_sliderDiv.innerHTML = this.value;
update(this.value);
}
}
function testpoint2 () {
document.getElementById(“plot2”).style.display = “block”;
document.getElementById(“plot1”).style.display = “none”;
let xmax = 1/100;
Plotly.newPlot(‘plot2’,lo_data,layout, {displayModeBar: false})
function update(){
let lo_freq = document.getElementById(“LOfreqSlider”).value;
let lo_amp = document.getElementById(“LOampSlider”).value;
for (i = 0; i < n; i++) {
lo_x[i] = xmax * i / (n) ;
lo_y[i] = lo_amp * Math.sin(2 * pi * x[i] * lo_freq);
}
lo_data = {x:lo_x , y:lo_y ,mode:lo_trace_init.mode}
console.log(lo_data)
Plotly.redraw(‘plot2’,lo_data,layout);
}
let lo_f_slide = document.getElementById(‘LOfreqSlider’);
let lo_f_sliderDiv = document.getElementById(“LOf_sliderAmount”);
let lo_a_slide = document.getElementById(‘LOampSlider’);
let lo_a_sliderDiv = document.getElementById(“LOa_sliderAmount”);
lo_f_sliderDiv.innerHTML = document.getElementById(‘LOfreqSlider’).value;
lo_a_sliderDiv.innerHTML = document.getElementById(‘LOampSlider’).value;
lo_f_slide.oninput = function() {
lo_f_sliderDiv.innerHTML = this.value;
update(this.value);
}
lo_a_slide.oninput = function() {
lo_a_sliderDiv.innerHTML = this.value;
update(this.value);
}
}
This is my html file:
Summary
'
Audio Oscillator
Frequency
Amplitude
<input style="margin-right: 15px; float:right "id=‘ampSlider’ type=“range” class=“input-knob” data-src=“knob70.png” data-sprites=“100” min =‘0’ max = ‘10’ step = ‘1’ value = ‘4’/>
Hz
V
Local Oscillator
Frequency
Amplitude
Hz
V
TP2
Oscilloscope