marker.

on('mouseover', function() {
chartDiv.style.display = 'block';

// Load temperature data

Papa.parse("Visoko_T.csv", {
download: true,
header: true,
complete: function (tempResults) {
var lastTempValue = tempResults.data[tempResults.data.length - 2].value;
var lastTempTimestamp = tempResults.data[tempResults.data.length -
2].timestamp;

var lastTempTimestampDate = new Date(lastTempTimestamp);

var formattedTempTime = 'u ' + lastTempTimestampDate.getHours() + ':' +
lastTempTimestampDate.getMinutes().toString().padStart(2, '0') + 'h';
var tempTitle = 'Visoko Temperature: ' + lastTempValue + ' °C ' +
formattedTempTime;

var tempData = [{
x: tempResults.data.map(d => new Date(d.timestamp)),
y: tempResults.data.map(d => parseFloat(d.value)),
type: 'scatter',
mode: 'lines',
name: 'Temperature',
line: {
color: '#6c584c',
width: 2
}
}];

// Load padavine data

Papa.parse("Visoko_P.csv", {
download: true,
header: true,
complete: function (rainResults) {
var lastRainValue = rainResults.data[rainResults.data.length - 2].value;
var lastRainTimestamp = rainResults.data[rainResults.data.length -
2].timestamp;

var lastRainTimestampDate = new Date(lastRainTimestamp);

var formattedRainTime = 'u ' + lastRainTimestampDate.getHours() + ':' +
lastRainTimestampDate.getMinutes().toString().padStart(2, '0') + 'h';
var rainTitle = 'Visoko Padavine: ' + lastRainValue + ' mm ' +
formattedRainTime;

var rainData = [{
x: rainResults.data.map(d => new Date(d.timestamp)),
y: rainResults.data.map(d => parseFloat(d.value)),
type: 'bar',
name: 'Padavine',
yaxis: 'y2',
marker: {
color: '#0077b6'
}
}];

// Combine temperature and padavine data into a single plot

var data = tempData.concat(rainData);
 var layout = {
title: tempTitle + '<br>' + rainTitle,
xaxis: {
title: 'Measurement time'
},
yaxis: {
title: 'Temperature (°C)',
range: [0, 40]
},
yaxis2: {
title: 'Padavine (mm)',
overlaying: 'y',
side: 'right',
range: [0, 10]
},
hovermode: 'closest',
height: 400,
margin: {
l: 40,
r: 10,
b: 40,
t: 40
}
};

Plotly.newPlot('chart', data, layout);

}
});
}
});
});

marker.on('mouseout', function() {
chartDiv.style.display = 'none';
});