Nosso objetivo será desenvolver um Gráfico utilizando o componente FusionCharts, exibido via FLASH e alimentado via XML.

O exemplo será um simples gráfico de linha que consiste em 4 fases:

Primeira:

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

Página FusionCharts Free

Segunda:

Após baixar os exemplos, escolhemos trabalhar com o MSLine. Devemos pegar os seguintes arquivos do arquivo ZIP baixado:

Arquivos swf e js que utilizaremos no gráfico

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.

Banco de dados Access

Quarta:

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

Default.asp

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

Página Principal

Geradadosxml.asp

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

Página para alimentar gráfico

Resultado:

Resultado final após todos procedimentos

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.

Neste artigo tentei aproximar mais o 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/

Abraço a todos!

Download dos arquivos para verificação do resultado em sua máquina.