Gráficos no ASP.NET com Microsoft Chart Controls
O uso de gráficos em aplicações web se tornou cada vez mais comum. Temos várias opções pagas no mercado, e desde o fim do ano passado a Microsoft disponibilizou seu recurso de representação gráfica para WindowsForms e WebForms, o Microsoft Chart Controls. A primeira e mais óbvia vantagem é o custo zero, o Chart Controls é de graça e pode ser baixado nos links abaixo :
Microsoft Chart Controls for Microsoft .NET Framework 3.5
http://www.microsoft.com/downloads/details.aspx?FamilyId=130F7986-BF49-4FE5-9CA8-910AE6EA442C&displaylang=en
Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008
http://www.microsoft.com/downloads/details.aspx?familyid=1D69CE13-E1E5-4315-825C-F14D33A303E9&displaylang=en
A outra vantagem que vejo é a simplicidade de uso, depois de instalado, basta arrastá-lo da Toolbox do Visual Studio e com poucas linhas de código já se tem resultado.
Vamos ver um simples exemplo, representando vendedores e o total de vendas de cada um deles.
Abra o Visual Studio 2008 ou o Visual Web Developer 2008 e crie um novo site.
Localize na Toolbox, aba Data, o controle Chart e arraste para seu arquivo default.aspx.
Chart Control na aba Data da Toolbox.
Não vou entrar em detalhes de layout, essa parte pode ser facilmente configurada nas propriedades do controle. Salvo isso, o codigo em seu aspx deve ficar similar a esse :
<asp:Chart ID="Chart1" runat="server"
BackColor="128, 128, 255"
BackGradientStyle="TopBottom"
BackImageWrapMode="Scaled"
BackSecondaryColor="192, 192, 255"
BorderlineColor="255, 192, 128"
Width="539px" >
<BorderSkin
BackGradientStyle="TopBottom"
BackImageTransparentColor="192, 255, 192"
SkinStyle="Raised" />
<series>
<asp:Series Name="Series1">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea
BackColor="128, 128, 255"
BackGradientStyle="TopBottom"
Name="ChartArea1">
</asp:ChartArea>
</chartareas>
</asp:Chart>
No code-behind ( default.aspx.cs ), vamos codificar o evento Load para criar os dados e vincular ao nosso controle de gráfico.
protected void Page_Load(object sender, EventArgs e){
// Criando dois arrays, um com os nomes dos vendedores, e
// Outro com os valores das vendas
string[] Vendedores = { "João", "José", "Antônio", "Maria" };
double[] Totais = { 1000, 2300, 1220.33, 2222.40 };
// Adicionando Título
Chart1.Titles.Add("Relatório de Vendas");
// Setando tipo de Grafico ( Colunas Verticais )
Chart1.Series[0].ChartType = SeriesChartType.Column;
// Vinculando os arrays ao Controle para que ele gere o
// Gráfico
Chart1.Series[0].Points.DataBindXY(Vendedores, Totais);
// Mostrando os Gráficos com valores
Chart1.Series[0].IsValueShownAsLabel = true;
foreach (Series s in Chart1.Series)
{
for (int i = 0; i < s.Points.Count; i++)
{
// Mostra o valor como tooltip
s.Points[i].ToolTip = "#VAL{C}";
}
}
}
Compilando nossa aplicação e rodando devemos ter
o resultado da imagem abaixo :
No próximo Post de Chart Controls vamos falar sobre o efeito HighLight, a mudança de cor ao passar o mouse sobre áreas do nosso gráfico.
[]s
Mais exemplos :
Samples Environment for Microsoft Chart Controls
http://code.msdn.microsoft.com/mschart