Как отобразить на графике все данные за определенную дату?

@NFlahN · Регистрация: 02.07.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте, у меня есть код для линейного графика. Ось x-дата, но у меня для одной даты несколько записей, как сделать, чтобы отображались все данные за определенную дату.

PHP/HTML
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
<?php 
//index.php
$connect = mysqli_connect("localhost", "root", "", "spis");
$query = "SELECT * FROM catalog";
$result = mysqli_query($connect, $query);
$chart_data = '';
while($row = mysqli_fetch_array($result))
{
 $chart_data .= "{ date:'".$row["date"]."', sum:'".$row["sum"]."'}, ";
}
$chart_data = substr($chart_data, 0, -2);
?>
 
 
<!DOCTYPE html>
<html>
 <head>
  <title>chart with PHP & Mysql | lisenme.com </title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
  
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">Morris.js chart with PHP & Mysql</h2>
   <h3 align="center">Last 10 Years Profit, Purchase and Sale Data</h3>   
   <br /><br />
   <div id="chart"></div>
  </div>
 </body>
</html>
 
<script>
Morris.Line({
 element : 'chart',
 data:[<?php echo $chart_data; ?>],
 xkey:'date',
 ykeys:['sum'],
 labels:['Sum'],
 hideHover:'auto',
 stacked:true
});
</script>

@pvzh · 16.12.2018, 00:07

Доброго дня!
Было бы понятнее с примером данных. Указать несколько значений можно, но второе и следующие будут отдельными точками, вне линии. График потому и линейный, что по точкам строится плавная линия. Вот так проверял:

JavaScript
1
2
3
4
5
6
7
8
9
  data: [
    { date: '2018-12-01', sum: 15 },
    { date: '2018-12-02', sum: 20 },
    { date: '2018-12-03', sum: 40 },
    { date: '2018-12-03', sum: 50 },
    { date: '2018-12-03', sum: 60 },
    { date: '2018-12-04', sum: 35 },
    { date: '2018-12-05', sum: 55 },
  ],

Можете пояснить смысл нескольких точек на одну дату? Это разные линии? Или ступень в графике?

@NFlahN · 16.12.2018, 00:42 **[ТС]**

Значения берутся из базы данных, а не задаются массивом. Например: date: 2018-12-14, sum: 72; date: 2018-12-14, sum:24. Например, эти данные есть в бд, как вывести их с помощью графика

@pvzh · 16.12.2018, 06:18

NFlahN, для данного вопроса не важно, откуда данные. У меня нет вашей БД, поэтому я для примера задал массив руками.

Поясните, как по вашему должен выглядеть линейный график с двумя точками за одну дату? Физический смысл этого? Сколько может быть точек? Может вам нужна точечная диаграмма? Или может нужен ступенчатый линейный график, как это умеет библиотека Chart.js?

@NFlahN · 16.12.2018, 11:20 **[ТС]**

Вот моя бд и график, который отображается.

@NFlahN · 16.12.2018, 11:21 **[ТС]**

Он пропускает остальные значения за 2018-12-13

@pvzh · 17.12.2018, 10:24

Какой смысл выводить электричество, блузку и сырок за 13 декабря - на одной линии рядом? Подозреваю, что надо несколько линий. И выводить сумму по категории за период, будет 1 точка на 1 дату. Период можно взять хоть 1 день. Пример на 3 категории и 3 периода

Если очень хочется всё вывалить на одну линию, можно добавить время. В Morris.js передавать в формате '2018-12-01 06:00', подготовил пример с датой и временем.

@NFlahN · 17.12.2018, 11:09 **[ТС]**

У меня есть форма для добавления записей в бд и мне надо, чтобы они сразу брались в график, не внося их в ручную в код

@pvzh · 17.12.2018, 11:27

Все уже поняли, что у вас есть БД. Но для начала надо разобраться с графиком, не так ли? А для этого БД не надо. Я подготовил 2 примера на JS Bin. Можете выбрать подходящий и приладить под свой случай?

Или хотя бы руками и карандашом нарисуйте и фото выложите. Мне правда интересно:

Сообщение от pvzh

Какой смысл выводить электричество, блузку и сырок за 13 декабря

@NFlahN · 17.12.2018, 11:33 **[ТС]**

Примерно, чтобы выглядело так

@NFlahN · 17.12.2018, 11:35 **[ТС]**

Не обращайте внимание на com, мне просто нужно вывести из бд sum и date в виде графика, но чтобы данные не заполнялись в коде вручную

@pvzh · 17.12.2018, 11:55

Вот, теперь задача понятна. Вижу только одно решение - в БД к дате добавить время. Выше уже предлагал такой вариант.

@NFlahN · 17.12.2018, 12:34 **[ТС]**

Время добавлено в бд, но как сделать, чтобы данные вводились не вручную, как это у вас

Добавлено через 2 минуты
data: [
{ date: '2018-12-01 00:00', t: 10 },
{ date: '2018-12-01 06:00', t: 15 },
{ date: '2018-12-01 12:00', t: 25 },
{ date: '2018-12-01 18:00', t: 20 },
{ date: '2018-12-02 00:00', t: 15 },
{ date: '2018-12-02 06:00', t: 20 },
{ date: '2018-12-02 12:00', t: 30 },
{ date: '2018-12-02 18:00', t: 25 },
],
В этой части кода вы задаете дату, время и сумму, но если я введу данные из формы в бд, то они здесь не отобразятся, а мне нужно, чтобы график сразу обновлялся после ввода данных

Добавлено через 24 минуты
Спасибо, все работает

