Всем привет. Рассмотрев в прошлой статье сохранение информации в базе данных, в этой статье настало время вывести данные из этой же базы в графическом виде. Да друзья для начала мы поверхностно посмотрим на имеющиеся технологии. И остановив свой выбор на одной, интегрируем на свой сайт.
Итак приступим. Для отображения разных данных используют различные графики и диаграммы. Рассмотрим некоторые 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 – JavaScript библиотека, для простого создания графиков. Предоставляет множество предварительно созданных диаграмм. Имеется множество конфигурационных настроек (Google Chart Tools API – это многофункциональный набор инструментов для визуализации данных.), которые помогают изменить внешний вид графика. Графики формируются с помощью HTML5/SVG добы обеспечить кроссбраузерную совместимость и кроссплатформенную портируемость на IPhone, IPad и Android. Также содержит VML для поддержки старых IE версий.
Теперь перейдем к практике. Google Charts предоставляет информацию и инструменты для разработчиков для интегрирования данной технологи себе на ресурс https://developers.google.com/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 можно поместить:
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>
Ниже на рис. результат использования данного скрипта:
Переходим по ссылке http://ap -impulse.ru/interface.php на интерактивный веб — интерфейс. Слева график построенный по статическим данным.
Выше мы рассмотрели использование библиотеки Google Charts на своем ресурсе, работe с документацией, разобрали код. Данный ресурс имеет широкий выбор графиков и диаграмм, а также пример их использования и полное описание. Как уже писалось выше мы использовали статические данные. Для нашего проекта нам необходимо чтение из базы данных, данные в которую мы научились заносить из GET-параметров в прошлой статье. В следующей статье мы рассмотрим подключение к базе, построение графика, а также возникающие ошибки. На этом на сегодня и остановимся. Всем пока.
Спасибо за описанный способ построения графиков. Было бы неплохо конечно, что бы библиотека была под рукой.А то вдруг нет доступа. Жду продолжения построения по БД.