", как сделать график на сайте, несколько видов графиков, столбчатый, график, диаграмма, волновой график с примерами. Будем использовать стороннюю библиотеку для визуализации графиков с примерами!
И последним разберем динамический график, который будет обновляться в зависимости от количества посещений страницы.
О библиотеке для графиков.
Прежде чем приступать к графикам, нам нужна библиотека "Chart Gallery". Где её взять!? Или подключить!?
Можно подключить, как внешний скрипт :
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
Вы можете поискать, где можно скачать данную библиотеку на сайте developers.google.com
Либо можно скачать у нас
Примеры построения графиков:
Чтобы иметь представление, о чем вообще идет речь, о каких графиках, вот несколько готовых графиков на сегодня:
Диаграмма - браузеры
Столбчатый - браузеры по годам
линейный - браузеры по годам
Линейный посещаемость
Создание кругового графика(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%;
Конечный результат вывода графика на сайте
Уже выше я показал круговой график
Волновой график (Curving the Lines)
Сначала - посмотрим, какой график будем строить... "волновой " с сглаженными углами.
График: Curving the Lines - изогнутые линии:
Открываем документацию
Опять копируем код и помещаем его на страницу.
Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!
График: Curving the Lines - изогнутые линии:
Что важно для нас и что мы поменяем!? Первая позиция - массив, поменяю на массив данных о браузерах.
Вторая выделенная позиция на скрине - "bottom" -меняем на "right" - чтобы обозначения были справа от графика.
И меняем высоту и ширину на:
width: 100%; height: 100%;
Результат получения волнового графика на сайте:
Выше вы уже могли посмотреть на него - "волновой график для сайта "
Еще вариант :
Ну к примеру, как можно модифицировать данный график... ну например в переменной оставляем только один "title"
var options = {title: 'здесь название'};
То получим: угловатый график
Как сделать график динамическим(обновляемым)!?
Вообще - идея с графиком пошла с темы счетчика, когда я дошел до сохранения посещаемости по дням.
Т.е. данный массив обновляется каждый день - что нам и нужно!
Для того, чтобы сделать обновляемый каждый день график, нам понадобится(буду рассказывать на своем примере ):
Открываем документацию... поскольку ссылка срабатывает криво, заходим сюда и справа ищем кнопку - "Creating Material Line Charts"
Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!
Как сделать график динамическим(обновляемым)!?
Как из выше неоднократно сказано, основная масса данных для графика это массив. И выше был приведена ссылка на счетчик. Позиция №1 на ниже идущем скрине - получаем массив из файла с помощью unserialize . И которого мы получим вот такой массив:
Показать массив:
Скрыть
Array ( [10.12.2020] => 7 [all] => 16547 [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] => 33 )
У нас есть массив! Теперь выведем его внутри 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'" - вывод в виде функции.
Скриншот, на который мы ранее несколько раз ссылались:
Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!
Как сделать график динамическим(обновляемым)!?
Результат вывода волнового графика(обновляемого)
График линейный-волновой
Скачать.
Если вы встречаетесь с построением графика впервые, то все это понять с первого раза невозможно! Даже мне пришлось немного попотеть!
Поэтому, чтобы вы могли посмотреть на данный код, я сделаю архив, который вы сомжете скачать
Как встроить график себе на сайт!?
График столбчатый( ) встроить:
Полноэкранная версия .
Код для вставки на страницу:
<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>
Результат :
Не забываем сказать спасибо! Я старался для вас!
Не забываем сказать спасибо! Я старался для вас!
подробнее.