Как создать красивый график на сайте
Давно я хотел заняться графиками и вот наконец-то сделаем несколько видов графиков. Естественно, что будем использовать стороннюю библиотеку для визуализации графиков с примерами!
И последним разберем динамичный график, который будет обновляться в зависимости от количества посетителей.
Подробно о графиках для сайта
- О библиотеке для графиков.
- Создание кругового графика(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. И которого мы получим вот такой массив:
У нас есть массив! Теперь выведем его внутри 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/__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>
Создание графиков графики на сайте
