Chatbot/chart.html at main · FruttoCheap/Chatbot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Total expenses Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body, html {
        height: 100%;
        font-family: 'Arial', sans-serif;
        background-color: #eaeef1; /* Light background for contrast */
        color: #333; /* Dark text for readability */
    }
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100vh;
        position: relative;
        padding: 20px;
    }
    .title-container {
        margin-bottom: 20px;
        text-align: center;
        width: 80%;
        max-width: 900px;
        padding: 20px;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .title {
        margin: 0; /* Remove default margins */
    }
    .chart-container {
        width: 80%;
        max-width: 900px;
        height: 70vh;
        background: #fff;
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        border-radius: 12px;
        z-index: 10;
        position: relative;
        transition: transform 0.2s; /* Smooth scaling effect */
    }
    .chart-container:hover {
        transform: scale(1.01); /* Slightly enlarge on hover */
    }
    .description-container {
        width: 80%;
        max-width: 900px;
        padding: 20px;
        margin-top: 20px;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        text-align: center;
        line-height: 1.5; /* Improve readability */
    }
    .description-container:hover {
        transform: scale(1.01); /* Slightly enlarge on hover */
    }
    canvas {
        display: block;
        border-radius: 8px; /* Rounded corners on the chart */
    }
    h1 {
        margin-bottom: 20px;
        font-size: 2em; /* Larger title */
        color: #2c3e50; /* Darker text color for the title */
    }
    p {
        font-size: 1.1em; /* Slightly larger font for descriptions */
        color: #555; /* Softer text color for descriptions */
    }
</style>
</head>
<body>
<div class="title-container">
    <h1 class="title">Total expenses chart</h1>
</div>
    <!-- Chart section -->
    <div class="chart-container">
        <canvas id="myChart"></canvas>
    </div>
    <script>
        // Data and config from Python
        const data = {'labels': ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09', '2023-10', '2023-11'], 'datasets': [{'data': ['300.0', '120.0', '45.0', '90.0', '55.0', '80.0', '200.0', '75.0', '181.5625', '172.6315789473684', '132.50'], 'backgroundColor': 'rgba(75, 192, 192, 0.5)', 'borderColor': 'rgba(75, 192, 192, 1)', 'borderWidth': 1}]};
        const config = {"type": "line", "data": {"labels": ["2023-01", "2023-02", "2023-03", "2023-04", "2023-05", "2023-06", "2023-07", "2023-08", "2023-09", "2023-10", "2023-11"], "datasets": [{"data": ["300.0", "120.0", "45.0", "90.0", "55.0", "80.0", "200.0", "75.0", "181.5625", "172.6315789473684", "132.50"], "backgroundColor": "rgba(75, 192, 192, 0.5)", "borderColor": "rgba(75, 192, 192, 1)", "borderWidth": 1}]}, "options": {"plugins": {"legend": {"display": false}}, "responsive": true, "maintainAspectRatio": false, "scales": {"y": {"beginAtZero": true, "title": {"display": true, "text": "Total expenses"}}}}};
        // Render the chart
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>
    <!-- Explanation section -->
    <div class="description-container">
        <p id="chart-description">This line chart displays the total expenses over the first eleven months of 2023. The chart shows a fluctuating trend in expenses, with the highest expenditure recorded in January at $300.0 and the lowest in March at $45.0. The chart also indicates a slight increase in expenses towards the end of the year, with the last month showing a significant increase to $132.50.</p>
    </div>
</body>
</html>