Давно я хотел заняться графиками и вот наконец-то сделаем несколько видов графиков. Естественно, что будем использовать стороннюю библиотеку для визуализации графиков с примерами!
И последним разберем динамический график, который будет обновляться в зависимости от количества посетителей.
О библиотеке для графиков.
Прежде чем приступать к графикам, нам нужна библиотека "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'],
Если мы говорим о примере, то мы изменили массив? таким образом:
['Task', 'Hours per Day'],
Заменим :
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
У нас есть массив! Теперь выведем его внутри javascript - позиция на скрине №2. С помощью цикла foreach - выводим все данный в массив, кроме ячейки, где лежит общее количество(all). См выше кнопка показать массив.
Код, который будет создавать массив javascript .
<?
Давайте посмотрим на этот массив уже на странице - нажимаем ctrl + U(обращаю ваше внимание, на последнюю ячейку - это дата, когда вы смотрите эту страницу дата будет другая)
Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!
Как сделать график динамическим(обновляемым)!?
Далее выводим всего сколько:
Всего посетило страницу : <?=$ARRAY_COUNT_VISITS[all]?>
И последнее добавим "curveType: 'function'" - вывод в виде функции.
Скриншот, на который мы ранее несколько раз ссылались:
Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!
Как сделать график динамическим(обновляемым)!?
Результат вывода волнового графика(обновляемого)
График линейный-волновой
Скачать.
Если вы встречаетесь с построением графика впервые, то все это понять с первого раза невозможно! Даже мне пришлось немного попотеть!
Поэтому, чтобы вы могли посмотреть на данный код, я сделаю архив, который вы сомжете скачать
Как встроить график себе на сайт!?
График столбчатый(
Полноэкранная версия .
Код для вставки на страницу:
<iframe style ="width:750px;height:550px;border:none;margin:20px 0;" src="https://dwweb.ru/__img/__charts/stolbchatyiy_grafik.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/__img/__charts/stolbchatyiy_grafik_os.html"></iframe>
Результат :
Форма пока доступна только админу... скоро все заработает...надеюсь...
