Gerando Gráficos em ASP.NET

Um componente que gosto de utilizar para gerar gráficos é o FusionCharts. Através dele é possível criar gráficos animados e interativos em Flash como gráficos em pizza, barra, colunas, funil, linha, área, bolha, etc. Além de trabalhar com ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby on Rails, Python e HTML puro, pode-se utilizar em conjunto com bancos de dados como SQL Server, Oracle, MySQL, PostgreSQL, etc... O seu funcionamento consiste em apenas gerar o XML (em tempo de execução ou não) e indicar qual o gráfico. Vamos à prática...



Acesse o site da FusionCharts e baixe o pacote com os gráficos (na versão trial vem apenas os gráficos comuns - os mais complexos vem na versão paga). No arquivo baixado vem os SWF's dos gráficos, exemplos de XML's a serem gerados para cada gráficos, o JavaScript a ser incorporado na página e demais documentos (qualquer dúvida veja na pasta Code > CSNET que contêm um exemplo em ASP.NET e contêm todos os arquivos que irá precisar). Para nosso exemplo, vamos gerar um gráfico em pizza.

Crie um Web Site e adicione as pastas conforme a estrutura abaixo:

Adicione no App_Code as classes Util.cs e DbConn.cs. Na Bin adicione a referência à DLL da FusionCharts.dll, na Graficos adicione o SWF do gráfico que iremos gerar (no caso escolha o Pizza3D.swf) e na pasta Js adicione o FusionCharts.js. Todos esses arquivos são encontrados no ZIP que baixou no mesmo caminho dito anteriormente.

Adicione uma página ASPX agora e adicione no body ou no head o script:
<script language="Javascript" type="text/javascript" src="js/FusionCharts.js"></script>

Também adicione um Literal (Controle) no local onde deverá surgir o gráfico. Para fins didáticos coloque o ID do controle como GraphPizza. Agora tudo será no Code-Behind... Adicione os namespaces Utilities e InfoSoftGlobal usando a cláusula using. Em seguida criamos um método onde é gerado o XML e encapsulado sobre o SWF da seguinte forma:

public void CriarGraficoPizza3D()
{
    string strXML = "<graph showNames='1' caption='Tipos de Clientes' decimalPrecision='0'>";
    strXML += "<set name='Alvos' value='10' color='ED1C24'/>";
    strXML += "<set name='Prospects' value='5' color='FFFF00'/>";
    strXML += "<set name='Clientes' value='2' color='00E600'/>";
    strXML += "</graph>";
    GraphPizza.Text = FusionCharts.RenderChart("Graficos/Pizza3D.swf", "", strXML, "GraficoPizza3D", "400", "300", false, false);
}

No caso, gero todo o XML contendo os dados a serem apresentados e o passo por parâmetro ao método do FusionCharts para renderizá-lo e exibi-lo. Bem simples, não? Esse é o exemplo mais fácil... Há várias formas de apresentá-lo bem como suas opções fazem com que apresente mais variantes. O mais difícil (quer dizer trabalhoso) é gerar o XML...

2 comentários:

Unknown disse...

Thiago, a última versão do FusionCharts_Evaluation não vem com a classe Util.cs. Será que você poderia disponibilizar o código desse projeto online(hospedado do megaupload, por exemplo)?!

Também não estou conseguindo rodar os exemplos do FusionCharts no VS2008 porque acusa um erro na linha do web.config.
O erro é:

ASP.NET runtime error: Unrecognized attribute 'targetFramework'. Note that attribute names are case-sensitive. (D:\asp.net\FusionCharts_Evaluation\Code\VB_NET\web.config line 20) D:\asp.net\FusionCharts_Evaluation\Code\VB_NET\Default.aspx 1 1 Miscellaneous Files

Já passou por isso?! Sabe como resolvê-lo?!

Aproveitando... você tem esse exemplo com barras 3d?!

Obrigado.

Thiago Marçal disse...

Brian, em si, o Fusion Charts não requer configuração no web.config. Digo isso na versão free, não sei informar na paga. Infelizmente, no caso, precisaria avaliar seu código...

Postar um comentário