@pvzh · 17.12.2018, 13:14

Сообщение от NFlahN

PHP
1
2
3
4
5
6
$chart_data = '';
while($row = mysqli_fetch_array($result))
{
  $chart_data .= "{ date:'".$row["date"]."', sum:'".$row["sum"]."'}, ";
}
$chart_data = substr($chart_data, 0, -2);

Кстати, для передачи данных из PHP в JS есть PHP-функция json_encode, с ней код проще читать и поддерживать и меньше шансов накосячить в форматировании:

PHP
1
2
3
4
5
$data = [];
while ($row = mysqli_fetch_array($result)) {
  $data[] = $row;
}
$chart_data = json_encode($data, JSON_PRETTY_PRINT);

@NFlahN · 17.12.2018, 13:58 **[ТС]**

pvzh, почему так странно отображается график, данные вводились через час

@NFlahN · 17.12.2018, 13:59 **[ТС]**

Вот как он сейчас выглядит

Новые блоги и статьи Все статьи Все блоги /
YAFU@home — распределённые вычисления для математики. На CPU Programma_Boinc 20.01.2026 YAFU@home — распределённые вычисления для математики. На CPU YAFU@home — это BOINC-проект, который занимается факторизацией больших чисел и исследованием aliquot-последовательностей. Звучит. . .	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@NFlahN 0 / 0 / 0 Регистрация: 02.07.2018 Сообщений: 47
	16.12.2018, 00:42 [ТС]
	Значения берутся из базы данных, а не задаются массивом. Например: date: 2018-12-14, sum: 72; date: 2018-12-14, sum:24. Например, эти данные есть в бд, как вывести их с помощью графика 0

@pvzh 98 / 64 / 36 Регистрация: 04.12.2018 Сообщений: 158
	16.12.2018, 06:18
	NFlahN, для данного вопроса не важно, откуда данные. У меня нет вашей БД, поэтому я для примера задал массив руками. Поясните, как по вашему должен выглядеть линейный график с двумя точками за одну дату? Физический смысл этого? Сколько может быть точек? Может вам нужна точечная диаграмма? Или может нужен ступенчатый линейный график, как это умеет библиотека Chart.js? 0

@NFlahN 0 / 0 / 0 Регистрация: 02.07.2018 Сообщений: 47
	16.12.2018, 11:20 [ТС]
	Вот моя бд и график, который отображается. Миниатюры Изображения 0

@NFlahN 0 / 0 / 0 Регистрация: 02.07.2018 Сообщений: 47
	16.12.2018, 11:21 [ТС]
	Он пропускает остальные значения за 2018-12-13 0

@pvzh 98 / 64 / 36 Регистрация: 04.12.2018 Сообщений: 158
	17.12.2018, 10:24
	Какой смысл выводить электричество, блузку и сырок за 13 декабря - на одной линии рядом? Подозреваю, что надо несколько линий. И выводить сумму по категории за период, будет 1 точка на 1 дату. Период можно взять хоть 1 день. Пример на 3 категории и 3 периода Если очень хочется всё вывалить на одну линию, можно добавить время. В Morris.js передавать в формате `'2018-12-01 06:00'`, подготовил пример с датой и временем. 0

@NFlahN 0 / 0 / 0 Регистрация: 02.07.2018 Сообщений: 47
	17.12.2018, 11:09 [ТС]
	У меня есть форма для добавления записей в бд и мне надо, чтобы они сразу брались в график, не внося их в ручную в код 0

@NFlahN 0 / 0 / 0 Регистрация: 02.07.2018 Сообщений: 47
	17.12.2018, 11:33 [ТС]
	Примерно, чтобы выглядело так Миниатюры 0

@NFlahN 0 / 0 / 0 Регистрация: 02.07.2018 Сообщений: 47
	17.12.2018, 11:35 [ТС]
	Не обращайте внимание на com, мне просто нужно вывести из бд sum и date в виде графика, но чтобы данные не заполнялись в коде вручную 0

@pvzh 98 / 64 / 36 Регистрация: 04.12.2018 Сообщений: 158
	17.12.2018, 11:55
	Вот, теперь задача понятна. Вижу только одно решение - в БД к дате добавить время. Выше уже предлагал такой вариант. 0

@NFlahN 0 / 0 / 0 Регистрация: 02.07.2018 Сообщений: 47
	17.12.2018, 12:34 [ТС]
	Время добавлено в бд, но как сделать, чтобы данные вводились не вручную, как это у вас Добавлено через 2 минуты data: [ { date: '2018-12-01 00:00', t: 10 }, { date: '2018-12-01 06:00', t: 15 }, { date: '2018-12-01 12:00', t: 25 }, { date: '2018-12-01 18:00', t: 20 }, { date: '2018-12-02 00:00', t: 15 }, { date: '2018-12-02 06:00', t: 20 }, { date: '2018-12-02 12:00', t: 30 }, { date: '2018-12-02 18:00', t: 25 }, ], В этой части кода вы задаете дату, время и сумму, но если я введу данные из формы в бд, то они здесь не отобразятся, а мне нужно, чтобы график сразу обновлялся после ввода данных Добавлено через 24 минуты Спасибо, все работает 0

@NFlahN 0 / 0 / 0 Регистрация: 02.07.2018 Сообщений: 47
	17.12.2018, 13:58 [ТС]
	pvzh, почему так странно отображается график, данные вводились через час 0

@NFlahN 0 / 0 / 0 Регистрация: 02.07.2018 Сообщений: 47
	17.12.2018, 13:59 [ТС]
	Вот как он сейчас выглядит Миниатюры 0