СКРИПТЫ
ТЕГИ:
php (322)
js (242)
html (146)
css (128)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
js date (33)
php array (33)
fonts (30)
form html (30)
online (27)
Показать еще :
link (26)
ruweb.net (25)
foto (22)
atom (20)
php file (20)
forum (19)
svg (18)
hosting (18)
input (18)
php date (17)
php time (16)
html book (16)
board (16)
color (15)
js url (14)
img (14)
js time (14)
js events (14)
osclass (13)
info (13)
select (13)
htaccess (13)
notepad (13)
знак (12)
table (12)
dw block (12)
download (12)
php img (12)
php path (12)
keyboard (12)
icon (11)
jsphp (11)
form (11)
mouse (10)
yandex (10)
js delete (10)
hover (9)
dosite (8)
browser (7)
comment (7)
php url (7)
cookie (7)
list (6)
iframe (6)
php get (6)
click (6)
canvas (6)
mysql (6)
reg.ru (5)
value (5)
heading (5)
mb (5)
js math (5)
adminka (5)
tag a (5)
chart (5)
year (5)
search (5)
ftp (5)
js id (5)
ssl (4)
base64 (4)
day (4)
week (4)
php var (4)
bbcode (4)
нок (4)
scandir (4)
xml (4)
month (4)
submit (4)
symbols (4)
task (4)
pages (4)
vk (4)
console (4)
js form (4)
https (3)
numbers (3)
js post (3)
js hash (3)
vs code (3)
domen (3)
js img (3)
ucoz (3)
padding (3)
куб (3)
money (3)
line (3)
captcha (3)
height (2)
seo (2)
js vars (2)
video (2)
youtube (2)
tag hr (2)
details (2)
typeof (2)
рся (2)
sitemap (2)
counter (2)
arrows (2)
prompt (2)
qr kod (2)
google (2)
game (1)
cursor (1)
scroll (1)
rutube (1)
нод (1)
smile (1)
jino (1)
header (1)
speed (1)
windows (1)
archive (1)

Как создать красивый график на сайте

17.02.2021 Марат 5048 0 js | css | php | chart |
"Создание графиков", как сделать график на сайте, несколько видов графиков, столбчатый, график, диаграмма, волновой график с примерами. Будем использовать стороннюю библиотеку для визуализации графиков с примерами!

И последним разберем динамический график, который будет обновляться в зависимости от количества посещений страницы.

