Как создать красивый график на сайте
И последним разберем динамический график, который будет обновляться в зависимости от количества посещений страницы.
Подробно о графиках для сайта
- О библиотеке для графиков.
- Создание кругового графика(Pie Chart)
- Волновой график (Curving the Lines)
- Как сделать график динамическим(
обновляемым )!? - Как встроить график себе на сайт!?
О библиотеке для графиков.
Прежде чем приступать к графикам, нам нужна библиотека "Chart Gallery". Где её взять!? Или подключить!?
Можно подключить, как внешний скрипт:
Вы можете поискать, где можно скачать данную библиотеку на сайте developers.google.com
Либо можно скачать у нас
Примеры построения графиков:
Чтобы иметь представление, о чем вообще идет речь, о каких графиках, вот несколько готовых графиков на сегодня:
Диаграмма - браузеры
Столбчатый - браузеры по годам
Волновой - браузеры по годам
Линейный - посещаемость
Создание кругового графика(Pie Chart)
Давайте попробуем разобраться, как вообще сделать график на сайте? Начнем с того, как сделать круговой график (Pie Chart) пошагово, чтобы вы это смогли повторить!Открываем страницу developers.google.com - нас интересует "Pie Chart"
Далее ищем код, который стоит за картинкой... копируем и вставляем в любой редактор, либо даже блокнот и сохраняем, как html страницу.
Ну и далее заполняем все те данные, что имеются в массиве. Обращаю ваше внимание, что внутри массива - это штуки. Программа самы высчитает, сколько это будет составлять в процентах. И будет показывать и штуки и проценты.:
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
Если мы говорим о примере, то мы изменили массив? таким образом:
['Яндекс Браузер', 28.5],
['Google Chrome', 18.2],
['Opera', 13.9],
['Firefox', 11.1],
['MSIE', 5.05],
['Others', 23.25]
Заменим :
Изменим "width" и "height"
Конечный результат вывода графика на сайте
Уже выше я показал круговой графикВолновой график (Curving the Lines)
Сначала - посмотрим, какой график будем строить... "волновой" с сглаженными углами.График: Curving the Lines - изогнутые линии:
Открываем документацию
Опять копируем код и помещаем его на страницу.
Что важно для нас и что мы поменяем!? Первая позиция - массив, поменяю на массив данных о браузерах.
Вторая выделенная позиция на скрине - "bottom" -меняем на "right" - чтобы обозначения были справа от графика.
И меняем высоту и ширину на:
Результат получения волнового графика на сайте:
Выше вы уже могли посмотреть на него - "волновой график для сайта"Ну к примеру, как можно модифицировать данный график... ну например в переменной оставляем только один "title"
Как сделать график динамическим(обновляемым)!?
Вообще - идея с графиком пошла с темы счетчика, когда я дошел до сохранения посещаемости по дням.Т.е. данный массив обновляется каждый день - что нам и нужно!
Для того, чтобы сделать обновляемый каждый день график, нам понадобится(буду рассказывать на своем примере):Открываем документацию... поскольку ссылка срабатывает криво, заходим сюда и справа ищем кнопку - "Creating Material Line Charts"
Как из выше неоднократно сказано, основная масса данных для графика это массив. И выше был приведена ссылка на счетчик. Позиция №1 на ниже идущем скрине - получаем массив из файла с помощью unserialize. И которого мы получим вот такой массив:
(
[10.12.2020] => 7
[all] => 25597
[11.12.2020] => 22
[12.12.2020] => 35
[13.12.2020] => 24
[14.12.2020] => 15
[15.12.2020] => 18
[16.12.2020] => 13
[17.12.2020] => 17
[18.12.2020] => 10
[19.12.2020] => 8
[20.12.2020] => 9
[21.12.2020] => 11
[22.12.2020] => 4
[23.12.2020] => 5
[24.12.2020] => 9
[25.12.2020] => 10
[26.12.2020] => 6
[27.12.2020] => 3
[28.12.2020] => 12
[29.12.2020] => 8
[30.12.2020] => 17
[31.12.2020] => 9
[01.01.2021] => 2
[02.01.2021] => 3
[03.01.2021] => 6
[04.01.2021] => 6
[05.01.2021] => 11
[06.01.2021] => 9
[07.01.2021] => 10
[08.01.2021] => 7
[09.01.2021] => 8
[10.01.2021] => 4
[11.01.2021] => 8
[12.01.2021] => 5
[13.01.2021] => 9
[14.01.2021] => 15
[15.01.2021] => 8
[16.01.2021] => 10
[17.01.2021] => 1
[18.01.2021] => 12
[19.01.2021] => 7
[20.01.2021] => 15
[21.01.2021] => 16
[22.01.2021] => 10
[23.01.2021] => 8
[24.01.2021] => 27
[25.01.2021] => 26
[26.01.2021] => 16
[27.01.2021] => 16
[28.01.2021] => 12
[29.01.2021] => 10
[30.01.2021] => 12
[31.01.2021] => 8
[01.02.2021] => 12
[02.02.2021] => 9
[03.02.2021] => 13
[04.02.2021] => 11
[05.02.2021] => 10
[06.02.2021] => 5
[07.02.2021] => 4
[08.02.2021] => 13
[09.02.2021] => 13
[10.02.2021] => 10
[11.02.2021] => 8
[12.02.2021] => 12
[13.02.2021] => 14
[14.02.2021] => 6
[15.02.2021] => 13
[16.02.2021] => 5
[17.02.2021] => 21
[18.02.2021] => 14
[19.02.2021] => 8
[20.02.2021] => 9
[21.02.2021] => 13
[22.02.2021] => 9
[23.02.2021] => 14
[24.02.2021] => 16
[25.02.2021] => 17
[26.02.2021] => 7
[27.02.2021] => 11
[02.03.2021] => 11
[03.03.2021] => 19
[04.03.2021] => 18
[05.03.2021] => 8
[06.03.2021] => 9
[07.03.2021] => 9
[08.03.2021] => 8
[09.03.2021] => 9
[10.03.2021] => 10
[11.03.2021] => 8
[12.03.2021] => 13
[13.03.2021] => 11
[14.03.2021] => 12
[15.03.2021] => 13
[16.03.2021] => 14
[17.03.2021] => 10
[18.03.2021] => 17
[19.03.2021] => 10
[20.03.2021] => 6
[21.03.2021] => 7
[22.03.2021] => 2
[23.03.2021] => 6
[24.03.2021] => 4
[25.03.2021] => 10
[26.03.2021] => 12
[27.03.2021] => 15
[28.03.2021] => 11
[29.03.2021] => 28
[30.03.2021] => 11
[31.03.2021] => 16
[01.04.2021] => 9
[02.04.2021] => 25
[03.04.2021] => 9
[04.04.2021] => 10
[05.04.2021] => 13
[06.04.2021] => 15
[07.04.2021] => 17
[08.04.2021] => 22
[09.04.2021] => 12
[10.04.2021] => 6
[11.04.2021] => 9
[12.04.2021] => 5
[13.04.2021] => 4
[14.04.2021] => 14
[15.04.2021] => 9
[16.04.2021] => 12
[17.04.2021] => 20
[18.04.2021] => 28
[19.04.2021] => 7
[20.04.2021] => 13
[21.04.2021] => 7
[22.04.2021] => 15
[23.04.2021] => 9
[24.04.2021] => 12
[25.04.2021] => 20
[26.04.2021] => 21
[27.04.2021] => 17
[28.04.2021] => 11
[29.04.2021] => 10
[30.04.2021] => 23
[01.05.2021] => 10
[02.05.2021] => 14
[03.05.2021] => 13
[04.05.2021] => 13
[05.05.2021] => 11
[06.05.2021] => 14
[07.05.2021] => 13
[08.05.2021] => 16
[09.05.2021] => 10
[10.05.2021] => 21
[11.05.2021] => 20
[12.05.2021] => 13
[13.05.2021] => 27
[14.05.2021] => 107
[15.05.2021] => 64
[16.05.2021] => 34
[17.05.2021] => 34
[18.05.2021] => 33
[19.05.2021] => 35
[20.05.2021] => 41
[21.05.2021] => 41
[22.05.2021] => 19
[23.05.2021] => 27
[24.05.2021] => 24
[25.05.2021] => 23
[26.05.2021] => 20
[27.05.2021] => 23
[28.05.2021] => 25
[29.05.2021] => 24
[30.05.2021] => 11
[31.05.2021] => 25
[01.06.2021] => 23
[02.06.2021] => 29
[03.06.2021] => 26
[04.06.2021] => 40
[05.06.2021] => 34
[06.06.2021] => 34
[07.06.2021] => 32
[08.06.2021] => 39
[09.06.2021] => 33
[10.06.2021] => 41
[11.06.2021] => 62
[12.06.2021] => 36
[13.06.2021] => 44
[14.06.2021] => 67
[15.06.2021] => 71
[16.06.2021] => 61
[17.06.2021] => 63
[18.06.2021] => 58
[19.06.2021] => 66
[20.06.2021] => 62
[21.06.2021] => 40
[22.06.2021] => 16
[23.06.2021] => 19
[24.06.2021] => 27
[25.06.2021] => 4
[26.06.2021] => 11
[27.06.2021] => 24
[28.06.2021] => 15
[29.06.2021] => 29
[30.06.2021] => 41
[01.07.2021] => 24
[02.07.2021] => 19
[03.07.2021] => 22
[04.07.2021] => 17
[05.07.2021] => 19
[06.07.2021] => 21
[07.07.2021] => 60
[08.07.2021] => 58
[09.07.2021] => 49
[10.07.2021] => 38
[11.07.2021] => 45
[12.07.2021] => 55
[13.07.2021] => 33
[14.07.2021] => 40
[15.07.2021] => 47
[16.07.2021] => 52
[17.07.2021] => 43
[18.07.2021] => 55
[19.07.2021] => 56
[20.07.2021] => 59
[21.07.2021] => 64
[22.07.2021] => 55
[23.07.2021] => 28
[24.07.2021] => 70
[25.07.2021] => 75
[26.07.2021] => 53
[27.07.2021] => 36
[28.07.2021] => 15
[29.07.2021] => 27
[30.07.2021] => 17
[31.07.2021] => 9
[01.08.2021] => 27
[02.08.2021] => 22
[03.08.2021] => 31
[04.08.2021] => 18
[05.08.2021] => 19
[06.08.2021] => 30
[07.08.2021] => 48
[08.08.2021] => 92
[09.08.2021] => 16
[10.08.2021] => 31
[11.08.2021] => 77
[12.08.2021] => 32
[08.09.2021] => 10
[09.09.2021] => 9
[10.09.2021] => 8
[11.09.2021] => 12
[12.09.2021] => 15
[13.09.2021] => 24
[14.09.2021] => 12
[15.09.2021] => 17
[16.09.2021] => 15
[17.09.2021] => 6
[18.09.2021] => 15
[19.09.2021] => 15
[20.09.2021] => 23
[21.09.2021] => 13
[22.09.2021] => 25
[23.09.2021] => 9
[24.09.2021] => 11
[25.09.2021] => 13
[26.09.2021] => 17
[27.09.2021] => 13
[28.09.2021] => 18
[29.09.2021] => 19
[30.09.2021] => 17
[01.10.2021] => 17
[02.10.2021] => 39
[03.10.2021] => 17
[04.10.2021] => 29
[05.10.2021] => 22
[06.10.2021] => 14
[07.10.2021] => 24
[08.10.2021] => 14
[09.10.2021] => 35
[10.10.2021] => 20
[11.10.2021] => 11
[12.10.2021] => 9
[13.10.2021] => 22
[14.10.2021] => 20
[15.10.2021] => 26
[16.10.2021] => 18
[17.10.2021] => 19
[18.10.2021] => 21
[19.10.2021] => 21
[20.10.2021] => 15
[21.10.2021] => 16
[22.10.2021] => 11
[23.10.2021] => 23
[24.10.2021] => 21
[25.10.2021] => 22
[26.10.2021] => 10
[27.10.2021] => 9
[28.10.2021] => 11
[29.10.2021] => 22
[30.10.2021] => 10
[31.10.2021] => 5
[01.11.2021] => 8
[02.11.2021] => 35
[03.11.2021] => 18
[04.11.2021] => 16
[05.11.2021] => 13
[06.11.2021] => 14
[07.11.2021] => 23
[08.11.2021] => 26
[09.11.2021] => 3
[10.11.2021] => 16
[11.11.2021] => 36
[12.11.2021] => 14
[13.11.2021] => 21
[14.11.2021] => 16
[15.11.2021] => 19
[16.11.2021] => 20
[17.11.2021] => 16
[18.11.2021] => 14
[19.11.2021] => 31
[20.11.2021] => 21
[21.11.2021] => 11
[22.11.2021] => 19
[23.11.2021] => 11
[24.11.2021] => 17
[25.11.2021] => 17
[26.11.2021] => 23
[27.11.2021] => 18
[28.11.2021] => 15
[29.11.2021] => 14
[30.11.2021] => 11
[01.12.2021] => 21
[02.12.2021] => 15
[03.12.2021] => 14
[04.12.2021] => 26
[05.12.2021] => 24
[06.12.2021] => 23
[07.12.2021] => 16
[08.12.2021] => 23
[09.12.2021] => 26
[10.12.2021] => 33
[11.12.2021] => 22
[12.12.2021] => 25
[13.12.2021] => 26
[14.12.2021] => 23
[15.12.2021] => 38
[16.12.2021] => 24
[17.12.2021] => 32
[18.12.2021] => 17
[19.12.2021] => 24
[20.12.2021] => 21
[21.12.2021] => 18
[22.12.2021] => 16
[23.12.2021] => 19
[24.12.2021] => 19
[25.12.2021] => 14
[26.12.2021] => 14
[27.12.2021] => 20
[28.12.2021] => 50
[29.12.2021] => 15
[30.12.2021] => 10
[31.12.2021] => 7
[01.01.2022] => 7
[02.01.2022] => 7
[03.01.2022] => 17
[04.01.2022] => 19
[05.01.2022] => 37
[06.01.2022] => 11
[07.01.2022] => 15
[08.01.2022] => 16
[09.01.2022] => 17
[10.01.2022] => 15
[11.01.2022] => 17
[12.01.2022] => 19
[13.01.2022] => 16
[14.01.2022] => 27
[15.01.2022] => 19
[16.01.2022] => 12
[17.01.2022] => 21
[18.01.2022] => 17
[19.01.2022] => 22
[20.01.2022] => 19
[21.01.2022] => 16
[22.01.2022] => 11
[23.01.2022] => 18
[24.01.2022] => 24
[25.01.2022] => 20
[26.01.2022] => 11
[27.01.2022] => 25
[28.01.2022] => 26
[29.01.2022] => 9
[30.01.2022] => 17
[31.01.2022] => 23
[01.02.2022] => 21
[02.02.2022] => 22
[03.02.2022] => 18
[04.02.2022] => 17
[05.02.2022] => 18
[06.02.2022] => 20
[07.02.2022] => 24
[08.02.2022] => 25
[09.02.2022] => 25
[10.02.2022] => 18
[11.02.2022] => 24
[12.02.2022] => 21
[13.02.2022] => 14
[14.02.2022] => 17
[15.02.2022] => 13
[16.02.2022] => 24
[17.02.2022] => 36
[18.02.2022] => 14
[19.02.2022] => 21
[20.02.2022] => 17
[21.02.2022] => 84
[22.02.2022] => 22
[23.02.2022] => 16
[24.02.2022] => 15
[25.02.2022] => 23
[26.02.2022] => 5
[27.02.2022] => 30
[28.02.2022] => 15
[01.03.2022] => 9
[02.03.2022] => 28
[03.03.2022] => 22
[04.03.2022] => 23
[05.03.2022] => 13
[06.03.2022] => 14
[07.03.2022] => 15
[08.03.2022] => 18
[09.03.2022] => 19
[10.03.2022] => 16
[11.03.2022] => 15
[12.03.2022] => 17
[13.03.2022] => 20
[14.03.2022] => 23
[15.03.2022] => 17
[16.03.2022] => 35
[17.03.2022] => 31
[18.03.2022] => 73
[19.03.2022] => 62
[20.03.2022] => 19
[21.03.2022] => 21
[22.03.2022] => 98
[23.03.2022] => 56
[24.03.2022] => 22
[25.03.2022] => 19
[26.03.2022] => 19
[27.03.2022] => 27
[28.03.2022] => 29
[29.03.2022] => 32
[30.03.2022] => 28
[31.03.2022] => 33
[01.04.2022] => 21
[02.04.2022] => 17
[03.04.2022] => 24
[04.04.2022] => 24
[05.04.2022] => 30
[06.04.2022] => 22
[07.04.2022] => 33
[08.04.2022] => 25
[09.04.2022] => 29
[10.04.2022] => 20
[11.04.2022] => 42
[12.04.2022] => 41
[13.04.2022] => 36
[14.04.2022] => 32
[15.04.2022] => 34
[16.04.2022] => 23
[17.04.2022] => 30
[18.04.2022] => 29
[19.04.2022] => 30
[20.04.2022] => 23
[21.04.2022] => 22
[22.04.2022] => 27
[23.04.2022] => 23
[24.04.2022] => 25
[25.04.2022] => 35
[26.04.2022] => 29
[27.04.2022] => 26
[28.04.2022] => 31
[29.04.2022] => 34
[30.04.2022] => 21
[01.05.2022] => 21
[02.05.2022] => 17
[03.05.2022] => 27
[04.05.2022] => 38
[05.05.2022] => 36
[06.05.2022] => 33
[07.05.2022] => 38
[08.05.2022] => 30
[09.05.2022] => 49
[10.05.2022] => 54
[11.05.2022] => 46
[12.05.2022] => 32
[13.05.2022] => 25
[14.05.2022] => 33
[15.05.2022] => 36
[16.05.2022] => 40
[17.05.2022] => 57
[18.05.2022] => 51
[19.05.2022] => 26
[20.05.2022] => 31
[21.05.2022] => 23
[22.05.2022] => 16
[23.05.2022] => 34
[24.05.2022] => 33
[25.05.2022] => 32
[26.05.2022] => 32
[27.05.2022] => 21
[28.05.2022] => 35
[29.05.2022] => 28
[30.05.2022] => 30
[31.05.2022] => 27
[01.06.2022] => 17
[02.06.2022] => 15
[03.06.2022] => 17
[04.06.2022] => 15
[05.06.2022] => 18
[06.06.2022] => 20
[07.06.2022] => 23
[08.06.2022] => 15
[09.06.2022] => 19
[10.06.2022] => 18
[11.06.2022] => 12
[12.06.2022] => 19
[13.06.2022] => 19
[14.06.2022] => 19
[15.06.2022] => 19
[16.06.2022] => 13
[17.06.2022] => 15
[18.06.2022] => 19
[19.06.2022] => 13
[20.06.2022] => 19
[21.06.2022] => 18
[22.06.2022] => 16
[23.06.2022] => 28
[24.06.2022] => 18
[25.06.2022] => 20
[26.06.2022] => 11
[27.06.2022] => 17
[28.06.2022] => 14
[29.06.2022] => 14
[30.06.2022] => 17
[01.07.2022] => 24
[02.07.2022] => 16
[03.07.2022] => 15
[04.07.2022] => 16
[05.07.2022] => 17
[06.07.2022] => 16
[07.07.2022] => 11
[08.07.2022] => 8
[09.07.2022] => 15
[10.07.2022] => 6
[11.07.2022] => 20
[12.07.2022] => 42
[13.07.2022] => 41
[14.07.2022] => 33
[15.07.2022] => 38
[16.07.2022] => 45
[17.07.2022] => 35
[18.07.2022] => 31
[19.07.2022] => 26
[20.07.2022] => 16
[21.07.2022] => 12
[22.07.2022] => 14
[23.07.2022] => 19
[24.07.2022] => 22
[25.07.2022] => 16
[26.07.2022] => 19
[27.07.2022] => 10
[28.07.2022] => 19
[29.07.2022] => 15
[30.07.2022] => 26
[31.07.2022] => 19
[01.08.2022] => 11
[02.08.2022] => 20
[03.08.2022] => 19
[04.08.2022] => 18
[05.08.2022] => 15
[06.08.2022] => 21
[07.08.2022] => 16
[08.08.2022] => 11
[09.08.2022] => 11
[10.08.2022] => 12
[11.08.2022] => 23
[12.08.2022] => 28
[13.08.2022] => 19
[14.08.2022] => 16
[15.08.2022] => 22
[16.08.2022] => 24
[17.08.2022] => 16
[18.08.2022] => 14
[19.08.2022] => 24
[20.08.2022] => 18
[21.08.2022] => 21
[22.08.2022] => 22
[23.08.2022] => 29
[24.08.2022] => 30
[25.08.2022] => 35
[26.08.2022] => 22
[27.08.2022] => 28
[28.08.2022] => 18
[29.08.2022] => 21
[30.08.2022] => 27
[31.08.2022] => 25
[01.09.2022] => 17
[02.09.2022] => 24
[03.09.2022] => 29
[04.09.2022] => 30
[05.09.2022] => 11
[06.09.2022] => 22
[07.09.2022] => 37
[08.09.2022] => 24
[09.09.2022] => 36
[10.09.2022] => 34
[11.09.2022] => 30
[12.09.2022] => 23
[13.09.2022] => 18
[14.09.2022] => 27
[15.09.2022] => 24
[16.09.2022] => 20
[17.09.2022] => 24
[18.09.2022] => 27
[19.09.2022] => 27
[20.09.2022] => 60
[21.09.2022] => 33
[22.09.2022] => 28
[23.09.2022] => 33
[24.09.2022] => 31
[25.09.2022] => 32
[26.09.2022] => 33
[27.09.2022] => 35
[28.09.2022] => 36
[29.09.2022] => 34
[30.09.2022] => 43
[01.10.2022] => 27
[02.10.2022] => 27
[03.10.2022] => 36
[04.10.2022] => 27
[05.10.2022] => 43
[06.10.2022] => 37
[07.10.2022] => 9
[08.10.2022] => 19
[09.10.2022] => 23
[10.10.2022] => 18
[11.10.2022] => 16
[12.10.2022] => 14
[13.10.2022] => 26
[14.10.2022] => 14
[15.10.2022] => 15
[16.10.2022] => 15
[17.10.2022] => 32
[18.10.2022] => 27
[19.10.2022] => 27
[20.10.2022] => 9
[21.10.2022] => 17
[22.10.2022] => 24
[23.10.2022] => 22
[24.10.2022] => 22
[25.10.2022] => 28
[26.10.2022] => 26
[27.10.2022] => 18
[28.10.2022] => 21
[29.10.2022] => 25
[30.10.2022] => 18
[31.10.2022] => 20
[01.11.2022] => 21
[02.11.2022] => 27
[03.11.2022] => 23
[04.11.2022] => 19
[05.11.2022] => 23
[06.11.2022] => 22
[07.11.2022] => 20
[08.11.2022] => 46
[09.11.2022] => 26
[10.11.2022] => 31
[11.11.2022] => 27
[12.11.2022] => 34
[13.11.2022] => 26
[14.11.2022] => 41
[15.11.2022] => 44
[16.11.2022] => 37
[17.11.2022] => 31
[18.11.2022] => 34
[19.11.2022] => 43
[20.11.2022] => 38
[21.11.2022] => 44
[22.11.2022] => 34
[23.11.2022] => 64
[24.11.2022] => 70
[25.11.2022] => 47
[26.11.2022] => 35
[27.11.2022] => 58
[28.11.2022] => 50
[29.11.2022] => 35
[30.11.2022] => 41
[01.12.2022] => 39
[02.12.2022] => 55
[03.12.2022] => 52
[04.12.2022] => 48
[05.12.2022] => 46
[06.12.2022] => 47
[07.12.2022] => 51
[08.12.2022] => 57
[09.12.2022] => 44
[10.12.2022] => 49
[11.12.2022] => 41
[12.12.2022] => 52
[13.12.2022] => 43
[14.12.2022] => 50
[15.12.2022] => 64
[16.12.2022] => 50
[17.12.2022] => 45
[18.12.2022] => 49
[19.12.2022] => 46
[20.12.2022] => 40
[21.12.2022] => 50
[22.12.2022] => 53
[23.12.2022] => 51
[24.12.2022] => 42
[25.12.2022] => 39
[26.12.2022] => 46
[27.12.2022] => 40
[28.12.2022] => 43
[29.12.2022] => 51
[30.12.2022] => 39
[31.12.2022] => 41
[01.01.2023] => 40
[02.01.2023] => 35
[03.01.2023] => 41
[04.01.2023] => 46
[05.01.2023] => 43
[06.01.2023] => 59
[07.01.2023] => 53
[08.01.2023] => 49
[09.01.2023] => 47
[10.01.2023] => 51
[11.01.2023] => 48
[12.01.2023] => 51
[13.01.2023] => 42
[14.01.2023] => 28
[15.01.2023] => 42
[16.01.2023] => 49
[17.01.2023] => 49
[18.01.2023] => 65
[19.01.2023] => 61
[20.01.2023] => 46
[21.01.2023] => 49
[22.01.2023] => 51
[23.01.2023] => 40
[24.01.2023] => 31
[25.01.2023] => 42
[26.01.2023] => 33
[27.01.2023] => 29
[28.01.2023] => 25
[29.01.2023] => 38
[30.01.2023] => 28
[31.01.2023] => 27
[01.02.2023] => 35
[02.02.2023] => 24
[03.02.2023] => 32
[04.02.2023] => 21
[05.02.2023] => 27
[06.02.2023] => 31
[07.02.2023] => 27
[08.02.2023] => 18
[09.02.2023] => 24
[10.02.2023] => 28
[11.02.2023] => 21
[12.02.2023] => 25
[13.02.2023] => 28
[14.02.2023] => 33
[15.02.2023] => 26
[16.02.2023] => 30
[17.02.2023] => 29
[18.02.2023] => 26
[19.02.2023] => 33
[20.02.2023] => 36
[21.02.2023] => 26
[22.02.2023] => 32
[23.02.2023] => 24
[24.02.2023] => 31
[25.02.2023] => 33
[26.02.2023] => 24
[27.02.2023] => 27
[28.02.2023] => 19
[01.03.2023] => 17
[02.03.2023] => 28
[03.03.2023] => 33
[04.03.2023] => 35
[05.03.2023] => 19
[06.03.2023] => 28
[07.03.2023] => 22
[08.03.2023] => 31
[09.03.2023] => 27
[10.03.2023] => 34
[11.03.2023] => 21
[12.03.2023] => 21
[13.03.2023] => 31
[14.03.2023] => 31
[15.03.2023] => 24
[16.03.2023] => 31
[17.03.2023] => 19
[18.03.2023] => 23
[19.03.2023] => 27
[20.03.2023] => 22
[21.03.2023] => 37
[22.03.2023] => 32
[23.03.2023] => 26
[24.03.2023] => 26
[25.03.2023] => 44
[26.03.2023] => 26
[27.03.2023] => 28
[28.03.2023] => 6
)
У нас есть массив! Теперь выведем его внутри javascript - позиция на скрине №2. С помощью цикла foreach - выводим все данный в массив, кроме ячейки, где лежит общее количество(all). См выше кнопка показать массив.
Код, который будет создавать массив javascript .
foreach ($ARRAY_COUNT_VISITS as $key => $value)
{
if( $key!="all"){
echo '[\''.$key.'\','.$value .'],';
}
}
?>
Давайте посмотрим на этот массив уже на странице - нажимаем ctrl + U(обращаю ваше внимание, на последнюю ячейку - это дата, когда вы смотрите эту страницу дата будет другая)
Далее выводим всего сколько:
И последнее добавим "curveType: 'function'" - вывод в виде функции.
Скриншот, на который я ранее несколько раз ссылался:
Результат вывода волнового графика(обновляемого)
График линейный-волновойЕсли вы встречаетесь с построением графика впервые, то все это понять с первого раза невозможно! Даже мне пришлось немного попотеть!
Поэтому, чтобы вы могли посмотреть на данный код, я сделаю архив, который вы сомжете скачатьКак встроить график себе на сайт!?
График столбчатый() встроить:
Полноэкранная версия.<iframe style ="width:750px;height:550px;border:none;margin:20px 0;" src="https://dwweb.ru/charts/browser_statistics_in_russia_percent.html"></iframe>
График() встроить:
Полноэкранная версия.
<iframe style ="width:750px;height:550px;border:none;margin:20px 0;" src="https://dwweb.ru/__img/__charts/gravik_lineynyiy_javascript.html"></iframe>
График() встроить:
Полноэкранная версия.<iframe style ="width:750px;height:550px;border:none;margin:20px 0;" src="https://dwweb.ru/__img/__charts/diagramma_statistiki_po_brauzeram.html"></iframe>
График() встроить:
Полноэкранная версия.<iframe style ="width:750px;height:550px;border:none;margin:20px 0;" src="https://dwweb.ru/charts/stat_all_os_short.html"></iframe>
Счетчик в график :
Построение гравиковОснова для графика : счетчик посещаемости.
На отдельной : странице.
подробнее.
подробнее.
подробнее.

подробнее.