Подписаться на получение новых статей на почту:

Графики и диаграммы на сайте. Google Charts на примере. Шаг №68

Всем привет. Рассмотрев  в прошлой статье сохранение информации в базе данных, в этой статье настало время вывести данные из этой же базы в графическом виде. Да друзья для начала мы поверхностно посмотрим на имеющиеся технологии. И остановив свой выбор на одной, интегрируем на свой сайт.

Немного напомню, кто забыл, что это является составляющей проекта интерактивного веб — интерфейса контроллера сбора данных. Обзорную статью планирование можно посмотреть здесь.
Итак приступим. Для отображения разных данных используют различные графики и диаграммы. Рассмотрим некоторые JavaScript библиотеки для создания быстрой и эффективной визуализации данных.

Список некоторых из них:
— D3.js – JavaScript-библиотека с открытым кодом,  для обработки и визуализации данных. Графики генерируются посредством HTML, SVG и CSS;
— ChartJS — open source проект. Использует HTML5 canvas для рендеринга. Поставляется с набором  «готовых» основных графиков;
— Chartlist.js — используется SVG для рендеринга графиков/схем, а также управляться и конфигурироваться посредством CSS3 media queries и Sass;
— n3-charts — создан поверх D3.js и AngularJS. Он предоставляет множество стандартных графиков в виде настраиваемых AngularJS директив;
— EmberCharts – open source , построенный на D3.js и Ember.js. Использует SVG для рендеринга графиков;
— Smoothie Charts – для работы с потоком данных в реальном времени. Для рендеринга графика здесь используется элемент HTML5 canvas. Библиотека на чистом JavaScript, которая предоставляет такие опциональные возможности для графиков реального времени;
-Chartkick – JavaScript библиотека для построения графиков/схем в Ruby приложениях. Диаграммы генерируются через SVG;
- MeteorCharts — Для рендеринга графиков предоставляется возможность выбора любой из этих технологий: HTML5 canvas, WebGL, SVG и даже DOM;
-Flot – JavaScript библиотека для JQuery, позволяющая создавать графики/диаграммы.

Google ChartsА также многие другие. Я остановлюсь на Google Charts – JavaScript библиотека, для простого создания графиков. Предоставляет множество предварительно созданных диаграмм. Имеется множество конфигурационных настроек (Google Chart Tools API – это многофункциональный набор инструментов для визуализации данных.), которые помогают изменить внешний вид графика. Графики формируются с помощью HTML5/SVG добы обеспечить кроссбраузерную совместимость и кроссплатформенную портируемость на IPhone, IPad и Android. Также содержит VML для поддержки старых IE версий.

Теперь перейдем к практике. Google Charts предоставляет информацию и инструменты для разработчиков для интегрирования данной технологи себе на ресурс https://developers.google.com/chart/

Line ChartРаботать будем с линейной диаграммой Line Chart (рис. с слева). Переходим к примеру предоставленному на данном сервисе последующей ссылке.  https://developers.google.com/chart/interactive/docs/ gallery/linechart. When A line chart that is rendered within the browser using SVG or VML. Displays tooltips when hovering over points. Что ж с SVG мы с Вами познакомились еще в статье №62, при построении интерактивного изображения контроллера сбора данных. И всплывающие подсказки это тоже здорово. Возьмем шаблон скрипта выше изображенного графика и вставим себе на страницу. Только прорисуем один график. Немного внесем свои изменения Разберем где что и куда. Итак код в студию.

<!--Load the AJAX API-->
<head>
<!--Подключаем библиотеку по ссылке, обязательно-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
     //Выбираем тип визуализации, corechart (диаграмма). Смотри документацию.
    google.charts.load ('current', {'packages':['corechart']});
Вместо corechart можно поместить:датчики Google Charts
Orgchart – Дерево.
Map – Карта
Annotationchart – График.
Gauge – Спидометр (на рис.).
И многое другое.
    //Вызов ниже описанной функции
    google.charts.setOnLoadCallback (drawChart_st);
    //Создаем функцию drawChart_st (). Указываем параметры визуализации
    //В массив нужно поместить своеобразную «таблицу» данных
    function drawChart_st () {
         var data_st = google.visualization.arrayToDataTable ([
               ['Time', 'T'],
               ['2004',  4],
               ['2005',  25],
               ['2006',  25],
               ['2007',  10]
          ]);
          //Дополнительные настройки
          var options_st = {
          title: 'Temperatura',   //заголовок
          curveType: 'function',
          legend: { position: 'bottom' }
          };
         //Указываем контейнер, в который будем помещать карту.
          var chart_st = new google.visualization.LineChart (document.getElementById ('curve_chart_st'));
          chart_st.draw (data_st, options_st);
    }
</script>
</head>

<body>
   <!--Контейнер. Указываем размер графика-->
   <div id="curve_chart_st" style="width: 300px; height: 200px; float:right"></div>
</body>

Ниже на рис. результат использования данного скрипта:

Google Charts на сайтеПереходим по ссылке http://ap -impulse.ru/interface.php на интерактивный веб — интерфейс. Слева график построенный по статическим данным.

Выше мы рассмотрели использование библиотеки Google Charts на своем ресурсе, работe с документацией, разобрали код.  Данный ресурс имеет широкий выбор графиков и диаграмм, а также пример их использования и полное описание. Как уже писалось выше мы использовали статические данные. Для нашего проекта нам необходимо чтение из базы данных, данные в которую мы научились заносить из GET-параметров в прошлой статье. В следующей статье мы рассмотрим подключение к базе, построение графика, а также возникающие ошибки. На этом на сегодня и остановимся. Всем пока.

Просмотрено 4277 раз.

Я на Google+

Графики и диаграммы на сайте. Google Charts на примере. Шаг №68: Один комментарий

  1. Спасибо за описанный способ построения графиков. Было бы неплохо конечно, что бы библиотека была под рукой.А то вдруг нет доступа. Жду продолжения построения по БД.

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting