Det kan være svært at få overblik over et stort talmateriale, men det er der råd for, hvis man bygger webapplikationer. Før i tiden måtte man ty til serverbaserede løsninger, hvis der skulle vises grafer og målere i browseren, men de nye HTML-teknologier – for eksempel Canvas-tagget – kan tegne direkte i websiderne. Det har gjort det meget nemmere at visualisere data i webapplikationer.
Tilmed stiller Google og andre masser af muligheder til rådighed for at indlejre de visuelle komponenter ganske gratis i websiden. Det er som regel ikke mere kompliceret end at skrive et par linjers Javascript. Google har en imponerende samling i biblioteket Visualization API.
Mulighederne omfatter grafer, tidslinjer, målere, tagclouds, såkaldte treemaps, dynamiske tabeller, organisationsdiagrammer, verdenskort, motion charts, som visualiserer data over tid, og meget, meget mere.
Nem kode i browseren
Visualization API-benyttes ved at inkludere tre Javascript-biblioteker i HTML-koden: Googles Ajax-bibliotek, Visualization API'et samt en specifik pakke for den widget, man vil benytte. Det ser ud som i eksempel 1.
Google har lagt sig i selen og gjort det rasende nemt at eksperimentere med de mange grafiske muligheder. I Googles Code Playground (som nemmest findes ved bare at søge på navnet) kan man redigere i HTML og Javascript og se resultatet med det samme. Code Playground er i parentes bemærket et imponerende eksempel på, hvor langt web-baserede udviklingsværktøjer er kommet.
Som det ses i eksempel 2 befolkes graferne med data ved at benytte et DataTable-objekt (linje 22), der som navnet siger benytter en tabel-struktur til at holde på data. To kolonner tilføjes til vores DataTable (der har variabelnavnet "data") med metoderne addColumn, der tager en datatype og en label som argumenter. Dernæst tilføjes et antal rækker med metoden addRows, og datasæt tilføjes et efter et med metoden setValue, der tager et tabel-koordinat (række- og kolonneindeks) samt tabelcellens værdi som argument. Man kan forestille sig det som et regneark, hvor en tabel opstilles.
Endeligt renderes lagkagediagrammet med linjen, der ses i eksempel 3.
Hvis diagrammet skal opdateres dynamisk, gemmes PieChart-objektet i en variabel, og derefter kan nye værdier sættes med setValue-metoden, hvorefter PieChart-objektets draw-metode kaldes igen. På den måde kan en måler eksempelvis vise realtidsdata, der kan hentes fra eksterne kilder via Ajax. Det kan benyttes til at konstruere "dashboards", hvor forretningsparametre kan overvåges i realtid.
Hver komponent kræver et bestemt layout af den DataTable, som benyttes som datakilde, og det er udførligt dokumenteret hos Google.
De fleste grafer og widgets i Visualization API kan også benyttes med Google Widget Toolkit (GWT), hvor webapplikationer kan skrives i Java, som oversættes til Javascript og HTML.
