Google charts на русском

Создание диаграмм с помощью Google Chart

Представляем Вам небольшой Премиум курс по созданию диаграмм с помощью Google Chart.

В нескольких уроках данного курса мы с Вами познакомимся с API Google-диаграмм (Google Charts). Данное API позволяет легко добавлять на страницы вашего сайта всевозможные диаграммы. При этом это могут быть как стандартные диаграммы, так и довольно оригинальные.

Курс позволит Вам не только получить навыки работы с API Google-диаграмм, но и освежит знания в таких областях, как работа с JavaScript, jQuery, AJAX, PHP и т.д.

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

Значительное внимание в курсе по созданию диаграмм с помощью Google Chart уделено получению данных из внешнего хранилища (базы данных) и, соответственно, построению диаграмм на динамических (изменяемых), а не статических данных.

Видеокурс по API Google Charts на русском языке, с примерами для начинающих и продолжающих.

Работа с графиками и диаграммами google chart

У гугла есть сотни крутых сервисов, начиная от почты gmail и заканчивая уведомлениями google alert. Но самое прикольное, что есть гугловские сервисы, которые упрощают жизнь разработчикам, например, google font для нестандартных шрифтов на сайте или google chart для построения графиков.

Вот о последнем я и хочу поговорить. Если кто пытался постичь этот неимоверный сервис, то видел какого объема документация для разработчиков. Естественно, при выполнении прикладных задач, никто всю документацию читать не будет, я тоже не стал заниматься фигней, и полез сразу в примеры. Чтобы вывести 2 таких графика, я потратил очень много времени.

Поэтому хочу помочь таким же бедолагам и сэкономить их время. А заодно будет и мне небольшая шпаргалка.

Построение круговой диаграммы

Начнем с круговой диаграммы, я посчитал, что эта задача сложнее и поэтому начал с нее. Вариант из примеров выглядит так:

See the Pen vgWwWW by Ildar Saribzhanov (@ildar_r_saribzhanov) on CodePen.

От него и будем плясать. Что меня не устроило? Во-первых, цвета, не то чтобы они мне не понравились, но в макете были другие. Поэтому начнем с изменения цветов сегмента. Благо поиск по странице документации слова «color» быстро меня навел на нужный кусок. В опции надо запихать необходимые параметры:

