Thiết kế website giá rẻ

Question

I’ve had a problem with a script for a few days now. What does this script do? It processes a csv file and displays it as a diagram. Unfortunately, when my code processes the data, no diagram (bar or line diagram) is displayed. I wanted to know if anyone here could help me.

Actually, I want to get 2 diagrams for all the data from the csv at the end and then I should also have a diagram for each selected display name. If you test this code and process the data from the csv file, you will see the selection list. As I said, unfortunately I don’t see any diagrams.

document.getElementById('home').addEventListener('click', function() {
            window.location.href = 'https://datenlotsen.de';
        });

        document.getElementById('anzeigenBtn').addEventListener('click', function() {
            updateChart();
            updateSummaryChart();
        });

        document.getElementById('nextPage').addEventListener('click', function() {
            document.getElementById('firstPage').style.display = 'none';
            document.getElementById('secondPage').style.display = 'block';
        });

        document.getElementById('prevPage1').addEventListener('click', function() {
            document.getElementById('secondPage').style.display = 'none';
            document.getElementById('firstPage').style.display = 'block';
        });

        document.getElementById('nextPage2').addEventListener('click', function() {
            document.getElementById('secondPage').style.display = 'none';
            document.getElementById('thirdPage').style.display = 'block';
        });

        document.getElementById('prevPage2').addEventListener('click', function() {
            document.getElementById('thirdPage').style.display = 'none';
            document.getElementById('secondPage').style.display = 'block';
        });

        document.getElementById('prevPage3').addEventListener('click', function() {
            document.getElementById('thirdPage').style.display = 'none';
            document.getElementById('secondPage').style.display = 'block';
        });

        let lines = [];
        const yLabels = [
            'A',
            'B',
            'C',
            'D',
            'E',
            'F',
            'G',
            'H',
            'I',
            'J',
            'K',
            'L',
            'M',
            'N',
            'O',
            'P',
            'Q',
            'R',
            'S',
            'T',
            'U',
            'V',
            'W',
            'X',
            'Y',
            'Z',
            
        ];



        function processData(csv) {
            const allLines = csv.split('n');
            lines = allLines.slice(1); // Überschrift entfernen
            const anzeigenameSet = new Set();
            lines.forEach(line => {
                const [, , , , , anzeigename] = line.split(',').map(item => item.trim());
                anzeigenameSet.add(anzeigename);
            });
            const anzeigenameSelect = document.getElementById('anzeigename');
            anzeigenameSet.forEach(name => {
                const option = document.createElement('option');
                option.value = name;
                option.text = name;
                anzeigenameSelect.appendChild(option);
            });
        }

        function updateChart() {
            const startDate = document.getElementById('startDatum').value;
            const endDate = document.getElementById('endDatum').value;
            const anzeigename = document.getElementById('anzeigename').value;
            const filteredData = lines.filter(line => {
                const [datum, , , , , name] = line.split(',').map(item => item.trim());
                const isWithinDateRange = (!startDate || datum >= startDate) && (!endDate || datum <= endDate);
                const isMatchingAnzeigename = !anzeigename || name === anzeigename;
                return isWithinDateRange && isMatchingAnzeigename;
            });
            const chartData = prepareChartData(filteredData);
            updateBarChart(chartData);
            updateLineChart(chartData);
            document.querySelector('.page-navigation').style.display = 'flex';
        }

        function updateSummaryChart() {
            const startDate = document.getElementById('startDatum').value;
            const endDate = document.getElementById('endDatum').value;
            const anzeigename = document.getElementById('anzeigename').value;
           

 const filteredData = lines.filter(line => {
                const [datum, , , , , name] = line.split(',').map(item => item.trim());
                const isWithinDateRange = (!startDate || datum >= startDate) && (!endDate || datum <= endDate);
                const isMatchingAnzeigename = !anzeigename || name === anzeigename;
                return isWithinDateRange && isMatchingAnzeigename;
            });
            const summaryChartData = prepareSummaryChartData(filteredData);
            updateSummaryBarChart(summaryChartData);
        }

        function prepareChartData(data) {
            const aggregatedData = aggregateData(data);
            const labels = yLabels.sort(sortLabels);
            const datasets = [
                { label: 'Neu', backgroundColor: '#76b7b2', borderColor: 'rgba(75, 192, 192, 2)', borderWidth: 1, data: [] },
                { label: 'Gelesen', backgroundColor: '#ff7f0e', borderColor: 'rgba(255, 159, 64, 2)', borderWidth: 1, data: [] },
                { label: 'Geändert', backgroundColor: '#aec7e8', borderColor: 'rgba(75, 192, 192, 2)', borderWidth: 1, data: [] },
                { label: 'Gelöscht', backgroundColor: '#ffbb78', borderColor: 'rgba(255, 159, 64, 2)', borderWidth: 1, data: [] }
            ];
            labels.forEach(label => {
                const labelData = aggregatedData[label] || {};
                datasets.forEach(dataset => {
                    dataset.data.push(labelData[dataset.label] || 0);
                });
            });
            return { labels, datasets };
        }

        function prepareSummaryChartData(data) {
            const aggregatedData = aggregateData(data);
            const labels = yLabels.sort(sortLabels);
            const summaryData = labels.map(label => {
                const labelData = aggregatedData[label] || {};
                return Object.values(labelData).reduce((sum, value) => sum + value, 0);
            });
            return { labels, summaryData };
        }

        function aggregateData(data) {
            const aggregatedData = {};
            data.forEach(line => {
                const [datum, art, , typ] = line.split(',').map(item => item.trim());
                if (!aggregatedData[typ]) {
                    aggregatedData[typ] = { 'Neu': 0, 'Gelesen': 0, 'Geändert': 0, 'Gelöscht': 0 };
                }
                aggregatedData[typ][art] += 1;
            });
            return aggregatedData;
        }

        function sortLabels(a, b) {
            const germanTerms = ['Vertrag-Dokument', 'Rechnung-Dokument'];
            const indexA = germanTerms.indexOf(a);
            const indexB = germanTerms.indexOf(b);
            return indexA - indexB;
        }

        let barChart, lineChart, summaryBarChart;

        function updateBarChart(data) {
            const ctx = document.getElementById('barChart').getContext('2d');
            if (barChart) barChart.destroy();
            barChart = new Chart(ctx, {
                type: 'bar',
                data: data,
                options: {
                    responsive: true,
                    scales: {
                        y: { beginAtZero: true }
                    },
                    plugins: {
                        datalabels: {
                            color: 'white',
                            display: function (context) {
                                return context.dataset.data[context.dataIndex] !== 0; // Nur Werte anzeigen, die nicht 0 sind
                            }
                        }
                    }
                }
            });
        }

        function updateLineChart(data) {
            const ctx = document.getElementById('lineChart').getContext('2d');
            if (lineChart) lineChart.destroy();
            lineChart = new Chart(ctx, {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });
        }

        function updateSummaryBarChart(data) {
            const ctx = document.getElementById('summaryBarChart').getContext('2d');
            if (summaryBarChart) summaryBarChart.destroy();
            summaryBarChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: 'Gesamtzahl der Ereignisse',
                        backgroundColor: '#4caf50',
                        borderColor: 'rgba(75, 192, 192, 2)',
                        borderWidth: 1,
                        data: data.summaryData
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: { beginAtZero: true }
                    },
                    plugins: {
                        datalabels: {
                            color: 'white',
                            display: function (context) {
                                return context.dataset.data[context.dataIndex] !== 0; // Nur Werte anzeigen, die nicht 0 sind
                            }
                        }
                    }
                }
            });
        }

        document.getElementById('csvInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    processData(e.target.result);
                };
                reader.readAsText(file);
            }
        });

 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>statistik</title>
    <!-- Chart.js einbinden -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            font-size: 13px;
            background-color: #c0d8ff;
        }
        .container {
            max-width: 1340px;
            margin: 10px auto;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-height: 1600px; /* Set initial max-height to 500px */
            transition: max-height 0.5s ease;
            overflow: hidden; /* Prevent scrollbars */
        }
        .container.expanded {
            max-height: 2000px; /* Increase max-height when expanded */
        }
        h2 {
            text-align: center;
            margin: 0;
            color: #333;
            flex-grow: 1;
            font-size: 20px;
            margin-right: 60px;
        }
        h3 {
            text-align: center;
            margin: 0;      
            font-weight: bold;
            color: #555;
        }
        .header {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #b5dcb3;
            padding: 10px;
            position: relative;
        }
        .header h2 {
            padding: 6px;
            margin: 0;
            color: #333;
            flex-grow: 1;
            font-size: 20px;
            margin-right: 0px;
        }
        .header button {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
        .btn {
            background-color: DodgerBlue;
            border: none;
            color: white;
            padding: 12px 16px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px; /* Adjust width for larger button */
            height: 40px; /* Adjust height for larger button */
            margin-left: -1px;
        }
        .btn i {
            font-size: 24px; /* Adjust icon size */
        }
        .btn:hover {
            background-color: RoyalBlue;
        }
        .select-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0;
        }
        .select-group {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }
        label {
            margin-right: 10px;
            font-weight: bold;
            color: #555;
        }
        input[type="file"], input[type="date"], select {
            padding: 8px;
            font-size: 14px;
            flex-grow: 1;
            max-width: 200px;
            border: 1px solid #ccc;
            border-radius: 3px;
            outline: none;
        }
        input[type="file"] {
            border: none; /* Linie um das Eingabefeld entfernen */
        }
        select, input[type="date"], button {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            outline: none;
            margin-right: 10px;
        }
        button {
            padding: 8px;
            font-size: 14px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 3px;
            margin-left: 6px;
        }
        button:hover {
            background-color: #45a049;
        }
        #anzeigenBtn {
            width: 160px; /* Neue Breite für die Taste */
            height: 30px;
        }
        .charts-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .chart-column {
            width: 100%;
            color: black;
        }
        canvas {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }
        .page-navigation {
            display: flex; /* Initial display set to flex */
            justify-content: center;
            margin-top: 20px;
        }
        /* New style for the second and third page */
        #secondPage, #thirdPage {
            overflow: visible; /* Ensure content is visible */
            max-height: none; /* Allow content to expand */
            height: auto; /* Adjust height automatically */
        }
        /* Make the button invisible */
        #prevPage2 {
            display: none;
        }

