Chart.js Polar Area Диаграммы

создать с помощью chart.js Polar Area Chart статистику за месяц за неделю данные разных цветов На две диаграммы в течении месяца последние 30 дней, другую за неделю последний 7 дней и третью за все время 1 Сколько было заявок за месяц Сколько было движений по заявка всего в течении месяца Сколько сейчас в работе за месяц заявок Сколько всего не приобретённых заявок за месяц Сколько всего добавлено новых заявок за месяц 2 Сколько было движение за последнюю неделю по сделкам Сколько сейчас в работе за неделю по сделкам Сколько всего не приобретённых за неделю Сколько было добавлено новых в течении недели

Вот пример кода для создания трёх диаграмм типа Polar Area Chart с помощью Chart.js, которые отображают:

Статистику за последние 30 дней (месяц)
Статистику за последние 7 дней (неделя)
Общую статистику за всё время

📊 Пример HTML с использованием Chart.js (v4+):

html
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Статистика заявок</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    canvas { margin: 30px; max-width: 500px; }
    .chart-container { display: flex; flex-wrap: wrap; justify-content: center; }
  </style>
</head>
<body>
  <h2>Статистика за месяц</h2>
  <div class="chart-container">
    <canvas id="monthChart"></canvas>
  </div>

  <h2>Статистика за неделю</h2>
  <div class="chart-container">
    <canvas id="weekChart"></canvas>
  </div>

  <h2>Общая статистика</h2>
  <div class="chart-container">
    <canvas id="totalChart"></canvas>
  </div>

  <script>
    // Примерные данные, замените их на реальные
    const monthData = {
      labels: [
        'Заявок за месяц',
        'Движений по заявкам',
        'В работе (месяц)',
        'Не приобретены (месяц)',
        'Новые заявки (месяц)'
      ],
      datasets: [{
        data: [150, 320, 45, 25, 80],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
      }]
    };

    const weekData = {
      labels: [
        'Движений за неделю',
        'В работе (неделя)',
        'Не приобретены (неделя)',
        'Новые заявки (неделя)'
      ],
      datasets: [{
        data: [75, 20, 10, 40],
        backgroundColor: ['#FF9F40', '#FF6384', '#36A2EB', '#FFCE56']
      }]
    };

    const totalData = {
      labels: [
        'Всего заявок',
        'Всего движений',
        'Всего в работе',
        'Всего не приобретено',
        'Всего новых заявок'
      ],
      datasets: [{
        data: [1200, 3500, 300, 150, 700],
        backgroundColor: ['#4BC0C0', '#9966FF', '#FF9F40', '#C9CBCF', '#FF6384']
      }]
    };

    const options = {
      responsive: true,
      plugins: {
        legend: { position: 'bottom' },
        title: { display: false }
      }
    };

    new Chart(document.getElementById('monthChart'), {
      type: 'polarArea',
      data: monthData,
      options: options
    });

    new Chart(document.getElementById('weekChart'), {
      type: 'polarArea',
      data: weekData,
      options: options
    });

    new Chart(document.getElementById('totalChart'), {
      type: 'polarArea',
      data: totalData,
      options: options
    });
  </script>
</body>
</html>

🧩 Где редактировать данные?

В JavaScript частях, в массивах data:

js
data: [150, 320, 45, 25, 80] // ← это числа, которые вы можете заменить на свои

⚙️ Интеграция с данными

Если вы берёте данные с бэкенда (например, на PHP или Python), вы можете динамически вставлять их в JavaScript через шаблонизатор или API.

Хочешь, я помогу связать этот пример с вашим бэкендом (например, с Django, Flask, Laravel, Node.js)?

добавить bootstrap и горизонтально разместить 3 диаграммы

Вот обновлённый HTML-код с подключённым Bootstrap 5 и горизонтальным размещением трёх диаграмм (в одну строку на больших экранах и адаптивной перестройкой на маленьких).

✅ Обновлённый HTML с Bootstrap и горизонтальным расположением диаграмм:

