Візуалізація з Google Chart Tools API

Google Chart Tools API – це багатофункціональний набір інструментів для візуалізації даних. За допомогою нього можна відносно легко будувати графіки і діаграми на сайті.

Функціонал Google Chart Tools API включає в себе:

  • Динамічні піктограми;
  • Карти;
  • Циферблати і дисплеї;
  • Формули;
  • QR-коди;
  • Можливість створювати свої інструменти візуалізації і використовувати сторонні.
Карта
image
Зробимо візуалізацію даних за допомогою карти, розмальованої відповідно з внесеними даними. Для початку підключаємо файли, 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':['geochart']});
google.charts.setOnLoadCallback(drawChart);

Замість geochart можна помістити:

Orgchart – Дерево.
Map – Карта
Annotationchart – Графік.
Corechart – Діаграма.
Gauge – Спідометр.
І багато іншого.

Створюємо функцію drawChart(). Вказуємо параметри візуалізації, у нашому випадку карти. В масив потрібно помістити своєрідну таблицю даних: в одній клітинці визначена країна, в іншій — дані, які проявляться при hover ефекті, число відповідає яскравості держави на карті.

var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Sweden', 300],
['United States', 300],
['France', 400],
['Canada', 500],
['Spain', 500],
['UK', 900]
]);

Додаткові налаштування.

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.

Діаграма
image
Тепер створимо просту діаграму.

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Color', 'Кількість'],
['Orange', 11],
['Black', 2],
['Red', 1],
['White', 2],
['Green', 7]
]);

Щоб зробити діаграму 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.

Дерево
image
Тепер створимо «дерево», де слова візуально з'єднуються між собою.

Спробувати.

Підключаємо елемент wordtree.

google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawChart);

У налаштуваннях виводимо слово, від якого буде будуватися дерево. Рядок format має велике значення: якщо вказати implicit, то дерево буде будуватися автоматично від зазначеного слова. Значення explicit дозволяє будувати дерево в ручному режимі.

var options = {
wordtree: {
format: 'implicit',
word 'коти',
colors: ['red', 'black', 'green'] // Задамо кольору.
}
};

Від слова «коти» буде будуватися дерево, однакові слова будуть об'єднуватися в одну.

function drawChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['коти їдять менше собак'],
['коти їдять мишей'],
['коти їдять мишей і хом'яків'],
['коти чудові'],
['коти менше собак']
]
);

Датчик
image
І, на завершення, хочеться показати роботу датчиків – спідометрів.

Спробувати.

Підключення.

google.charts.load('current', {'packages':['gauge']});

У масиві вказуємо назву датчика і позицію стрілки.

var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Gas', 80],
['Oil', 55],
['Амрегаде', 68]
]);

В опціях зазначені:

Розмір блоку з датчиками, розмалювання полів датчика червоним і жовтим кольором.
Позиція minorTicks:5 зменшує ціну поділки датчика.

var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};

Нехай при натисканні на кнопку, датчики оновлюються.

JS код
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() { // Функція викликається onclick.

var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Gas', 80],
['Oil', 55],
['Амрегаде', 68]
]);

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 дуже різноманітні, весь їх функціонал не поміститься в рамки цього посту, документацію по цій бібліотеці можна почитати тут.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.