<div class="container" id="firstPage">
        <div class="header">
            <button class="btn" id="home"><i class="fa fa-home"></i></button>
            <h2>Statistische</h2>
        </div>
        <hr style="border-width: 1px;">
        <div class="select-container" style="margin-top: 1px; margin-bottom: 1px;">
            <div>
                <label for="csvInput" style="margin-left: 20px;">Datei auswählen:</label>
                <input type="file" id="csvInput" accept=".csv">
            </div>
            <div class="select-group">
                <label for="anzeigename">Anzeigename:</label>
                <select id="anzeigename">
                    <option value="">Alle</option>
                </select>
            </div>
            <div class="select-container" style="margin-top: 1px; margin-bottom: 1px;">
                <div class="select-group">
                    <label for="startDatum">Startdatum:</label>
                    <input type="date" id="startDatum">
                </div>
                <div class="select-group" style="margin-top: 1px; margin-bottom: 1px;">
                    <label for="endDatum">Enddatum:</label>
                    <input type="date" id="endDatum">
                </div>
                <button id="anzeigenBtn" style="margin-top: 1px; margin-bottom: 1px;">Anzeigen</button>
            </div>
        </div>
        <hr style="border-width: 1px;">
        <div class="charts-row">
            <div class="chart-column">
                <canvas id="barChart"></canvas>
                <h3 id="barChartTitle" style="text-align: center; margin-top: 10px;"></h3>
            </div>
        </div>
        <hr style="border-width: 1px;">
        <div class="page-navigation">
            <button id="nextPage">Zur nächsten Seite</button>
        </div>
    </div>
    <div class="container" id="secondPage" style="display: none;">
        <div class="header">
            <h2>Statistische</h2>
        </div>
        <hr style="margin-bottom: 50px;">
        <div class="charts-row">
            <div class="chart-column">
                <canvas id="lineChart"></canvas>
                <h3 id="lineChartTitle" style="text-align: center; margin-top: 10px;"></h3>
            </div>
        </div>
        <hr style="border-width: 1px;">
        <div class="page-navigation">
            <button id="prevPage1">Zurück zur ersten Seite</button>
            <button id="nextPage2">Zur nächsten Seite</button>
        </div>
    </div>
    <div class="container" id="thirdPage" style="display: none;">
        <div class="header">
            <button id="prevPage2">Zurück zur zweiten Seite</button>
            <h2>Statistische</h2>
        </div>
        <hr style="margin-bottom: 50px;">
        <div class="charts-row">
            <div class="chart-column">
                <h3 id="summaryTitle"></h3>
                <canvas id="summaryBarChart"></canvas>
                <h3 id="summaryBarChartTitle" style="text-align: center; margin-top: 10px;"></h3>
            </div>
        </div>
        <hr style="border-width: 1px;">
        <div class="page-navigation">
            <button id="prevPage3">Zurück zur zweiten Seite</button>
        </div>
    </div>

