Gráfico Dinâmico Utilizando XML e FLASH com Componente FusionCharts Free

Nesta coluna aprenderemos montar um Gráfico utilizando o componente FusionCharts, que utiliza para exibição o FLASH e é alimentado via XML, faremos um exemplo dinâmico utilizando este componente bacana!

Por | @oficinadanet Programação
Nesta coluna aprenderemos montar um Gráfico utilizando o componente FusionCharts, que utiliza para exibição o FLASH e é alimentado via XML, faremos um exemplo dinâmico utilizando este componente bacana!

Este exemplo consiste em somente 4 fases:

Primeira:
Baixar os exemplos no site do FusionCharts, em nosso caso utilizaremos a versão free que basta se cadastrar no seguinte link e fazer o download no seguinte link: http://www.fusioncharts.com/free/Download.asp?gMenuItemId=5

Gráfico Dinâmico Utilizando XML e FLASH com Componente FusionCharts Free

Segunda:
Após baixar os exemplos escolhemos neste exemplo trabalhar com o MSLine, devemos pegar os seguintes arquivos do arquivo ZIP baixado:

Gráfico Dinâmico Utilizando XML e FLASH com Componente FusionCharts Free

Terceira:
Criaremos uma base de dados ACCESS "Coloquei o nome da base como Books.mdb", neste exemplo criaremos uma tabela com o nome: PRODUTOS e utilizaremos os seguintes campos id, meses, valor1 e valor2:

Gráfico Dinâmico Utilizando XML e FLASH com Componente FusionCharts Free

Quarta:
Criaremos duas páginas, default.asp e geradadosxml.asp.

Default.asp
Responsável por buscar os arquivos JavaScript, SWF e página onde traremos os dados em XML. Abaixo imagem com o endereço dos arquivos sublinhados.

Gráfico Dinâmico Utilizando XML e FLASH com Componente FusionCharts Free

Geradadosxml.asp
Responsável em buscar valores na base de dados e gerar página XML para trazer valores que irão alimentar nosso gráfico em SWF.

Gráfico Dinâmico Utilizando XML e FLASH com Componente FusionCharts Free

Resultado:
Gráfico Dinâmico Utilizando XML e FLASH com Componente FusionCharts Free

Observações:
1 - Ao passar o mouse sobre um ponto no gráfico será exibido o valor do pico em um ToolTip como na imagem acima;
2 - Existe um arquivo Style.css para mudar cores e tipo de fonte.

Nesta coluna tentei aproximar mais componente de Gráficos Free gratuito em nosso dia-dia, afinal o relatório bem feito é um grande passo para sua idéia ser comprada.

Referência:
http://www.fusioncharts.com/free/

Um abraço a todos!

Mais sobre: gráfico, grafico, componentes
Share Tweet
DESTAQUESMais compartilhados
Comentários