var options = { title: ‘Название’, pieHole: 0.6, slices: { 0: { color: ‘#56b900’ }, 1: { color: ‘#cccccc’ } } };

Шестнадцатиричное значение цвета или можно написать то, что понимает css: ‘yellow’, ‘red’ и т.д. Количество предустановленных цветов не обязательно должно равняться количеству реально заданных сегментов, но лучше установить количество цветов с запасом, т.к. если ваших цветов не будет хватать, то диаграмма возьмет их из значений по умолчанию, что может сильно поломать ваш дизайн. Сразу изменим толщину рамки у диаграммы, за это отвечает параметр pieHole (размер дырки от бублика =) ), значения от нуля до единицы, где ноль это сплошные сегменты, а при n→1 рамка становится тоньше.

Еще мне нужно, чтобы размер самой диаграммы был максимальным на холсте, а вот легенда мне вообще не нужна, и фон тоже надо бы убрать. Опять же это меняется через объект опций:

var options = { title: », pieHole: 0.6, slices: { 0: { color: ‘#56b900’ }, 1: { color: ‘#cccccc’ } }, backgroundColor: ‘transparent’, legend : ‘none’, chartArea : {left: 10, top: 10, width: ‘95%’, height: ‘95%’} };

Значения говорят сами за себя. С chartArea есть особенность, если точку начала установить в нуле, а размеры сделать по 100%, то будет небольшой баг, при наведении на сегмент он подсвечивается, и вот эта подсветка обрежется границами обертки, поэтому я отступил от края. Теперь завернем все это в более осмысленную функцию (мне хочется верить, что она более осмысленная) и посмотрим что получается.

See the Pen oBoRGZ by Ildar Saribzhanov (@ildar_r_saribzhanov) on CodePen.

Продублирую функцию отдельно (вдруг онлайн интерпретатор удалит мое творение?), чтобы дать комментарии

function drawChartRound( arr_data, id ) { var data = google.visualization.arrayToDataTable(arr_data); var options = { title: », pieHole: 0.6, slices: { 0: { color: ‘#56b900’ }, 1: { color: ‘#cccccc’ } }, legend : ‘none’, backgroundColor: ‘transparent’, chartArea : {left: 10, top: 10, width: ‘95%’, height: ‘95%’} }; var chart = new google.visualization.PieChart(document.getElementById(id)); chart.draw(data, options); } // Пример вызова google.charts.load(«current», {packages:}); var data = , , ]; drawChartRound( data, ‘id_block’ );

Принимает 2 параметра: массив с данными (первым элементом в массиве должно идти описание графика) и id блока куда встраивать диаграмму. Таким образом не обязательно отрисовывать график в момент готовности АПИ, можно вызвать в любой другой удобный момент, например, кода пользователь введет данные, которые нужно визуализировать. Мне кажется, это хорошо.

Построение гистограммы

Несмотря на то, что я считал эту задачу простой, но поковыряться пришлось с ней больше, чем с круговой диаграмой. Конечно, проблема, в примерах, они были сильно перегружены.

Сразу дам итоговый вариант, и опишу что здесь за что отвечает

See the Pen dNZBJg by Ildar Saribzhanov (@ildar_r_saribzhanov) on CodePen.

И сама функция выглядит так

function drawHistogramChart( info, id ) { var data = google.visualization.arrayToDataTable(info); var view = new google.visualization.DataView(data), max = 0; for(itm in info ) { if( max < info ) { max = info; } } var options = { title : «», chartArea : {left: 0, top: 0, width: ‘100%’, height: ‘100%’}, backgroundColor: ‘transparent’, bar : {groupWidth: «95%»}, width : 280, vAxis : { minValue: 0, maxValue: max } }; var chart = new google.visualization.ColumnChart(document.getElementById(id)); chart.draw(view, options); } // вызывается так google.charts.load(«current», {packages:}); var data = , , ]; drawHistogramChart(data, ‘capital’);

По умолчанию включено слишком много всего. Что хочется отметить, если в круговой диаграмме настройки цвета секторов шли отдельной настройкой, то тут цвета передаются в массиве с данными.

Параметр chartArea в действительности очень сильно влияет на отображение. Если точку начала рисования отодвинуть от края, то появится градация шкал. Если высоту задать меньше 100%, то снизу появятся подписи к колонкам, если ширину установить меньше 100%, то справа появится кнопка выделения группы. Или что-то типа такого, по примерам из документации можно понять, что происходит.

Параметр bar — устанавливает ширину колонок.
vAxis — устанавливает максимально и минимальное значение шкалы, может быть важно, если необходимо, чтобы была видна нулевая точка. Так как я старался сделать функцию универсальной, то максимальное значение вычисляется, а не устанавливается жестко.

Итого

Однозначно Google Chart очень мощный сервис от корпорации добра. Если внимательно изучить примеры, то видно, что я использую крайне малую долю возможностей, там еще есть анимации для диаграмм, можно было заморочиться. Хочется верить что гугл не прикроет его, а иначе все наши красивости превратятся в тыкву. В этом и основной минус, я сам себя подписал на зависимость от третьих лиц. Когда только анализировал «рынок решений» для своей задачи, то посматривал в сторону d3.js, но мне он показался еще более мудреным. Когда-нибудь доберусь и до него, но как говорится в одном оскароносном фильме: «Не сейчас. Не сейчас…»

Всем рок!

Визуализация с Google Chart Tools API

Google Chart Tools API – это многофункциональный набор инструментов для визуализации данных. С помощью него можно относительно легко строить графики и диаграммы на сайте.
Функционал Google Chart Tools API включает в себя:

  • Динамические пиктограммы;
  • Карты;
  • Циферблаты и дисплеи;
  • Формулы;
  • QR-коды;
  • Возможность создавать свои инструменты визуализации и использовать сторонние.

Карта


Сделаем визуализацию данных с помощью карты, раскрашенной в соответствии с внесенными данными. Для начала подключаем файлы, loader.js обязателен.
<script type=»text/javascript» src=»https://www.gstatic.com/charts/loader.js»></script> <script type=»text/javascript» src=»https://www.google.com/jsapi»></script> /* Дополнительно для карты. */
Выбираем тип визуализации и вставляем его в следующий код, в нашем случае geochart.
google.charts.load(‘current’, {‘packages’:}); google.charts.setOnLoadCallback(drawChart);
Вместо geochart можно поместить:
Orgchart – Дерево.
Map – Карта
Annotationchart – График.
Corechart – Диаграмма.
Gauge – Спидометр.
И многое другое.
Создаем функцию drawChart(). Указываем параметры визуализации, в нашем случае карты. В массив нужно поместить своеобразную «таблицу» данных: в одной ячейке определена страна, в другой — данные, которые проявятся при hover эффекте, число соответствует яркости государства на карте.
var data = google.visualization.arrayToDataTable(, , , , , , ]);
Дополнительные настройки.
var options = { title: ‘Simple map’ // Заголовок. };
Указываем контейнер, в который будем помещать карту.
var chart = new google.visualization.GeoChart(document.getElementById(‘regions_div’)); chart.draw(data, options); }
Контейнер.
<div id=»regions_div» style=»width: 900px; height: 500px;»></div>
По такому шаболну строятся все эффекты визуализации GCT API.

Диаграмма


Теперь создадим простую диаграмму.
google.charts.load(‘current’, {‘packages’:}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable(, , , , , ]);
Чтобы сделать диаграмму 3D, добавляем параметр is3D:true.
var options = { title: ‘Quantity of colors’, is3D: true }
Можно «вырезать» центр.
pieHole: 0.4
Или «вытащить» кусочки диаграммы на расстояние.
slices: { 4: {offset: 0.2}, 1: {offset: 0.3}, 2: {offset: 0.4}, 3: {offset: 0.5}, }
Ступенчатая диаграмма создается аналогичным образом, но в настройки нужно добавить isStacked: true.

Дерево


Теперь создадим «дерево», где слова визуально соединяются между собой.
Попробовать.
Подключаем элемент wordtree.
google.charts.load(‘current’, {packages:}); google.charts.setOnLoadCallback(drawChart);
В настройках выводим слово, от которого будет строиться дерево. Строка format имеет большое значение: если указать implicit, то дерево будет строиться автоматически от указанного слова. Значение explicit позволяет строить дерево в ручном режиме.
var options = { wordtree: { format: ‘implicit’, word: ‘коты’, colors: // Зададим цвета. } };
От слова «коты» будет строиться дерево, одинаковые слова будут объединяться в одно.
function drawChart() { var data = google.visualization.arrayToDataTable( , , , , , ] );

Датчик


И, в завершение, хочется показать работу датчиков – спидометров.
Попробовать.
Подключение.
google.charts.load(‘current’, {‘packages’:});
В массиве указываем название датчика и позицию стрелки.
var data = google.visualization.arrayToDataTable(, , , ]);
В опциях указаны:
Размер блока с датчиками, разрисовка полей датчика красным и желтым цветом.
Позиция minorTicks:5 уменьшает цену деления датчика.
var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 };
Пусть при нажатии на кнопку, датчики обновляются.
JS код google.charts.load(‘current’, {‘packages’:}); google.charts.setOnLoadCallback(drawChart); function drawChart() { // Функция вызывается событием onclick. var data = google.visualization.arrayToDataTable(, , , ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById(‘chart_div’)); chart.draw(data, options); data.setValue(0, 1, 40 + Math.round(60 * Math.random())); // Выбирается случайное значение для каждого датчика chart.draw(data, options); data.setValue(1, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); data.setValue(2, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }
Методы визуализации с помощью GCT API очень разнообразны, весь их функционал не поместится в рамки этого поста, документацию по этой библиотеке можно почитать .