-your-username-.github.io/Interactive X-Y chart.html at main · IPOLIPOL/-your-username-.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Running hours Chart</title>
    <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.min.mjs';

                mermaid.initialize({ startOnLoad: false, themeVariables: { lineColor: '#333333' } });

        function updateChart() {
            const rows = document.querySelectorAll('#dataTable tbody tr');
            const revenues = Array.from(rows).map(row => {
                const value = row.querySelector('td:nth-child(2)').textContent.trim();
                return parseInt(value, 10) || 0;
            });

            const chartCode = `
                %%{init: { 'themeVariables': { 'lineColor': '#333333' } }}%%
                xychart-beta
                title "Sales Revenue"
                x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
                y-axis "Revenue (in $)" 0 --> 11000
                line [${revenues.join(', ')}]
            `;

            const chartContainer = document.getElementById('chartContainer');
            chartContainer.innerHTML = `<div class="mermaid">${chartCode}</div>`;
            mermaid.init();
        }

        document.addEventListener('DOMContentLoaded', () => {
            const table = document.getElementById('dataTable');

            table.addEventListener('input', () => {
                updateChart();
            });

            // Initial chart render
            updateChart();
        });
    </script>
    <style>
        body {
            font-family: Arial;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
        td:nth-child(2) {
            background-color: #f9f9f9;
        }
        td {
            min-width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Dynamic Running hours Chart</h1>

    <table id="dataTable">
        <thead>
            <tr>
                <th>Month</th>
                <th>Running hours</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>January</td><td contenteditable="true">5000</td></tr>
            <tr><td>February</td><td contenteditable="true">6000</td></tr>
            <tr><td>March</td><td contenteditable="true">7500</td></tr>
            <tr><td>April</td><td contenteditable="true">8200</td></tr>
            <tr><td>May</td><td contenteditable="true">9500</td></tr>
            <tr><td>June</td><td contenteditable="true">10500</td></tr>
            <tr><td>July</td><td contenteditable="true">11000</td></tr>
            <tr><td>August</td><td contenteditable="true">10200</td></tr>
            <tr><td>September</td><td contenteditable="true">9200</td></tr>
            <tr><td>October</td><td contenteditable="true">8500</td></tr>
            <tr><td>November</td><td contenteditable="true">7000</td></tr>
            <tr><td>December</td><td contenteditable="true">6000</td></tr>
        </tbody>
    </table>

    <div id="chartContainer"></div>
</body>
</html>