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);
         }
-        #chartContainer {
+        .chart-container {
             margin-top: 20px;
             display: flex;
             justify-content: center;
@@ -77,15 +77,35 @@
     <!-- Кнопка для получения данных -->
     <button onclick="fetchData()">Получить данные</button>
     
-    <!-- Контейнер для графика -->
-    <div id="chartContainer">
-        <canvas id="registrationsChart" width="400" height="200"></canvas>
+    <!-- Контейнер для столбчатого графика -->
+    <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>
 
     <script>
-        let myChart; // Переменная для хранения графика
+        let barChart; // Переменная для хранения столбчатого графика
+        let lineChart; // Переменная для хранения линейного графика
+
+        // Цвета для линий (10 цветов)
+        const lineColors = [
+            '#FF6384', // Красный
+            '#36A2EB', // Синий
+            '#FFCE56', // Жёлтый
+            '#4BC0C0', // Бирюзовый
+            '#9966FF', // Фиолетовый
+            '#FF9F40', // Оранжевый
+            '#C9CBCF', // Серый
+            '#00CC99', // Зелёный
+            '#FF99CC', // Розовый
+            '#6666FF'  // Голубой
+        ];
 
-        // Функция для запроса данных и обновления графика
+        // Функция для запроса данных и обновления графиков
         function fetchData() {
             // Получаем выбранные даты
             const startDate = document.getElementById('startDate').value;
@@ -101,14 +121,17 @@
             fetch(`/registrations_period?start_date=${startDate}&end_date=${endDate}`)
                 .then(response => response.json())
                 .then(data => {
-                    // Если график уже существует, уничтожаем его
-                    if (myChart) {
-                        myChart.destroy();
+                    // Если графики уже существуют, уничтожаем их
+                    if (barChart) {
+                        barChart.destroy();
+                    }
+                    if (lineChart) {
+                        lineChart.destroy();
                     }
 
-                    // Создание нового графика
-                    const ctx = document.getElementById('registrationsChart').getContext('2d');
-                    myChart = new Chart(ctx, {
+                    // Создание столбчатого графика
+                    const barCtx = document.getElementById('barChart').getContext('2d');
+                    barChart = new Chart(barCtx, {
                         type: 'bar',
                         data: {
                             labels: data.labels,
@@ -151,6 +174,52 @@
                             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);