Подробно о графиках для сайта

  1. О библиотеке для графиков.
  2. Создание кругового графика(Pie Chart)
  3. Волновой график (Curving the Lines)
  4. Как сделать график динамическим(обновляемым)!?
  5. Как встроить график себе на сайт!?

  1. О библиотеке для графиков.

    Прежде чем приступать к графикам, нам нужна библиотека "Chart Gallery". Где её взять!? Или подключить!?

    Можно подключить, как внешний скрипт:

    <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">

    Вы можете поискать, где можно скачать данную библиотеку на сайте developers.google.com

    Либо можно скачать у нас

    Примеры построения графиков:

    Чтобы иметь представление, о чем вообще идет речь, о каких графиках, вот несколько готовых графиков на сегодня:

    Диаграмма - браузеры

    Столбчатый - браузеры по годам

    Волновой - браузеры по годам

    Линейный - посещаемость


  2. Создание кругового графика(Pie Chart)

    Давайте попробуем разобраться, как вообще сделать график на сайте? Начнем с того, как сделать круговой график (Pie Chart) пошагово, чтобы вы это смогли повторить!

    Открываем страницу developers.google.com - нас интересует "Pie Chart"

    Нажмите, чтобы открыть в новом окне.
    Создание кругового графика(Pie Chart)

    Далее ищем код, который стоит за картинкой... копируем и вставляем в любой редактор, либо даже блокнот и сохраняем, как html страницу.

    Нажмите, чтобы открыть в новом окне.
    Создание кругового графика(Pie Chart)

    Ну и далее заполняем все те данные, что имеются в массиве. Обращаю ваше внимание, что внутри массива - это штуки. Программа самы высчитает, сколько это будет составлять в процентах. И будет показывать и штуки и проценты.:

    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]

    Если мы говорим о примере, то мы изменили массив? таким образом:

    ['Task', 'Hours per Day'],
    ['Яндекс Браузер', 28.5],
    ['Google Chrome', 18.2],
    ['Opera', 13.9],
    ['Firefox', 11.1],
    ['MSIE', 5.05],
    ['Others', 23.25]

    Заменим :

    title: 'Общая статистика по браузерам в России за 2013 - 2020'

    Изменим "width" и "height"

    width: 100%; height: 100%;

    Конечный результат вывода графика на сайте

    Уже выше я показал круговой график


  3. Волновой график (Curving the Lines)

    Сначала - посмотрим, какой график будем строить... "волновой" с сглаженными углами.

    График: Curving the Lines - изогнутые линии:

    Открываем документацию

    Опять копируем код и помещаем его на страницу.

    Нажмите, чтобы открыть в новом окне.
    График: Curving the Lines - изогнутые линии:

    Что важно для нас и что мы поменяем!? Первая позиция - массив, поменяю на массив данных о браузерах.

    Вторая выделенная позиция на скрине - "bottom" -меняем на "right" - чтобы обозначения были справа от графика.

    И меняем высоту и ширину на:

    width: 100%; height: 100%;

    Результат получения волнового графика на сайте:

    Выше вы уже могли посмотреть на него - "волновой график для сайта"
    Еще вариант :

    Ну к примеру, как можно модифицировать данный график... ну например в переменной оставляем только один "title"

    var options = {title: 'здесь название'};
    То получим: угловатый график


  4. Как сделать график динамическим(обновляемым)!?

    Вообще - идея с графиком пошла с темы счетчика, когда я дошел до сохранения посещаемости по дням.

    Т.е. данный массив обновляется каждый день - что нам и нужно!

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

    Открываем документацию... поскольку ссылка срабатывает криво, заходим сюда и справа ищем кнопку - "Creating Material Line Charts"

    Нажмите, чтобы открыть в новом окне.
    Как сделать график динамическим(обновляемым)!?

    Как из выше неоднократно сказано, основная масса данных для графика это массив. И выше был приведена ссылка на счетчик. Позиция №1 на ниже идущем скрине - получаем массив из файла с помощью unserialize. И которого мы получим вот такой массив:

    Array
    (
    [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(обращаю ваше внимание, на последнюю ячейку - это дата, когда вы смотрите эту страницу дата будет другая)

    Нажмите, чтобы открыть в новом окне.
    Как сделать график динамическим(обновляемым)!?

    Далее выводим всего сколько:

    Всего посетило страницу : <?=$ARRAY_COUNT_VISITS[all]?>

    И последнее добавим "curveType: 'function'" - вывод в виде функции.

    Скриншот, на который я ранее несколько раз ссылался:

    Нажмите, чтобы открыть в новом окне.
    Как сделать график динамическим(обновляемым)!?

    Результат вывода волнового графика(обновляемого)

    График линейный-волновой
    Скачать.

    Если вы встречаетесь с построением графика впервые, то все это понять с первого раза невозможно! Даже мне пришлось немного попотеть!

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


  5. Как встроить график себе на сайт!?


    График столбчатый() встроить:

    Полноэкранная версия.
    Код для вставки на страницу:

    <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>

    Результат :


Можете не благодарить, лучше помогите!
Теги :
Создание графиков
графики на сайте
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
14.03.2023 21:07
Так... это когда было то... в 2018 году... мне не нравится(не нравилось), как поиск по файлам... как-то коряво было…
подробнее.
Moubrey :
14.03.2023 20:52
Их там два можно поставить, еще и по бокам, а в них еще друге окна станут вкладками, обычный проводник и…
подробнее.
Марат :
26.02.2023 12:20
Спасибо за внимательность!
подробнее.
V :
26.02.2023 11:49
В массиве месяцев пропущен октябрь!
подробнее.
Марат :
02.02.2023 10:48
Я не знаю, что это ... Такое понятие - "определена"... я не понимаю, что такое... есть такая фигня в Js, там, бывают…
подробнее.
Артур :
02.02.2023 06:51
При копировании всего кода из 3 главы "Вывод всех файлов из папки ссылками на них", при выполнении скрипта…
подробнее.
ruweb Немного о ruweb.net!
Страница загружена за : 0.036269 секунд. Подробнее