in x axis i want to change x axis scale from 00:00 to 23:00 which is 24 hr time how to change it so far i tried this code
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.24.2/plotly.min.js"></script>
</head>
<body>
<div id="heatmapDiv"></div>
<script>
// Data
var data = {{ pivot_table_json | safe }};
// Extract the time and date values
var times = Object.keys(data);
var dates = Object.keys(data[times[0]]);
// Prepare the data for the heatmap
var z = dates.map(function(date) {
return times.map(function(time) {
var value = data[time][date];
if (isNaN(value)) {
return 0; // Assign 0 to NaN values
} else if (value === null) {
return -1; // Assign -1 to represent empty spaces
} else {
return value;
}
});
});
// Create the custom color scale
var customColorScale = [
['0.0', 'rgb(189, 177, 180)'],
['0.111111111111', 'rgb(106, 215, 39)'],
['0.222222222222', 'rgb(7, 184, 48)'],
['0.333333333333', 'rgb(253,174,97)'],
['0.444444444444', 'rgb(254,224,144)'],
['0.555555555556', 'rgb(232, 122, 19)'],
['0.666666666667', 'rgb(214, 103, 114)'],
['0.777777777778', 'rgb(176, 23, 38)'],
['0.888888888889', 'rgb(176, 23, 38)'],
['1.0', 'rgb(179, 9, 26)']
];
// Create the heatmap trace
var heatmapTrace = {
x: times,
y: dates,
z: z,
type: 'heatmap',
colorscale: customColorScale,
colorbar: {
title: 'Value',
titleside: 'right',
},
};
var times = [];
for (var i = 0; i < 24; i++) {
var time = i.toString().padStart(2, '0') + ':00'; // Format the time as HH:00
times.push(time);
}
// Create the layout
// Create the layout
var layout = {
title: 'Heatmap',
xaxis: {
title: 'Time',
type: 'category', // Specify the type as 'category'
tickvals: times,
ticktext: times,
},
yaxis: {
tickmode: 'array',
tickvals: dates,
ticktext: dates.map(function(date) {
var weekday = new Date(date).toLocaleDateString('en-US', { weekday: 'long' });
return weekday; // Return the weekday instead of the full date
}),
},
};
// Create the figure
var plotData = [heatmapTrace];
Plotly.newPlot('heatmapDiv', plotData, layout);
</script>
</body>
</html>```