Простое постоение графиков при помощь Google Chart Tools

Автор admin мая 15, 2010 Просмотров: 2 349

Инструменты 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сли скопировать и вставить этот адрес в браузере, вы увидите следующее:

Вы можете поместить изображение в любом месте страницы, используя URL в качестве атрибута изображения :
<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 является отличным инструментом для этого.

Интерактивные диаграммы

Чтобы включить интерактивных графиков и диаграмм в веб-страницах, вы должны использовать Google API. В этом случае, интерфейс использует не URL. Вы должны будете использовать библиотеку JavaScript, а также написать несколько строк кода, — но ничего трудного.

Существует галерея готовых графиков, которые вы можете использовать. Вы также можете создавать и совместно использовать собственные графики.
Я буду использовать локальные данные, в наших примерах, но вы можете получить ваши данные в любой другой форме. Распространенным вариантом было бы получить данные из базы с помощью AJAX. Но мы будем использовать вызов графиков при помощи технологии Google API.

Форматирование данных

Неважно, как мы получили данные, но нам нужно чтобы они были представлены в строках и столбцах. Каждый столбец определяется определенным типом данных (ID) .

Если мы хотим, чтобы отобразить прибыль компании в 2009 году в гистограмме, мы должны подготовить данные следующим образом:

Quarters 2009 Earnings
Q1 308
Q2 257
Q3 375
Q4 123

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


//Сначала создаем  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]]);
И результат:
Представление события
Мы также можем вызвать некоторые события, и вы можете предоставить пользователю реагировать на это событие и выполнять некоторые действия.
Когда пользователь помещает указатель мыши на колонку с помощью события onmouseover, пользователю выводится какое-то действие . Событие делается при помощи такого кода:
google.visualization.events.addListener(chart, 'onmouseover', showDetails);
При помощи этой команды выводится график и при наведении мышки(onmouseover) показывается событие (showDetails). Теперь нам нужно спрятать это событие, делается это командой
google.visualization.events.addListener(chart, 'onmouseout', hideDetails);
В теге <body> HTML страницы мы должны определить четыре DIV события:
<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


60c1cbd5

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

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

//

Quarters 2009 Earnings
Q1 308
Q2 257
Q3 375
Q4 123

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






«
»
You can leave a response, or trackback from your own site.
  • http://twitter.com/ecofon Vlad

    Очень полезно! Спасибо!

RSS FeedSubscribe
Follow UsFollow Us