<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prophet Forecast: Daily Conversions</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.chart-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 30px;
width: 90%;
max-width: 900px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
h1 {
color: #e0e0e0;
text-align: center;
margin-bottom: 20px;
font-size: 1.5rem;
font-weight: 300;
letter-spacing: 1px;
}
canvas { max-height: 500px; }
</style>
</head>
<body>
<div class="chart-container">
<h1>📈 Prophet Forecast: Daily Conversions</h1>
<canvas id="forecastChart"></canvas>
</div>
<script>
const ctx = document.getElementById('forecastChart').getContext('2d');
const config = {
"type": "line",
"data": {
"labels": [
"2025-01-01",
"2025-01-02",
"2025-01-03",
"2025-01-04",
"2025-01-05",
"2025-01-06",
"2025-01-07",
"2025-01-08",
"2025-01-09",
"2025-01-10",
"2025-01-11",
"2025-01-12",
"2025-01-13",
"2025-01-14",
"2025-01-15"
],
"datasets": [
{
"label": "Confidence Lower",
"data": [
10.0,
11.0,
12.0,
13.0,
14.0,
15.0,
16.0,
17.0,
18.0,
19.0,
20.0,
21.0,
22.0,
23.0,
24.0
],
"borderWidth": 0,
"pointRadius": 0,
"fill": false,
"backgroundColor": "rgba(54, 162, 235, 0.0)",
"borderColor": "rgba(54, 162, 235, 0.0)",
"hidden": false
},
{
"label": "Confidence Upper",
"data": [
10.0,
11.0,
12.0,
13.0,
14.0,
15.0,
16.0,
17.0,
18.0,
19.0,
20.0,
21.0,
22.0,
23.0,
24.0
],
"borderWidth": 0,
"pointRadius": 0,
"fill": "-1",
"backgroundColor": "rgba(54, 162, 235, 0.15)",
"borderColor": "rgba(54, 162, 235, 0.0)"
},
{
"label": "Forecast (yhat)",
"data": [
10.0,
11.0,
12.0,
13.0,
14.0,
15.0,
16.0,
17.0,
18.0,
19.0,
20.0,
21.0,
22.0,
23.0,
24.0
],
"borderWidth": 2,
"fill": false,
"pointRadius": 0,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgba(54, 162, 235, 0.8)",
"borderDash": [
5,
5
],
"order": 1
},
{
"label": "Actuals",
"data": [
10.0,
11.0,
12.0,
13.0,
14.0,
15.0,
16.0,
17.0,
18.0,
19.0,
null,
null,
null,
null,
null
],
"fill": false,
"pointRadius": 6,
"pointHoverRadius": 8,
"borderWidth": 0,
"backgroundColor": "rgba(255, 107, 107, 1)",
"borderColor": "rgba(255, 107, 107, 0.0)",
"order": 0
}
]
},
"options": {
"responsive": true,
"plugins": {
"legend": {
"labels": {
"filter": "function(item) { return !item.text.includes('Confidence'); }"
}
}
},
"scales": {
"y": {
"beginAtZero": true
}
}
}
};
// Override chart options for dark theme styling
config.options = config.options || {};
config.options.responsive = true;
config.options.plugins = {
legend: {
labels: {
color: '#ccc',
font: { size: 13 },
usePointStyle: true,
filter: function(item) {
return !item.text.includes('Confidence');
}
}
},
tooltip: {
backgroundColor: 'rgba(0,0,0,0.8)',
titleColor: '#fff',
bodyColor: '#ddd',
cornerRadius: 8,
padding: 12
}
};
config.options.scales = {
x: {
ticks: { color: '#aaa', maxRotation: 45, font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.05)' }
},
y: {
beginAtZero: true,
ticks: { color: '#aaa', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.08)' }
}
};
new Chart(ctx, config);
</script>
</body>
</html>
