Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

Давно я хотел заняться графиками и вот наконец-то сделаем несколько видов графиков. Естественно, что будем использовать стороннюю библиотеку для визуализации графиков с примерами!

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

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

  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. И которого мы получим вот такой массив:

    У нас есть массив! Теперь выведем его внутри 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/__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>

    Результат :



Последняя дата редактирования : 07.04.2021 22:26
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Создание графиков графики на сайте

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

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.
Виталий :
24/03/2021 06:05
Не стоит обижаться, люди могут не понимать что ошибка не критична. Может быть до конца не изучали…
подробнее.
Марат :
23/03/2021 02:09
Спасибо, за сообщение! В архив попал вариант, который был на тестировании и там остались некоторые…
подробнее.