html
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Статистика заявок</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    .chart-card {
      padding: 20px;
      text-align: center;
    }
    canvas {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body class="bg-light">

  <div class="container py-5">
    <h2 class="text-center mb-4">Статистика заявок</h2>

    <div class="row g-4 justify-content-center">
      <div class="col-12 col-md-4 chart-card bg-white shadow rounded">
        <h5>За месяц</h5>
        <canvas id="monthChart"></canvas>
      </div>

      <div class="col-12 col-md-4 chart-card bg-white shadow rounded">
        <h5>За неделю</h5>
        <canvas id="weekChart"></canvas>
      </div>

      <div class="col-12 col-md-4 chart-card bg-white shadow rounded">
        <h5>За всё время</h5>
        <canvas id="totalChart"></canvas>
      </div>
    </div>
  </div>

  <script>
    // Примерные данные, замените на реальные
    const monthData = {
      labels: [
        'Заявок за месяц',
        'Движений по заявкам',
        'В работе (месяц)',
        'Не приобретены (месяц)',
        'Новые заявки (месяц)'
      ],
      datasets: [{
        data: [150, 320, 45, 25, 80],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
      }]
    };

    const weekData = {
      labels: [
        'Движений за неделю',
        'В работе (неделя)',
        'Не приобретены (неделя)',
        'Новые заявки (неделя)'
      ],
      datasets: [{
        data: [75, 20, 10, 40],
        backgroundColor: ['#FF9F40', '#FF6384', '#36A2EB', '#FFCE56']
      }]
    };

    const totalData = {
      labels: [
        'Всего заявок',
        'Всего движений',
        'Всего в работе',
        'Всего не приобретено',
        'Всего новых заявок'
      ],
      datasets: [{
        data: [1200, 3500, 300, 150, 700],
        backgroundColor: ['#4BC0C0', '#9966FF', '#FF9F40', '#C9CBCF', '#FF6384']
      }]
    };

    const options = {
      responsive: true,
      plugins: {
        legend: { position: 'bottom' },
        title: { display: false }
      }
    };

    new Chart(document.getElementById('monthChart'), {
      type: 'polarArea',
      data: monthData,
      options: options
    });

    new Chart(document.getElementById('weekChart'), {
      type: 'polarArea',
      data: weekData,
      options: options
    });

    new Chart(document.getElementById('totalChart'), {
      type: 'polarArea',
      data: totalData,
      options: options
    });
  </script>
</body>
</html>

📱 Что добавлено:

✅ Bootstrap 5 для сетки и адаптивности
✅ Три колонки с классами col-md-4 для горизонтального расположения на экранах md+
✅ Адаптация под мобильные: на маленьких экранах каждая диаграмма будет в одной строке
✅ Отступы и тени через Bootstrap-классы (shadow, rounded, bg-white)

Если ты хочешь сделать переключение между временными периодами (например, через вкладки), могу помочь добавить это.

Добавить ajax запрос для получения данных для каждой диаграммы

Хорошо! Ниже я покажу, как реализовать загрузку данных для каждой диаграммы через AJAX (с использованием Fetch API). Мы сделаем это следующим образом:

✅ Что будет реализовано:

AJAX-запросы к API-эндпоинтам:
- /api/month
- /api/week
- /api/total
После получения данных — инициализация соответствующей диаграммы
Все данные загружаются асинхронно

🔧 Пример Backend API (структура JSON, которую мы ожидаем):

json
{
  "labels": [
    "Название 1",
    "Название 2"
  ],
  "data": [100, 200],
  "colors": ["#FF6384", "#36A2EB"]
}

💻 HTML + Bootstrap + Chart.js + AJAX (Fetch API)

html
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Статистика заявок</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .chart-card {
      padding: 20px;
      text-align: center;
    }
    canvas {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body class="bg-light">

  <div class="container py-5">
    <h2 class="text-center mb-4">Статистика заявок</h2>

    <div class="row g-4 justify-content-center">
      <div class="col-12 col-md-4 chart-card bg-white shadow rounded">
        <h5>За месяц</h5>
        <canvas id="monthChart"></canvas>
      </div>

      <div class="col-12 col-md-4 chart-card bg-white shadow rounded">
        <h5>За неделю</h5>
        <canvas id="weekChart"></canvas>
      </div>

      <div class="col-12 col-md-4 chart-card bg-white shadow rounded">
        <h5>За всё время</h5>
        <canvas id="totalChart"></canvas>
      </div>
    </div>
  </div>

  <script>
    // Функция загрузки данных и инициализации диаграммы
    async function loadChartData(url, canvasId) {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error(`Ошибка загрузки: ${response.status}`);
        const result = await response.json();

        const chart = new Chart(document.getElementById(canvasId), {
          type: 'polarArea',
          data: {
            labels: result.labels,
            datasets: [{
              data: result.data,
              backgroundColor: result.colors
            }]
          },
          options: {
            responsive: true,
            plugins: {
              legend: { position: 'bottom' },
              title: { display: false }
            }
          }
        });

      } catch (error) {
        console.error(`Ошибка при загрузке данных для ${canvasId}:`, error);
      }
    }

    // Загружаем данные для всех диаграмм
    loadChartData('/api/month', 'monthChart');
    loadChartData('/api/week', 'weekChart');
    loadChartData('/api/total', 'totalChart');
  </script>

</body>
</html>

⚙️ Как подготовить backend (пример на Python Flask):

python
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/month')
def month_data():
    return jsonify({
        "labels": ["Заявок", "Движений", "В работе", "Не приобретено", "Новые"],
        "data": [150, 320, 45, 25, 80],
        "colors": ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"]
    })

@app.route('/api/week')
def week_data():
    return jsonify({
        "labels": ["Движений", "В работе", "Не приобретено", "Новые"],
        "data": [75, 20, 10, 40],
        "colors": ["#FF9F40", "#FF6384", "#36A2EB", "#FFCE56"]
    })

@app.route('/api/total')
def total_data():
    return jsonify({
        "labels": ["Всего заявок", "Всего движений", "В работе", "Не приобретено", "Новые"],
        "data": [1200, 3500, 300, 150, 700],
        "colors": ["#4BC0C0", "#9966FF", "#FF9F40", "#C9CBCF", "#FF6384"]
    })

if __name__ == '__main__':
    app.run(debug=True)

✅ Преимущества:

Диаграммы не блокируют отрисовку страницы
Данные могут обновляться без перезагрузки
Подходит для SPA/интеграции с API

Хочешь, я помогу реализовать этот API на PHP, Node.js, Laravel или Django?

Давай на PHP и более подробно все расписать

Отлично! Давайте подробно разберём, как реализовать динамическую подгрузку данных для диаграмм с использованием Chart.js, AJAX и PHP (без фреймворков).

🔧 Структура проекта:

bash
/chart-dashboard/
├── index.html         ← Главная страница с диаграммами
├── api/
│   ├── month.php      ← Данные за месяц
│   ├── week.php       ← Данные за неделю
│   └── total.php      ← Общая статистика

📄 Шаг 1. HTML-файл (index.html)

html
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Статистика заявок</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .chart-card {
      padding: 20px;
      text-align: center;
    }
    canvas {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body class="bg-light">

  <div class="container py-5">
    <h2 class="text-center mb-4">Статистика заявок</h2>

    <div class="row g-4 justify-content-center">
      <div class="col-12 col-md-4 chart-card bg-white shadow rounded">
        <h5>За месяц</h5>
        <canvas id="monthChart"></canvas>
      </div>

      <div class="col-12 col-md-4 chart-card bg-white shadow rounded">
        <h5>За неделю</h5>
        <canvas id="weekChart"></canvas>
      </div>

      <div class="col-12 col-md-4 chart-card bg-white shadow rounded">
        <h5>За всё время</h5>
        <canvas id="totalChart"></canvas>
      </div>
    </div>
  </div>

  <script>
    async function loadChartData(url, canvasId) {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error(`Ошибка загрузки: ${response.status}`);
        const result = await response.json();

        new Chart(document.getElementById(canvasId), {
          type: 'polarArea',
          data: {
            labels: result.labels,
            datasets: [{
              data: result.data,
              backgroundColor: result.colors
            }]
          },
          options: {
            responsive: true,
            plugins: {
              legend: { position: 'bottom' },
              title: { display: false }
            }
          }
        });

      } catch (error) {
        console.error(`Ошибка при загрузке данных для ${canvasId}:`, error);
      }
    }

    // Загружаем диаграммы
    loadChartData('api/month.php', 'monthChart');
    loadChartData('api/week.php', 'weekChart');
    loadChartData('api/total.php', 'totalChart');
  </script>

</body>
</html>

📁 Шаг 2. Создание API-обработчиков на PHP

Все файлы в папке /api/. Каждый из них возвращает JSON.

📄 `api/month.php`

php
<?php
header('Content-Type: application/json');

$data = [
  "labels" => [
    "Заявок за месяц",
    "Движений по заявкам",
    "В работе (месяц)",
    "Не приобретено",
    "Новые заявки"
  ],
  "data" => [150, 320, 45, 25, 80],
  "colors" => ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"]
];

echo json_encode($data);

📄 `api/week.php`

php
<?php
header('Content-Type: application/json');

$data = [
  "labels" => [
    "Движений за неделю",
    "В работе (неделя)",
    "Не приобретено (неделя)",
    "Новые заявки (неделя)"
  ],
  "data" => [75, 20, 10, 40],
  "colors" => ["#FF9F40", "#FF6384", "#36A2EB", "#FFCE56"]
];

echo json_encode($data);

📄 `api/total.php`

php
<?php
header('Content-Type: application/json');

$data = [
  "labels" => [
    "Всего заявок",
    "Всего движений",
    "В работе всего",
    "Не приобретено всего",
    "Всего новых"
  ],
  "data" => [1200, 3500, 300, 150, 700],
  "colors" => ["#4BC0C0", "#9966FF", "#FF9F40", "#C9CBCF", "#FF6384"]
];

echo json_encode($data);

📌 Итог:

Теперь у вас:

✅ Bootstrap-интерфейс
✅ Chart.js диаграммы
✅ AJAX-загрузка данных из PHP
✅ Каждая диаграмма работает независимо и загружает данные динамически

🚀 Что дальше?

Хочешь подключить это к базе данных (MySQL)? Я могу показать пример, как заменить статические массивы в PHP-файлах на реальные данные из БД.

Подготовить запросы к sqlite без PDO на php Взять данные из таблицы deal_stage колонки с датой количество Выбрать в таблице orders в колонке deal_update (DATETIME) с датами Сколько было всего движения по дате за неделю за месяц Выбрать в таблице orders в колонке deal_update (DATETIME) с датами и с колонкой status_deal=100 Сколько было всего Не приобретено по дате за неделю за месяц Выбрать таблицу message с колонкой date_create (DATETIME) с датой и с одним и тем же order_id (integer) их может быть много с одни и тем order_id Надо подчитать сколько именно записей количества date_create Сколько за последние 30 дней и за последние 7 дней Было в работе заявок Новые заявки выбрать количество записей deal_stage в колонке deal_create (DATETIME) по дате за месяц и за неделю последние В order_id(integer) повторяются не должны повторятся в количестве

Отлично! Давайте подготовим нужные SQL-запросы к базе SQLite, используя чистый PHP без PDO (через sqlite3). Также подробно прокомментирую, что делает каждый запрос.

📋 База данных (предположим `database.sqlite`) содержит таблицы:

orders
deal_stage
message

✅ Подключение к SQLite (без PDO)

php
<?php
$db = new SQLite3('database.sqlite');
?>

1️⃣ Сколько было движений по заявкам (`deal_update`) за неделю и месяц из таблицы `orders`

php
<?php
$weekMovements = $db->querySingle("SELECT COUNT(*) FROM orders WHERE deal_update >= datetime('now', '-7 days')");
$monthMovements = $db->querySingle("SELECT COUNT(*) FROM orders WHERE deal_update >= datetime('now', '-30 days')");
?>

2️⃣ Сколько заявок не были приобретены (`status_deal = 100`) за неделю и месяц

php
<?php
$weekUnacquired = $db->querySingle("
    SELECT COUNT(*) FROM orders 
    WHERE status_deal = 100 AND deal_update >= datetime('now', '-7 days')
");

$monthUnacquired = $db->querySingle("
    SELECT COUNT(*) FROM orders 
    WHERE status_deal = 100 AND deal_update >= datetime('now', '-30 days')
");
?>

3️⃣ Сколько заявок было в работе — по таблице `message`, где:

Учитывается date_create
Один и тот же order_id может повторяться
Надо посчитать уникальные order_id, у которых были сообщения в нужный период

php
<?php
$inWorkWeek = $db->querySingle("
    SELECT COUNT(DISTINCT order_id) FROM message 
    WHERE date_create >= datetime('now', '-7 days')
");

$inWorkMonth = $db->querySingle("
    SELECT COUNT(DISTINCT order_id) FROM message 
    WHERE date_create >= datetime('now', '-30 days')
");
?>

4️⃣ Количество новых заявок за неделю и месяц — по `deal_stage.deal_create`, учитывая уникальные `order_id`

php
<?php
$newOrdersWeek = $db->querySingle("
    SELECT COUNT(DISTINCT order_id) FROM deal_stage 
    WHERE deal_create >= datetime('now', '-7 days')
");

$newOrdersMonth = $db->querySingle("
    SELECT COUNT(DISTINCT order_id) FROM deal_stage 
    WHERE deal_create >= datetime('now', '-30 days')
");
?>

🧩 Собрать всё вместе:

php
<?php
$db = new SQLite3('database.sqlite');

$data = [
    "week" => [
        "movements" => $db->querySingle("SELECT COUNT(*) FROM orders WHERE deal_update >= datetime('now', '-7 days')"),
        "unacquired" => $db->querySingle("SELECT COUNT(*) FROM orders WHERE status_deal = 100 AND deal_update >= datetime('now', '-7 days')"),
        "in_work" => $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM message WHERE date_create >= datetime('now', '-7 days')"),
        "new_orders" => $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM deal_stage WHERE deal_create >= datetime('now', '-7 days')")
    ],
    "month" => [
        "movements" => $db->querySingle("SELECT COUNT(*) FROM orders WHERE deal_update >= datetime('now', '-30 days')"),
        "unacquired" => $db->querySingle("SELECT COUNT(*) FROM orders WHERE status_deal = 100 AND deal_update >= datetime('now', '-30 days')"),
        "in_work" => $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM message WHERE date_create >= datetime('now', '-30 days')"),
        "new_orders" => $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM deal_stage WHERE deal_create >= datetime('now', '-30 days')")
    ]
];

header('Content-Type: application/json');
echo json_encode($data);
?>

📤 Пример ответа JSON:

json
{
  "week": {
    "movements": 75,
    "unacquired": 10,
    "in_work": 20,
    "new_orders": 30
  },
  "month": {
    "movements": 320,
    "unacquired": 25,
    "in_work": 45,
    "new_orders": 80
  }
}

✅ Применение:

Вы можете использовать это как один API-эндпоинт, например api/stats.php, и по нему строить сразу две диаграммы: за неделю и за месяц.

Хочешь — могу подготовить chart.js код, который берёт данные сразу из такого JSON и отрисовывает обе диаграммы.

Давай все соберем вместе запрос php sqlite и chartjs

Отлично! Сейчас соберём полный рабочий пример на чистом PHP + SQLite + Chart.js + Bootstrap, который:

📦 Делает следующее:

Читает данные из базы SQLite (таблицы: orders, message, deal_stage)
Возвращает агрегированные данные по заявкам:
- за неделю
- за месяц
Отдаёт эти данные через PHP API
Загружает данные на клиенте через fetch()
Отображает 2 диаграммы Chart.js (Polar Area):
- за неделю
- за месяц

📁 Структура проекта:

bash
/chart-app/
├── db.sqlite            ← SQLite база
├── index.html           ← Веб-интерфейс
└── api.php              ← PHP-эндпоинт с запросами к базе

🧱 1. Создаём SQLite базу (пример вручную)

sql
-- Пример таблиц (можно выполнить через SQLite браузер)

CREATE TABLE orders (
  id INTEGER PRIMARY KEY,
  deal_update DATETIME,
  status_deal INTEGER
);

CREATE TABLE message (
  id INTEGER PRIMARY KEY,
  order_id INTEGER,
  date_create DATETIME
);

CREATE TABLE deal_stage (
  id INTEGER PRIMARY KEY,
  order_id INTEGER,
  deal_create DATETIME
);

Добавьте тестовые данные — либо вручную, либо скриптом.

📄 2. PHP: `api.php`

php
<?php
header('Content-Type: application/json');

$db = new SQLite3('db.sqlite');

// WEEK
$weekMovements = $db->querySingle("SELECT COUNT(*) FROM orders WHERE deal_update >= datetime('now', '-7 days')");
$weekUnacquired = $db->querySingle("SELECT COUNT(*) FROM orders WHERE status_deal = 100 AND deal_update >= datetime('now', '-7 days')");
$weekInWork = $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM message WHERE date_create >= datetime('now', '-7 days')");
$weekNewOrders = $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM deal_stage WHERE deal_create >= datetime('now', '-7 days')");

// MONTH
$monthMovements = $db->querySingle("SELECT COUNT(*) FROM orders WHERE deal_update >= datetime('now', '-30 days')");
$monthUnacquired = $db->querySingle("SELECT COUNT(*) FROM orders WHERE status_deal = 100 AND deal_update >= datetime('now', '-30 days')");
$monthInWork = $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM message WHERE date_create >= datetime('now', '-30 days')");
$monthNewOrders = $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM deal_stage WHERE deal_create >= datetime('now', '-30 days')");

echo json_encode([
    "week" => [
        "labels" => ["Движения", "Не приобретено", "В работе", "Новые заявки"],
        "data" => [$weekMovements, $weekUnacquired, $weekInWork, $weekNewOrders],
        "colors" => ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0"]
    ],
    "month" => [
        "labels" => ["Движения", "Не приобретено", "В работе", "Новые заявки"],
        "data" => [$monthMovements, $monthUnacquired, $monthInWork, $monthNewOrders],
        "colors" => ["#9966FF", "#FF9F40", "#4BC0C0", "#FF6384"]
    ]
]);
?>

🌐 3. HTML: `index.html`

html
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Статистика заявок</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .chart-card {
      padding: 20px;
      text-align: center;
    }
    canvas {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body class="bg-light">

  <div class="container py-5">
    <h2 class="text-center mb-4">Статистика заявок</h2>

    <div class="row g-4 justify-content-center">
      <div class="col-12 col-md-6 chart-card bg-white shadow rounded">
        <h5>За неделю</h5>
        <canvas id="weekChart"></canvas>
      </div>

      <div class="col-12 col-md-6 chart-card bg-white shadow rounded">
        <h5>За месяц</h5>
        <canvas id="monthChart"></canvas>
      </div>
    </div>
  </div>

  <script>
    async function loadStats() {
      try {
        const response = await fetch('api.php');
        const result = await response.json();

        new Chart(document.getElementById('weekChart'), {
          type: 'polarArea',
          data: {
            labels: result.week.labels,
            datasets: [{
              data: result.week.data,
              backgroundColor: result.week.colors
            }]
          },
          options: {
            responsive: true,
            plugins: {
              legend: { position: 'bottom' }
            }
          }
        });

        new Chart(document.getElementById('monthChart'), {
          type: 'polarArea',
          data: {
            labels: result.month.labels,
            datasets: [{
              data: result.month.data,
              backgroundColor: result.month.colors
            }]
          },
          options: {
            responsive: true,
            plugins: {
              legend: { position: 'bottom' }
            }
          }
        });

      } catch (error) {
        console.error('Ошибка загрузки данных:', error);
      }
    }

    loadStats();
  </script>
</body>
</html>

✅ Результат:

Две диаграммы Chart.js (неделя, месяц)
Данные загружаются через AJAX из PHP (SQLite)
Bootstrap адаптивность
Без фреймворков

🚀 Что можно добавить:

Третью диаграмму "за всё время"
Кэширование
Динамический выбор периода (7/14/30/90 дней)
Фильтры по менеджерам / статусам

Хочешь — помогу это расширить. Нужно пример с базой или импортом CSV?

Еще добавить 3 диаграмму и запрос всего за все время

Отлично, добавим третью диаграмму — "за всё время", и доработаем:

api.php — добавим расчёт данных за всё время
index.html — добавим третью диаграмму (Chart.js)
Убедимся, что все 3 диаграммы отображаются горизонтально и адаптивно

📁 Структура проекта после изменений:

bash
/chart-app/
├── db.sqlite          ← SQLite база
├── index.html         ← Клиент с 3 диаграммами
└── api.php            ← Возвращает данные за неделю, месяц, всё время

📄 1. Обновлённый `api.php` (добавлена секция `total`)

php
<?php
header('Content-Type: application/json');

$db = new SQLite3('db.sqlite');

// WEEK
$weekMovements = $db->querySingle("SELECT COUNT(*) FROM orders WHERE deal_update >= datetime('now', '-7 days')");
$weekUnacquired = $db->querySingle("SELECT COUNT(*) FROM orders WHERE status_deal = 100 AND deal_update >= datetime('now', '-7 days')");
$weekInWork = $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM message WHERE date_create >= datetime('now', '-7 days')");
$weekNewOrders = $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM deal_stage WHERE deal_create >= datetime('now', '-7 days')");

// MONTH
$monthMovements = $db->querySingle("SELECT COUNT(*) FROM orders WHERE deal_update >= datetime('now', '-30 days')");
$monthUnacquired = $db->querySingle("SELECT COUNT(*) FROM orders WHERE status_deal = 100 AND deal_update >= datetime('now', '-30 days')");
$monthInWork = $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM message WHERE date_create >= datetime('now', '-30 days')");
$monthNewOrders = $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM deal_stage WHERE deal_create >= datetime('now', '-30 days')");

// TOTAL (всё время)
$totalMovements = $db->querySingle("SELECT COUNT(*) FROM orders");
$totalUnacquired = $db->querySingle("SELECT COUNT(*) FROM orders WHERE status_deal = 100");
$totalInWork = $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM message");
$totalNewOrders = $db->querySingle("SELECT COUNT(DISTINCT order_id) FROM deal_stage");

echo json_encode([
    "week" => [
        "labels" => ["Движения", "Не приобретено", "В работе", "Новые заявки"],
        "data" => [$weekMovements, $weekUnacquired, $weekInWork, $weekNewOrders],
        "colors" => ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0"]
    ],
    "month" => [
        "labels" => ["Движения", "Не приобретено", "В работе", "Новые заявки"],
        "data" => [$monthMovements, $monthUnacquired, $monthInWork, $monthNewOrders],
        "colors" => ["#9966FF", "#FF9F40", "#4BC0C0", "#FF6384"]
    ],
    "total" => [
        "labels" => ["Движения", "Не приобретено", "В работе", "Новые заявки"],
        "data" => [$totalMovements, $totalUnacquired, $totalInWork, $totalNewOrders],
        "colors" => ["#C9CBCF", "#36A2EB", "#FF6384", "#9966FF"]
    ]
]);

🌐 2. Обновлённый `index.html` (добавлена 3-я диаграмма)

html
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Статистика заявок</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .chart-card {
      padding: 20px;
      text-align: center;
    }
    canvas {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body class="bg-light">

  <div class="container py-5">
    <h2 class="text-center mb-4">Статистика заявок</h2>

    <div class="row g-4 justify-content-center">
      <div class="col-12 col-lg-4 chart-card bg-white shadow rounded">
        <h5>За неделю</h5>
        <canvas id="weekChart"></canvas>
      </div>

      <div class="col-12 col-lg-4 chart-card bg-white shadow rounded">
        <h5>За месяц</h5>
        <canvas id="monthChart"></canvas>
      </div>

      <div class="col-12 col-lg-4 chart-card bg-white shadow rounded">
        <h5>За всё время</h5>
        <canvas id="totalChart"></canvas>
      </div>
    </div>
  </div>

  <script>
    async function loadStats() {
      try {
        const response = await fetch('api.php');
        const result = await response.json();

        const commonOptions = {
          responsive: true,
          plugins: {
            legend: { position: 'bottom' }
          }
        };

        new Chart(document.getElementById('weekChart'), {
          type: 'polarArea',
          data: {
            labels: result.week.labels,
            datasets: [{
              data: result.week.data,
              backgroundColor: result.week.colors
            }]
          },
          options: commonOptions
        });

        new Chart(document.getElementById('monthChart'), {
          type: 'polarArea',
          data: {
            labels: result.month.labels,
            datasets: [{
              data: result.month.data,
              backgroundColor: result.month.colors
            }]
          },
          options: commonOptions
        });

        new Chart(document.getElementById('totalChart'), {
          type: 'polarArea',
          data: {
            labels: result.total.labels,
            datasets: [{
              data: result.total.data,
              backgroundColor: result.total.colors
            }]
          },
          options: commonOptions
        });

      } catch (error) {
        console.error('Ошибка загрузки данных:', error);
      }
    }

    loadStats();
  </script>
</body>
</html>

✅ Что теперь работает:

Диаграмма	Источник	Что считает
За неделю	orders, message	Данные за 7 дней
За месяц	orders, message	Данные за 30 дней
За всё время	orders, message	Все данные в таблицах

📌 Готов помочь дальше:

Добавить выбор периода с кнопками
Сделать автоматическое обновление по таймеру
Экспорт в Excel или PDF

Хочешь импортировать тестовые данные в db.sqlite — могу подготовить SQL-дамп или PHP-скрипт.

Давай добавим выбор периода с кнопками

Отлично! Добавим кнопки для выбора периода (Неделя, Месяц, Всё время) — чтобы можно было переключаться между ними и видеть соответствующую диаграмму.

✅ Что сделаем:

Добавим 3 кнопки-переключателя (Bootstrap)
Оставим только одну диаграмму, которая обновляется в зависимости от выбора
Загружаем нужный раздел (week, month, total) из api.php
Упростим интерфейс (одна центральная диаграмма)

📄 Обновлённый `index.html`

html
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Статистика заявок</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .chart-card {
      padding: 20px;
      text-align: center;
    }
    canvas {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body class="bg-light">

  <div class="container py-5">
    <h2 class="text-center mb-4">Статистика заявок</h2>

    <!-- Кнопки выбора периода -->
    <div class="d-flex justify-content-center mb-4">
      <div class="btn-group" role="group" aria-label="Выбор периода">
        <button type="button" class="btn btn-outline-primary" onclick="updateChart('week')">Неделя</button>
        <button type="button" class="btn btn-outline-primary" onclick="updateChart('month')">Месяц</button>
        <button type="button" class="btn btn-outline-primary" onclick="updateChart('total')">Всё время</button>
      </div>
    </div>

    <!-- Диаграмма -->
    <div class="row justify-content-center">
      <div class="col-12 col-lg-6 chart-card bg-white shadow rounded">
        <canvas id="mainChart"></canvas>
      </div>
    </div>
  </div>

  <script>
    let chartInstance = null;
    let chartDataCache = null;

    async function fetchStats() {
      const response = await fetch('api.php');
      chartDataCache = await response.json();
      updateChart('week'); // стартуем с "неделя"
    }

    function updateChart(period) {
      if (!chartDataCache || !chartDataCache[period]) return;

      const data = chartDataCache[period];

      const config = {
        type: 'polarArea',
        data: {
          labels: data.labels,
          datasets: [{
            data: data.data,
            backgroundColor: data.colors
          }]
        },
        options: {
          responsive: true,
          plugins: {
            legend: { position: 'bottom' },
            title: { display: false }
          }
        }
      };

      // если диаграмма уже создана — удалим и пересоздадим
      if (chartInstance) {
        chartInstance.destroy();
      }

      const ctx = document.getElementById('mainChart').getContext('2d');
      chartInstance = new Chart(ctx, config);
    }

    fetchStats();
  </script>
</body>
</html>

✅ Как работает:

Загружаются все данные (week, month, total) одним запросом.
Кнопки позволяют переключать активную диаграмму.
Всего один <canvas>, диаграмма пересоздаётся при переключении.
Использован Chart.js, Bootstrap и fetch().

✅ Преимущества:

Быстро работает, без лишней перерисовки
Удобная навигация для пользователя
Расширяется легко (например, по фильтрам)

🧩 Хочешь больше?

Добавить даты в подписи
Позволить выбор произвольного диапазона дат
Сохранить выбранный период в localStorage

Могу реализовать любую из этих функций — просто скажи.

fetch('api.php'); добавить POST chart = true

ChatGPT может допускать ошибки. Рекомендуем проверять важную информацию.

Вы сказали:

ChatGPT сказал:

📊 Пример HTML с использованием Chart.js (v4+):

🧩 Где редактировать данные?

⚙️ Интеграция с данными

Вы сказали:

ChatGPT сказал:

✅ Обновлённый HTML с Bootstrap и горизонтальным расположением диаграмм:

📱 Что добавлено:

Вы сказали:

ChatGPT сказал:

✅ Что будет реализовано:

🔧 Пример Backend API (структура JSON, которую мы ожидаем):

💻 HTML + Bootstrap + Chart.js + AJAX (Fetch API)

⚙️ Как подготовить backend (пример на Python Flask):

✅ Преимущества:

Вы сказали:

ChatGPT сказал:

🔧 Структура проекта:

📄 Шаг 1. HTML-файл (index.html)

📁 Шаг 2. Создание API-обработчиков на PHP

📄 api/month.php

📄 api/week.php

📄 api/total.php

📌 Итог:

🚀 Что дальше?

Вы сказали:

ChatGPT сказал:

📋 База данных (предположим database.sqlite) содержит таблицы:

✅ Подключение к SQLite (без PDO)

1️⃣ Сколько было движений по заявкам (deal_update) за неделю и месяц из таблицы orders

2️⃣ Сколько заявок не были приобретены (status_deal = 100) за неделю и месяц

3️⃣ Сколько заявок было в работе — по таблице message, где:

4️⃣ Количество новых заявок за неделю и месяц — по deal_stage.deal_create, учитывая уникальные order_id

🧩 Собрать всё вместе:

📤 Пример ответа JSON:

✅ Применение:

Вы сказали:

ChatGPT сказал:

📦 Делает следующее:

📁 Структура проекта:

🧱 1. Создаём SQLite базу (пример вручную)

📄 2. PHP: api.php

🌐 3. HTML: index.html

✅ Результат:

🚀 Что можно добавить:

Вы сказали:

ChatGPT сказал:

📁 Структура проекта после изменений:

📄 1. Обновлённый api.php (добавлена секция total)

🌐 2. Обновлённый index.html (добавлена 3-я диаграмма)

✅ Что теперь работает:

📌 Готов помочь дальше:

Вы сказали:

ChatGPT сказал:

✅ Что сделаем:

📄 Обновлённый index.html

✅ Как работает:

✅ Преимущества:

🧩 Хочешь больше?

Вы сказали:

ChatGPT сказал:

📄 `api/month.php`

📄 `api/week.php`

📄 `api/total.php`

📋 База данных (предположим `database.sqlite`) содержит таблицы:

1️⃣ Сколько было движений по заявкам (`deal_update`) за неделю и месяц из таблицы `orders`

2️⃣ Сколько заявок не были приобретены (`status_deal = 100`) за неделю и месяц

3️⃣ Сколько заявок было в работе — по таблице `message`, где:

4️⃣ Количество новых заявок за неделю и месяц — по `deal_stage.deal_create`, учитывая уникальные `order_id`

📄 2. PHP: `api.php`

🌐 3. HTML: `index.html`

📄 1. Обновлённый `api.php` (добавлена секция `total`)

🌐 2. Обновлённый `index.html` (добавлена 3-я диаграмма)

📄 Обновлённый `index.html`