the file csv look like this 

Date,neu,gelesen,geaendert,geloescht,Anzeigename
2024-03-07,0,3,0,0,A
2024-03-07,0,1,57,0,B
2024-03-07,0,2,0,0,C
2024-03-07,0,1,0,9,D
2024-03-07,1,20,8,0,E
2024-03-07,0,7,0,0,F
2024-03-07,0,1,0,0,G
2024-03-07,23,1,0,0,H
2024-03-07,293,10,0,160,I
2024-03-07,0,3,0,20,XSAP J
2024-03-11,0,110,0,0,K
2024-03-11,0,2,0,0,L
2024-03-11,40,4,0,0,M
2024-03-11,0,4,0,0,N
2024-03-11,0,14,0,25,O
2024-03-11,0,2,0,0,P
2024-03-11,0,2,10,0,Q
2024-03-11,0,6,0,0,R
2024-03-11,523,2,10,150,S
2024-03-13,0,16,2,9,T
2024-03-13,0,4,0,0,U
2024-03-13,0,4,0,0,V
2024-03-13,0,14,0,0,W
2024-03-13,0,2,0,18,X
2024-03-13,0,2,0,0,Y
2024-03-13,20,6,0,0,Z

Thiết kế website giá rẻ

Danh mục

Diagramm or Graphical representation (canvas)