SmartMail| Entidade Promotora:

Parceiros:

17/04/2014

Estudo sobre
bibliotecas de criao
de grficos para
HTML5

1/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

ndice
Introduo .......................................................................................................................................................... 1
D3 ....................................................................................................................................................................... 1
Highcharts .......................................................................................................................................................... 6
CanvasJS ...........................................................................................................................................................12
Referncias .......................................................................................................................................................15

Introduo
O HTML5 est rapidamente a tornar-se uma das linguagem mais poderosas da atualidade. Este permite
criar aplicaes complexas sem necessidade de plugins pesados (em termos de memria e computao), tal
como o Adobe Flash, Silverlight ou Java, criando poderosas ferramentas com menores necessidades de
recursos. Apesar de o HTML5 por si s ser muito poderoso, normalmente este associado a outras
linguagens como Javascript e CSS, linguagens que expandem as capacidades do HTML5 mantendo os
requisitos de baixo consumo de requisitos.
Especificamente na criao de grficos, algumas solues mostram o enorme potencial da linguagem.
Solues como a D3 (D3 Homepage, n.d.), a Highcharts (Highcharts Homepage, n.d.) e a CanvasJS (CanvasJS
Homepage, n.d.) oferecem um elevado nvel de personalizao e controlo, permitindo a criao de grficos
de alta qualidade que podem ser acedidos a partir de qualquer dispositivo com acesso a um browser de
Internet. Alm disso, integrar grficos criados com HTML5 num website simples, tornando a sua utilizao
ainda mais apelativa.

D3
D3 (D3 Homepage, n.d.) uma biblioteca Javascript que utiliza HTML5, CSS e SVG, Scalable Vector Graphics,
para manipular documentos e visualizar informao. A curva de aprendizagem desta biblioteca
significativamente maior do que a de outras j que necessrio trabalhar em baixo nvel para desenvolver
novos grficos. Outra desvantagem desta biblioteca associada dificuldade de aprendizagem est
relacionada com a qualidade dos grficos bsicos. Sem algum trabalho investido na esttica de um grfico,
o resultado inicial vai ter um aspeto muito simples e rudimentar. No entanto, possvel reutilizar grficos j
criados por outros utilizadores para diminuir o volume de trabalho, dada a sua abrangncia de
desenvolvimento. Devido a isto, a totalidade de ferramentas j criadas impressionante, continua a crescer
e conta com cada vez mais formas inovadoras de visualizar e explorar dados, especialmente considerando
que no so impostos limites nos tipos de grficos que podem ser feitos. Isto no probe grficos simples de
serem representados. A Figura 1 mostra um stacked bar chart com quatro valores por barra, representados
pelas quatro cores. Os mesmos dados podem ser visualizados com um grfico de barras tradicional, como
se pode ver na Figura 2. A transio entre os dois tipos de grficos feita no momento e com uma
animao rpida e fluida, demonstrando algumas das capacidades de animao da biblioteca. As animaes
possveis so inmeras e a Figura 3 mostra uma alternativa. Esta animao mostra o dfice acumulado dos
Estados Unidos da Amrica de 2001 a 2013 no centro e os vinte pases com a maior influncia nesse valor,
2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

tanto do lado das importaes e das exportaes. A cada segundo que passa o eixo temporal de referncia
avana um ms e a posio de cada pas muda a sua posio, cor e forma de modo a refletir a sua
influncia. Outra animao inclui a que est representada nas figuras Error! Reference source not found. e
Figura 4, animao esta que mostra as mudanas de rea num conjunto de clulas de Voronoi. (Diagrama
De Voronoi, n.d.) A posio inicial das clulas afeta como elas interagem entre si e ainda possvel afet-las
manualmente. A cor de cada clula afetada pela sua rea, resultando numa animao que se assemelha a
um fluido. Existem imensas formas de visualizar dados com esta biblioteca. A Figura 5 mostra as
dependncias das classes da linguagem de programao Flare. Cada crculo representa uma classe e cada
linha mostra a relao de cada classe com as relacionadas. A posio de cada ramo indica ainda se as
classes a dispostas dependem somente de outras, sem que outras dependam de si, se acontece o caso
contrrio ou uma combinao dos dois casos. assim alcanada uma viso global do estado da linguagem.
Com algumas adies torna-se possvel efetuar o drilldown para obter informao mais especfica.

Figura 1 - D3 Stacked Columns

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 2 - D3 Grouped Columns

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 3 - D3 Deficit EUA

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 4 - D3 Voronoi

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 5 - D3 Class Hiveplot

