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

Статические диаграммы

Вот легкий способ включить диаграмму на странице:

http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3,1&chl=Phones

|Computers|Services|Other&chtt=Company%20Sales&chco=ff0000

Eсли скопировать и вставить этот адрес в браузере, вы увидите следующее:

<img src='http://chart.apis.google.com/chart?cht=p3&amp;amp;chs=450x200&amp;amp;chd=t:2,4,3,1&amp;amp;chl=Phones|Computers|
Services|Other&amp;amp;chtt=Company%20Sales&amp;amp;chco=ff0000'>

Запрос направляется с помощью GET или POST данных,
а сервер Google возвращает PNG изображений в ответ.
Давайте рассмотрим как это все происходит.

http://chart.apis.google.com/chart?

Это базовый URL, и мы будем использовать его для всех запросов диаграмм.

Обязательные параметры

Есть только три обязательных параметров: cht, chs и chd. Остальные не являются обязательными.

cht = р3

Это тип диаграммы. Мы используем 3D круговая диаграмма которого вызывается при помощи р3. Вы можете посетить галерею диаграмм и увидеть все доступные типы диаграмм.

chs = 450 ? 200

Это схема размер в пикселях (ширина х высота).

chd = t: 2,4,3,1

Это данные для отображения в таблице. Первая буква (t) указывает на формат данных. В этом случае мы используем базовый формат текста, список значений, разделенных запятыми.

Необязательные параметры

Каждый тип диаграмм имеет несколько дополнительных параметров для настройки некоторых аспектах вашего графика: название, шрифт, цвета, градиенты и т.д.

chl=Phones|Computers|Services|Other

Разделяем диаграмму на части (куски пирога)

chtt=Company%20Sales — заголовок графика

chco=ff0000 — цвет

Вы можете также определить градиент используя два цвета (chco = ff0000, 00FF00) или цвет для каждого кусочка (chco = ff0000 | 3355aa | 8322c2 | 112233).

Есть много различных типов диаграмм и если вы поиграете с параметрами, вы можете получить очень хорошие результаты. Google Live Chart Playground является отличным инструментом для этого.

Вот так будет выглядеть код:

//Сначала создаем  DataTable объект
var dataTable = new google.visualization.DataTable();

//Определяем две колонки в нашей таблице методом addColumn ().
Первое значение типа, а второе значение подпись колонки.
dataTable.addColumn('string','Quarters 2009');
dataTable.addColumn('number', 'Earnings');
//Заполняем колонки таблицы
dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

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

Показ графиков с помощью гистограмма

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

Чтобы использовать любой тип графиков или диаграмм, мы должны загрузить Google AJAX API , он обеспечивает основные функции для работы.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Теперь мы можем загрузить график какой мы хотим использовать, с помощью команды google.load ()

google.load('visualization', '1', {'packages': ['columnchart']});

'1, 'относится к версии API , «packages» представляет собой массив со всеми графиками которые мы собираемся использовать. В этом случае, мы будем использовать только один: гистограмма.

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

Сделать это можно путем регистрации обратного вызова. Функция будет такой: google.setOnLoadCallback (createChart);

Функцей createChart мы создаем таблицу и наш график.

Полный код выглядит так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Google Charts Tutorial</title>

 <!-- загрузка  Google AJAX API -->
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
 //Загрузка Google Visualization API и графиков
 google.load('visualization', '1', {'packages': ['columnchart']});

 //проверка
 google.setOnLoadCallback (createChart);

 function createChart() {

 //Создание таблицы
 var dataTable = new google.visualization.DataTable();

 //Задвем столбцы
 dataTable.addColumn('string','Quarters 2009');
 dataTable.addColumn('number', 'Earnings');

 //Заполняем строки
 dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

 //Выбираем тип диаграммы
 var chart = new google.visualization.ColumnChart (document.getElementById('chart'));

 //записываем опции visualization
 var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};

 //Рисуем диаграмму
 chart.draw(dataTable, options);

 }
 </script>

 </head>

 <body>

 <!--Div для нашей диаграммы -->
 <div id="chart"></div>
 </body>
</html>

Результат:

var dataTable = new google.visualization.DataTable();

