I'm running in circles here. I've built a nice plot, but unfortunately, the hover text isn't working. Please see the last lines in the code; I've commented accordingly. Without the hover text, I get a decent graph, but with it, I don't. The error message I'm receiving is:
Uncaught Error Error: cannot extend missing or non-array attribute: hovertext
I'm not sure what else to explain about the problem.
Here's my code:
<!DOCTYPE html>
<html lang="de">
<head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.plot.ly/plotly-2.16.1.min.js"></script>
<title>Temperatur Graph</title>
</head>
<body>
<div id="temp" class="subgraphcontent">
<div class="row" style="padding: 30px;">
<div id="temp_graph_wrapper" class="border border-2" style="padding: 5px;">
<div id="temp_plot"></div>
</div>
</div>
</div>
<div class="temp_graph_div" theta0="1220" theta1_vert="1219" theta2_vert="1219" theta3_vert="1220"
theta4_vert="1219" theta1_hori="1219" theta2_hori="1219" theta3_hori="1221" theta4_hori="1221" counter="1">
</div>
<div class="temp_graph_div" theta0="1221" theta1_vert="1220" theta2_vert="1219" theta3_vert="1220"
theta4_vert="1219" theta1_hori="1218" theta2_hori="1218" theta3_hori="1221" theta4_hori="1220" counter="2">
</div>
<div class="temp_graph_div" theta0="1219" theta1_vert="1217" theta2_vert="1217" theta3_vert="1217"
theta4_vert="1217" theta1_hori="1216" theta2_hori="1216" theta3_hori="1219" theta4_hori="1218" counter="3">
</div>
</body>
<script>
function setup_temp_graph() {
var graphdiv = document.getElementById("temp_plot")
var layout = {
title: 'Temperatur',
height: 700,
width: 930,
showlegend: false,
yaxis: {
ticksuffix: "°C",
gridwidth: 1,
color: 'black',
gridcolor: 'black'
},
xaxis: {
tickmode: "linear",
tickvals: [0],
ticktext: [""],
gridwidth: 1,
color: 'black',
gridcolor: 'black'
},
shapes: [
]
};
var trace1 = {
y: [],
x: [],
type: 'scatter',
};
var data = [trace1];
Plotly.newPlot(graphdiv, data, layout, { displayModeBar: false }, { responsive: true });
}
$(document).ready(function () {
setup_temp_graph();
$('.temp_graph_div').each(function () {
var $this = $(this);
var theta0 = $this.attr("theta0");
var theta1_vert = $this.attr("theta1_vert");
var theta2_vert = $this.attr("theta2_vert");
var theta3_vert = $this.attr("theta3_vert");
var theta4_vert = $this.attr("theta4_vert");
var counter = parseInt($this.attr("counter"));
update_temp_graph(
theta0, theta1_vert, theta2_vert, theta3_vert, theta4_vert, counter
);
});
});
function update_temp_graph(theta0, theta1_vert, theta2_vert, theta3_vert, theta4_vert, counter) {
if (theta0 === "" || theta1_vert === "" || theta2_vert === "" || theta3_vert === "" || theta4_vert === "" || counter === "") {
return; // Exit the function if any of the variables is empty
}
var graphDiv = document.getElementById("temp_plot");
var xValues = [counter - 0.5, counter - 0.4, counter - 0.3, counter];
var yValues = [];
var hoverText = [];
if (counter == 1) {
xValues.unshift(0); // Add 0 to the beginning of the xValues array
yValues.push(parseFloat(theta0));
hoverText.push('Einlauf');
}
yValues = yValues.concat([
parseFloat(theta1_vert.replace(",", ".")),
parseFloat(theta2_vert.replace(",", ".")),
parseFloat(theta3_vert.replace(",", ".")),
parseFloat(theta4_vert.replace(",", "."))
]);
hoverText = hoverText.concat([
'Strahlung vertical',
'Abspritzen vertical',
'Umformung vertical',
'Leitung vertical',
]);
var traceUpdate = {
x: xValues,
y: yValues,
text: hoverText,
hoverinfo: 'text',
hovertext: hoverText,
mode: 'lines+markers',
type: 'scatter',
connectgaps: false
};
Plotly.update(graphDiv, traceUpdate, 0);
//the next line works, but without hovertext
// Plotly.extendTraces(graphDiv, { y: [yValues], x: [xValues] }, [0]);
//the next line crashes the graph
// Plotly.extendTraces(graphDiv, { hovertext: [hoverText] }, [0]);
}
</script>
</html>
PS: By the way, I have already extensively tortured ChatGPT on this topic. It doesn't help. And with my fairly extensive programming knowledge, I'm also at a dead end. Well, JavaScript is not really my language.
from I can't update the hovertext on a plotly graph
No comments:
Post a Comment