Highcharts
O Highcharts (Highcharts Homepage, n.d.) uma biblioteca Javascript, complementada por HTML5 e SVG,
que oferece um vasto potencial de criao e manipulao de grficos. O Highcharts tambm open source,
apesar de no ser gratuito como o D3, mas conta com mais e melhor documentao. Aliado a este facto
est a facilidade de programao acrescida de uma maior abstraco na utilizao e configurao dos
grficos, tornando a aprendizagem mais acessvel e simples. A complexidade de programao mais
reduzida resulta num nvel de personalizao menor, mas a biblioteca j conta com uma grande variedade
2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

de tipo de grficos. Mesmo os grficos mais bsicos so muito polidos e beneficiam das funcionalidades do
Highcharts. A Figura 6 ilustra um esquema de cores alternativo ao da Figura 7, apenas um dos esquemas
pr-definidos que podem ser aplicados no momento com facilidade. A Figura 8 mostra uma seco
ampliada do mesmo grfico, demonstrando uma das formas de fazer zoom in. Na Figura 9 pode-se observar
um pie chart tpico com capacidade de drilldown. A Figura 10 foi obtida ao carregar no segmento do pie
chart referente ao Google Chrome. O Highcharts mostra a sua capacidade de criar grficos com dados
incompletos na Figura 11, especificamente num area chart com uma falha no quarto ponto. Para mostrar
um pouco mais da variedade de tipos de grficos apresentado tambm um Heatmap com a temperatura
atmosfrica ao longo do ano de 2013 e em funo da hora do dia.

Figura 6 - Highcharts Time Series Dark

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 7 - Highcharts Time Series Zoomable

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 8 - Highcharts Time Series Zoomed In

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 9 - Highcharts Pie Base

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 10 - Highcharts Pie Drilldown Chrome

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 11 - Highcharts Area Missing Points

Figura 12 - Highcharts Large Heatmap

CanvasJS
Ao contrrio das duas bibliotecas analisadas anteriormente, o CanvasJS (CanvasJS Homepage, n.d.) no
utiliza SVG para desenhar os grficos mas sim o Canvas de HTML. (Canvas Element, n.d.) A principal
diferena entre as duas tecnologias a utilizao de vetores ou pixis, respetivamente pertencentes aos
SVG e Canvas. (Canvas vs SVG, n.d.) Resumidamente, o Canvas mais apropriado para desenhos estticos
velozes, mesmo que envolvam animaes, enquanto que os SVG esto melhor adaptados para criar
2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

grficos com uma maior interao e capacidade de adaptao ao custo de uma maior carga de
processamento. Isto faz com que CanvasJS por si s no seja a melhor escolha para desenhar grficos
simultaneamente para vrias plataformas j que estes tm de ser desenhados individualmente para cada
uma de forma a garantir que a qualidade visual se mantm. No entanto, a sua facilidade de uso, nvel de
qualidade e extremamente baixa carga de processamento torna esta biblioteca numa soluo apelativa em
certas situaes. Os tipos de grficos mais comuns esto disponveis e tm uma excelente qualidade. Passar
o ponteiro do rato por cima de cada smbolo d informao mais detalhada, como ilustrado na Figura 13.
Tambm visvel nas figuras Figura 16 e Figura 17, desta vez num area chart. Mais informao pode ser
apresentada ao selecionar certos elementos de cada grfico como apresentado na transio entre a Figura
14 e a Figura 15.

Figura 13 - CanvasJS Line Details

Figura 14 - CanvasJS Pie

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 15 - CanvasJS Pie Details

Figura 16 - CanvasJS Stacked Area

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 17 - CanvasJS Stacked Area Details

Referncias
Canvas Element. (n.d.). Retrieved from Wikipedia: http://en.wikipedia.org/wiki/Canvas_element
Canvas vs SVG. (n.d.). Retrieved from SitePoint: http://www.sitepoint.com/canvas-vs-svg-how-to-choose/
CanvasJS Homepage. (n.d.). Retrieved from CanvasJS: http://canvasjs.com/
D3 Homepage. (n.d.). Retrieved from D3: http://d3js.org/
Diagrama De Voronoi. (n.d.). Retrieved from Wikipedia: http://en.wikipedia.org/wiki/Voronoi_diagram
Highcharts Homepage. (n.d.). Retrieved from Highcharts: http://www.highcharts.com/

2/2
Projeto em curso com o apoio de: