I'm a newbie trying to learn. I have modified the plot code at plotly hover events The goal is to obtain hover events so that later I can show an image in a modal.
My CSV does read in, and the plot does show in the browser. I get an error message: "Uncaught TypeError: myPlot.on is not a function" (in Firefox and Chrome debuggers). Other posts on this issue indicate that I must be running the correct version of "https://cdn.plot.ly/plotly-latest.min.js". I have tried everything I can think of even making it linear code without multiple function calls. Help! Thanks...
<!DOCTYPE html>
<html lang="en" >
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<div id="myDiv"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>
<script>
var traces=[];
var layout=[];
var config={};
var rows=[]
const CSV="cloudcover.csv";
Plotly.d3.csv(CSV, function(rows){
let x=[];
let y=[];
let row;
let i=0;
while (i< rows.length){
row=rows[i];
x.push(row["Time"]);
y.push(row["CloudCover"]);
i+=1;
};
traces=[
{x:x,
y:y,
line:{color:"#387fba"},
width:2,
}];
layout={
title:'Cloudcover',
yaxis:{ range:[0,100]},
xaxis:{tickformat: "%H:%M:%S"}
};
config={
responsive:true
};
Plotly.newPlot('myDiv',traces,layout,config,{showSendToCloud: true});
});
var myPlot = document.getElementById('myDiv')
hoverInfo = document.getElementById('hoverinfo')
myPlot.on('plotly_hover', function(data){
var infotext = data.points.map(function(d){
return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
});
hoverInfo.innerHTML = infotext.join('<br/>');
})
myPlot.on('plotly_unhover', function(data){
hoverInfo.innerHTML = '';
});
</script>
</body>
</html>
The csv is simple:
Time,CloudCover
2022-04-06 10:07:09,0
2022-04-06 11:07:18,100.0
2022-04-06 12:08:17,100.0
2022-04-06 13:09:16,96.0
2022-04-06 14:10:15,66.0
2022-04-06 15:11:14,7.0
2022-04-06 16:12:13,6.0
You have to put all of the plotly code inside the Plotly.d3.csv callback, including your event listener, like so:
Plotly.d3.csv(CSV, function (rows) {
...
Plotly.newPlot('myDiv', traces, layout, config);
const myPlot = document.getElementById('myDiv')
myPlot.on('plotly_hover', function (data) {
...
})
myPlot.on('plotly_unhover', function (data) {
...
});
});
This is because your data will only be available once the CSV file is loaded (i.e. you are inside the callback) and the on listener will only be available once the chart is created from the data.
Move the Plotly.newPlot out of the function passed to Plotly.d3.csv. Once Plotly.newPlot executes, it will insert the polyfills to allow listening to events using .on(...)
The below snippet plots a blank chart, it still doesn't have the cloudcover.csv file, but resolves your issue.
Updated the snippet to use Plotly.react() to refresh data in the chart once the CSV content is available. Generally speaking, it's better to not have the component creation/rendering code within the data update function.
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<div id="myDiv"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>
<script>
const chartEl = 'myDiv';
const CSV = "cloudcover.csv";
/*Create chart*/
var layout = {
title: 'Cloudcover',
yaxis: {
range: [0, 100]
},
xaxis: {
tickformat: "%H:%M:%S"
}
},
config = {
responsive: true
};
Plotly.newPlot(chartEl, [], layout, config, {
showSendToCloud: true
});
var myPlot = document.getElementById(chartEl)
hoverInfo = document.getElementById('hoverinfo')
myPlot.on('plotly_hover', function(data) {
var infotext = data.points.map(function(d) {
return (d.data.name + ': x= ' + d.x + ', y= ' + d.y.toPrecision(3));
});
hoverInfo.innerHTML = infotext.join('<br/>');
})
myPlot.on('plotly_unhover', function(data) {
hoverInfo.innerHTML = '';
});
/*Update data in chart*/
function updateChartData(rows) {
let traces = [],
x = [],
y = [],
row,
i = 0;
while (i < rows.length) {
row = rows[i];
x.push(row["Time"]);
y.push(row["CloudCover"]);
i += 1;
};
traces = [{
x: x,
y: y,
line: {
color: "#387fba"
},
width: 2,
}];
Plotly.react(chartEl, traces);
}
Plotly.d3.csv(CSV, updateChartData);
</script>
</body>
</html>