dataTable.addColumn('string','Quarters');
dataTable.addColumn('number', 'Earnings 2009');
dataTable.addColumn('number', 'Earnings 2008');
dataTable.addColumn('number', 'Earnings 2007');
dataTable.addRows([['Q1',308,417,500], ['Q2',257,300,420],['Q3',375,350,235],['Q4', 123,100,387]]);

google.visualization.events.addListener(chart, 'onmouseover', showDetails);

google.visualization.events.addListener(chart, 'onmouseout', hideDetails);

<body>

 <!--Div for our chart -->
 <div id="chart"></div>

 <!--Divs for our messages -->
 <div id="details0">These are the details for Q1...</div>
 <div id="details1">Here you have the numbers for Q2...</div>
 <div id="details2">Explanations for the third quarter...</div>
 <div id="details3">Q4 was as expected...</div>
 </body>

function showDetails(e) {
 switch (e['row']) {
 case 0: document.getElementById('details0').style.visibility='visible';
 break;
 case 1: document.getElementById('details1').style.visibility='visible';
 break;
 case 2: document.getElementById('details2').style.visibility='visible';
 break;
 case 3: document.getElementById('details3').style.visibility='visible';
 break;
 }
 }
 function hideDetails(e) {
 switch (e['row']) {
 case 0: document.getElementById('details0').style.visibility='hidden';
 break;
 case 1: document.getElementById('details1').style.visibility='hidden';
 break;
 case 2: document.getElementById('details2').style.visibility='hidden';
 break;
 case 3: document.getElementById('details3').style.visibility='hidden';
 break;
 }
 }

И в конце полный код и пример:

<html>
 <head>
 <title>Google Chart Tools Tutorial</title>

 <style type="text/css">

 #details0, #details1, #details2, #details3 {
 visibility:hidden;
 background: #FFFF7F;
 border: solid 1px;
 width: 350px;
 padding: 5px;
 font-size:smaller;
 position:absolute;
 top: 250px;

 }

 </style>

 <!-- load Google AJAX API -->
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
 //load thee Google Visualization API and the chart
 google.load('visualization', '1', {'packages': ['columnchart']});

 //set callback
 google.setOnLoadCallback (createChart);

 //callback function
 function createChart() {

 //create data table object
 var dataTable = new google.visualization.DataTable();

 //define columns
 dataTable.addColumn('string','Quarters 2009');
 dataTable.addColumn('number', 'Earnings');

 //define rows of data
 dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

 //instantiate our chart objects
 var chart = new google.visualization.ColumnChart (document.getElementById('chart'));

 //define options for visualization
 var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};

 //draw our chart
 chart.draw(dataTable, options);

 //register callbacks
 google.visualization.events.addListener(chart, 'onmouseover', showDetails);
 google.visualization.events.addListener(chart, 'onmouseout', hideDetails);
 }

 function showDetails(e) {
 switch (e['row']) {
 case 0: document.getElementById('details0').style.visibility='visible';
 break;
 case 1: document.getElementById('details1').style.visibility='visible';
 break;
 case 2: document.getElementById('details2').style.visibility='visible';
 break;
 case 3: document.getElementById('details3').style.visibility='visible';
 break;
 }
 }

 function hideDetails(e) {
 switch (e['row']) {
 case 0: document.getElementById('details0').style.visibility='hidden';
 break;
 case 1: document.getElementById('details1').style.visibility='hidden';
 break;
 case 2: document.getElementById('details2').style.visibility='hidden';
 break;
 case 3: document.getElementById('details3').style.visibility='hidden';
 break;
 }
 }

 </script>
 </head>

 <body>

 <!--Div for our chart -->
 <div id="chart"></div>

 <!--Divs for our messages -->
 <div id="details0">These are the details for Q1...</div>
 <div id="details1">Here you have the numbers for Q2...</div>
 <div id="details2">Explanations for the third quarter...</div>
 <div id="details3">Q4 was as expected...</div>

 </body>

</html>

The Playground

В Google Code Playground Вы можете посмотреть и потренироваться в использовании графиков и диаграмм.

Заключение

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

Download

Demo

ВСЕ ДЛЯ НОВИЧКА

//

Мой блог находят по следующим фразам

• блог на joomla самому
• google заставка
• fonts.googleapis.com
• как twitter дизайн страницы
• оптимизация загружаемых изображений wordpress
• заставки google