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...
Postagens
