Update registrations_period.html

registrations_period.html

@@ -49,7 +49,7 @@
             border-color: #4CAF50;
             box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
         }
-        .chart-container {
+        #chartContainer {
             margin-top: 20px;
             display: flex;
             justify-content: center;
@@ -77,61 +77,34 @@
     <!-- Кнопка для получения данных -->
     <button onclick="fetchData()">Получить данные</button>
     
-    <!-- Контейнер для столбчатого графика -->
-    <div class="chart-container">
-        <canvas id="barChart" width="400" height="200"></canvas>
-    </div>
-
-    <!-- Контейнер для линейного графика -->
-    <div class="chart-container">
-        <canvas id="lineChart" width="400" height="200"></canvas>
+    <!-- Контейнер для графика -->
+    <div id="chartContainer">
+        <canvas id="registrationsChart" width="400" height="200"></canvas>
     </div>
 
     <script>
-        let barChart; // Переменная для хранения столбчатого графика
-        let lineChart; // Переменная для хранения линейного графика
-
-        // Цвета для линий (10 цветов)
-        const lineColors = [
-            '#FF6384', // Красный
-            '#36A2EB', // Синий
-            '#FFCE56', // Жёлтый
-            '#4BC0C0', // Бирюзовый
-            '#9966FF', // Фиолетовый
-            '#FF9F40', // Оранжевый
-            '#C9CBCF', // Серый
-            '#00CC99', // Зелёный
-            '#FF99CC', // Розовый
-            '#6666FF'  // Голубой
-        ];
-
-        // Функция для запроса данных и обновления графиков
+        let myChart; // Переменная для хранения графика
+        // Функция для запроса данных и обновления графика
         function fetchData() {
             // Получаем выбранные даты
             const startDate = document.getElementById('startDate').value;
             const endDate = document.getElementById('endDate').value;
-
             // Проверяем, что обе даты выбраны
             if (!startDate || !endDate) {
                 alert("Пожалуйста, выберите обе даты.");
                 return;
             }
-
             // Запрос данных с сервера
             fetch(`/registrations_period?start_date=${startDate}&end_date=${endDate}`)
                 .then(response => response.json())
                 .then(data => {
-                    // Если графики уже существуют, уничтожаем их
-                    if (barChart) {
-                        barChart.destroy();
+                    // Если график уже существует, уничтожаем его
+                    if (myChart) {
+                        myChart.destroy();
                     }
-                    if (lineChart) {
-                        lineChart.destroy();
-                    }
-
-                    // Создание столбчатого графика
-                    const barCtx = document.getElementById('barChart').getContext('2d');
-                    barChart = new Chart(barCtx, {
+                    // Создание нового графика
+                    const ctx = document.getElementById('registrationsChart').getContext('2d');
+                    myChart = new Chart(ctx, {
                         type: 'bar',
                         data: {
                             labels: data.labels,
@@ -174,58 +147,11 @@
                             maintainAspectRatio: false
                         }
                     });
-
-                    // Создание линейного графика
-                    const lineCtx = document.getElementById('lineChart').getContext('2d');
-                    lineChart = new Chart(lineCtx, {
-                        type: 'line',
-                        data: {
-                            labels: data.dates, // Дни периода
-                            datasets: data.daily_data.map((dataset, index) => ({
-                                label: dataset.label, // Метка
-                                data: dataset.data, // Данные за каждый день
-                                borderColor: lineColors[index % lineColors.length], // Цвет линии
-                                borderWidth: 2,
-                                fill: false
-                            }))
-                        },
-                        options: {
-                            scales: {
-                                y: {
-                                    beginAtZero: true,
-                                    grid: {
-                                        color: '#f0f0f0'
-                                    },
-                                    ticks: {
-                                        color: '#333'
-                                    }
-                                },
-                                x: {
-                                    grid: {
-                                        color: '#f0f0f0'
-                                    },
-                                    ticks: {
-                                        color: '#333'
-                                    }
-                                }
-                            },
-                            plugins: {
-                                legend: {
-                                    labels: {
-                                        color: '#333'
-                                    }
-                                }
-                            },
-                            responsive: true,
-                            maintainAspectRatio: false
-                        }
-                    });
                 })
                 .catch(error => {
                     console.error('Ошибка при получении данных:', error);
                 });
         }
-
         // Устанавливаем сегодняшнюю дату по умолчанию и загружаем данные
         window.onload = function() {
             const today = new Date().toISOString().split('T')[0];