Grafice cu Google API Charts


Google şi-a dezvoltat un sistem propriu de grafice pentru Google Video, Google Finance şi alte servicii. Dar era folosit intern. În cele din urmă s-au gândit: de ce să nu se bucure şi alţii de aceste grafice (relativ) uşor generabile? Şi astfel săptămâna aceasta webmasterii au mai câştigat un aliat: un API pentru grafice. Încărcaţi acest link şi… veţi vedea întocmai graficul de mai jos.

Este cel mai banal exemplu dar bun pentru o scurtă introducere în acest API. Prima parte nu necesită explicaţie:

chart.apis.google.com/chart?

urmează apoi câţiva parametri:

cht=p3

Cu cht spunem ce tip de grafic dorim: p3 este pentru pie (plăcintă); bhs şi bvs pentru bări orizontale, respectiv verticale; lc pentru grafic tip linie… şi mai sunt şi alte tipuri pentru care vă invit să vedeţi documentaţia.

chd=s:MP

Aici vine partea cea mai „chineză” a API-ului. Evident cel mai important (dincolo de culori, chiar şi dincolo de tipul de grafic) este să putem indica valorile pe care le dorim. Credeţi sau nu, MP sunt valorile indicate în acest grafic. Există de fapt mai multe moduri de a furniza date graficului: simple, text şi extended encoding. Nu voi intra în explicaţii, doar pentru a înţelege ce e cu MP (am ales aceste litere de la Mere şi Pere) voi spune că am folosit simple encoding, ce atribuie valori literelor, astfel că M este 12 şi P 15. Nu vă speriaţi: există o funcţie JavaScript oferită de Google la care i se transmite parametru un şir de cifre şi returnează codificarea în litere. Pentru mai multe detalii din nou vă invit la documentaţie.

chs=350x170

Relativ simplu şi clar: chart size – chs. Se indică dimensiunea în pixeli.

chl=Mere|Pere

Am indicat etichetele pentru graficul pie.

În funcţie de dorinţe şi pretenţii lucrurile pot fi mai complicate sau foarte complicate :) . Indicarea unor culori sau anumite tipuri de grafice poate însemna ceva bătaie de cap, dar cred că toate trec cu obişnuinţa… Eu nu am ajuns să lucrez cu ele prea în detaliu şi de aceea poate mi se par lucrurile destul de greoaie ca utilizare.

Închei cu alte două grafice. Vedeţi în sursa acestei pagini cum au fost obţinute. Google… mulţumim!

PS: nu uitaţi de soluţia jQuery pentru grafice.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *