Нека да приемем, че правим web страница за отразяване резултатите от фудболни мачове на нашия отбор. Изиграни са 10 мача. (6 спечелени, 3 на равно и един изгубен).

Ще покажем как да направивим една кръговидна триизмерна графика, която отразява тези резултати.

Но първо нека да отбележем, че има ограничение. Можете да изпращате до 50000 заявки в рамките на 24 часа до тези API фунцции. Не е малко всъщност.

Кратко въведение

Google API функциите връщат изображение в PNG формат. Необходимо е да поставите <img .../> таг във вашата страница, за да получите изображението.

Имате възможност да създавате различни графики – линии, правоъгълници, кръговидни (както в примера тук) и други.
Форматът на URL

Зададения URL трябва да е във формат:


Прараметрите

Следните параметри са задължителни във всяка заявка:

• Chart size (chs=<width in pixels>x<height in pixels>)
  
• Chart data (chd=<encoding type>:<chart data string>)
  
• Chart type (cht=<chart type>)
  

Други незадължителни параметри, които ще използваме в примера са:

• Chart title (chtt=<chart title>)
  
• Pie chart labels (chl=<label1|label2|label3>)
  
• Chart colors (chco=<hexadecimal format>)
  

Можете да задавате тези и други параметри в произволен ред, единствено трябва да бъдат отделени със символа '&' (с изключение на първия, който се задава с '?' )
Как да подадем параметрите

Последователно ще разгледаме как да изградим заявката:

Размер:

Искаме изображение с широчина 300 и височина 200 пиксела:


Типа на диаграмата. Искаме кръговидна триизмерна:


Искаме и надписи. Имаме общо три надписа:


И да добавим данните:

Нашия отбор има 60% спечелени, 30% равни и един изгубен мач – 10%.

Имаме 3 начина за подаване не данните:

• Просто кодиране
  
• Текстово кодиране
  
• Разширено кодиране
  

В случая, за препоръчване е текстово кодиране,  защото използваме числа за процентнтно представяне на данни. В този случай 0 ще се възприеме като 0%, 1.0 – като 1%, 30 – като 30% и т.н. -1 се възприема, като невалидна стойност.

Необходимо е да разделим тези стойности със запетая:

http://chart.apis.google.com/chart?chs=300x200&cht=p3&;chl=Won|Draw|Lost&chd=t:6 0.0,30.0,10.0

Да сложим и заглавие

Нека наречем нашия отбор „Нашия отбор”, нов ред, IT-PLACE.

Накрая, но не на последно място, да задаем и цветовете:


! не забравяйте, че Google работи коректно с UTF-8 кодирана кирилица.

Резултатът:
 


По-горе е кода с който е получен този резултат. Можете да го пробвате.

Разбира се можете да напишете много по-сложни заявки и да получите много по-атрактивни резултати. Целта на този урок е даде основните познания за начина на използване на Google graphics API функциите.
 

Източник:
talkphp.com