Open Flash Chart

Uma ferramenta gratuita para fazer gráficos em Flash. Permite gráficos diversos, como gráficos de barras, de linhas, de pizza, etc.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 17/10/08
Valorize este artigo:
Vamos falar de um componente Flash muito interessante para a criação de gráficos de representação de dados. Trata-se de Open Flash Chart, uma ferramenta de código livre, gratuita e livre de uso.

Com Open Flash Chart você poderá criar gráficos em sua página web com facilidade e sem necessidade de ter Flash instalado em seu computador. Nos gráficos poderá carregar os dados que desejar e escolher entre vários tipos de gráficos, as cores, etc. Uma vez publicados os gráficos em seu website, todos os visitantes que tiverem instalado o plugin de Flash poderão vê-los, o que é quase a totalidade do tráfego que poderá receber em sua página.

É um projeto muito completo, que não só permite criar variados modelos de gráficos, como ademais tem diversos tipos de usos e tem bibliotecas para utilizar e integrar o sistema de gráficos Flash com o carregamento de dados em diversos linguagens de programação web como PHP, .NET, Perl, Java, Python, Rubi e Google WebToolkit.

Podemos encontrar Open Flash Chart em http://teethgrinder.co.uk/open-flash-chart/

No momento de escrever este artigo está em fase de desenvolvimento a nova versão do produto, Open Flash Chart 2, que tem diversas melhoras, porém principalmente se trata de uma mudança no esquema de desenvolvimento, que segundo o autor, é muito mais robusto e permite uma melhor organização do código e o crescimento do projeto. Podemos encontrar a nova versão em: http://teethgrinder.co.uk/open-flash-chart-2/

O mais destacável para os desenvolvedores que pretendam utilizar a segunda versão de Open Flash Chart é que o carregamento de dados se realiza por JSON, uma notação especial de Javascript para a definição de objetos.

Para fazer umas provas do sistema, embora a segunda versão do projeto esteja em fase Beta, em CriarWeb.com achamos que seria melhor ver a segunda versão. Segundo dia o autor ademais, a versão 1 já não seguirá sendo atualizada.

Utilizar Open Flash Chart

A criação de gráficos em Flash pode ser feito de uma maneira bastante rápida, ao menos os primeiros exemplos que oferecem. Para isso, será necessário que baixemos o sistema através da zona de Download da página de Open Flash Chart. Com isso, obteremos um arquivo zip que temos que descomprimir em nosso disco rígido.

Dentro veremos uma estrutura de diretórios que tem muitos códigos e componentes, embora não caiba se assustar, porque para os exemplos mais simples não faz falta utilizar mais que um arquivo, que é a o filme Flash (arquivo open-flash-chart.swf) que há na raiz do pacote comprimido. Esse filme ou animação Flash é o que tem o código para gerar por Flash o gráfico. Logo, teremos que configurá-lo com um arquivo JSON para lhe indicar os dados que se desejam mostrar.

Para incluir em uma página web o filme Flash temos que utilizar um código como este:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="600"
height="300" id="graph-2" align="middle">

<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="open-flash-chart.swf" />
<param name="quality" value="high" />
<embed
src="open-flash-chart.swf"
quality="high"
bgcolor="#FFFFFF"
width="600"
height="300"
name="open-flash-chart"
align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>


Este código foi extraído do tutorial 1 da criação de gráficos Flash que têm na própria página do projeto. É um código normal para incluir um filme Flash em uma página web.

Pois bem, para que isto funcione você tem que ter em conta uma série de coisas que veremos a seguir.

1) Tem que ter a animação Flash (arquivo open-flash-chart.swf) no mesmo diretório onde está o arquivo com o código HTML anterior. Poderia mudar o arquivo swf ao lugar que desejar, porém então terá que atualizar a rota a este arquivo no código HTML anterior. Observe que a rota ao arquivo está em dois lugares do código anterior, em uma etiqueta PARAM e em um atributo da etiqueta embed src="open-flash-chart.swf".

2) Tem que criar o código JSON para o carregamento de dados do gráfico e colocá-lo no lugar correto, com o nome de arquivo "data.json". Segundo a documentação de Open Flash Chart parece que se busca este arquivo de dados em vários lugares esse arquivo json, por exemplo, na raiz do domínio, porém, segundo as provas que fiz em criarweb .com, não me funcionou assim. Logo, veremos um exemplo deste código e uma maneira de localizá-lo para que funcione o exemplo, se é que não queremos colocá-lo na raiz do domínio.

3) Importante: o exemplo tampouco se visualizará corretamente se não colocar os arquivos em um servidor web. Ou seja, tem que publicá-los em seu espaço de hospedagem que tiver em Internet e não em seu computador local. Ou se tiver um servidor web configurado em seu computador, deve colocá-lo em algum diretório de publicação e acessar ao exemplo passando ao servidor web. Isto é porque o Flash adquire por http o arquivo JSON, por meio de Ajax, o que só funciona se estiver em um servidor web e acessar à página através de http.

Arquivo JSON de carregamento de dados do gráfico Flash

O arquivo JSON deve ser criado para indicar ao filme Flash quais são os dados que se tem que mostrar. Este arquivo se escreve com uma sintaxe especial, na linguagem Javascript. Não se assuste porque a sintaxe é simples de ler, entender, editar segundo suas necessidades, já que JSON é uma notação entendível pelas pessoas.

De qualquer forma, o próprio Open Flash Chart tem uma série de bibliotecas em diferentes linguagens, como comentei antes neste artigo de CriarWeb.com, para gerar jogos de dados em sintaxe JSON, por isso você não teria porque conhecer nada sobre JSON para utilizar este componente.

Um arquivo JSON que podemos utilizar de exemplo tem esta forma:

{
"title":{
"text": "Gráfica de prueba - DesarrolloWeb.com",
"style": "{font-size: 20px; color:#999900; text-align: center;}"
},

"y_legend":{
"text": "Gráfica creada con Open Flash Chart",
"style": "{color: #99cc33; font-size: 12px;}"
},

"elements":[
{
"type": "line",
"alpha": 0.5,
"colour": "#0000cc",
"text": "Páginas vistas",
"values" : [14,12,14,9,10,12,15,12,13]
},
{
"type": "line",
"alpha": 0.5,
"colour": "#660033",
"text": "Paginas vistas 2",
"values" : [9,7,8,10,12,14,13,10,11]
}
],

"x_axis":{
"stroke":2,
"colour":"#d000d0",
"grid_colour":"#00ff00"
},

"y_axis":{
"stroke": 4,
"tick_length": 3,
"colour": "#9933ff",
"grid_colour": "#0000ff",
"offset": 0,
"max": 20
}
}
Tirei isso do tutorial que oferecem na página do produto e só adaptei umas poucas coisas para personalizá-lo e de passo conhecer algumas das funcionalidades deste módulo.

Agora só teríamos que indicar o lugar onde está o arquivo com os dados. Para isso, a forma mais simples é através da URL.

Coloque simplesmente o arquivo JSON no mesmo diretório que colocou tanto a página web com o código HTML para invocar ao Flash, como o próprio filme, com nome "data.json". Sendo assim, pois terá nesse diretório 3 arquivos.
  • O arquivo HTML com o código para incluir o filme Flash
  • O arquivo da animação Flash: open-flash-chart.swf
  • O arquivo com os dados JSON: data.json
Agora acesse a essa página indicando na URL o nome do arquivo JSON:

http://www.seudominio.com/rota_de_seu_arquivo_html.html?ofc=data.json

Colocamos o exemplo em CriarWeb.com para que se possa vê-lo.





Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato