Ol,

Como bom admirador de dados (tcnicas e formatos de persistncia em sua maioria) tambm
gosto da parte de visualizao de dados. E quando pensamento em visualizao de dados,
logo surge em nossa mente inmeros tipos de grficos. Diante disso, gostaria de neste post
demonstrar como podemos criar dois tipos de grficos muito comuns: pizza e colunas. Para
tanto utilizaremos o ASP.Net 4.0 Chart Controls, este no um recurso novo, na verdade seu
lanamento veio junto com o ASP.Net 4.0, em 2010.

Os dois so muitos simples de serem construdos, mas possuem algoritmos diferentes para sua
implementao.

1 Construindo o HTML
O HTML abaixo ser utilizando para construo do grfico de colunas:
<asp:Chart ID="ColumnChart" runat="server" BackColor="WhiteSmoke"
BackGradientStyle="TopBottom"
BackSecondaryColor="White" BorderColor="26, 59, 105"
BorderlineDashStyle="Solid"
BorderWidth="2" Height="350px"
ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"
Palette="BrightPastel" Width="900px">
<Legends>
<asp:Legend LegendStyle="Row" IsTextAutoFit="False"
DockedToChartArea="ChartArea1"
Docking="Bottom" IsDockedInsideChartArea="False"
Name="Default" BackColor="Transparent"
Alignment="Center">
</asp:Legend>
</Legends>
<BorderSkin SkinStyle="Emboss" />
<Series>
<asp:Series BorderColor="180, 26, 59, 105" Name="Series1">
</asp:Series>
<asp:Series BorderColor="180, 26, 59, 105" Name="Series2">
</asp:Series>
<asp:Series BorderColor="180, 26, 59, 105" Name="Series3">
</asp:Series>
<asp:Series BorderColor="180, 26, 59, 105" Name="Series4">
</asp:Series>

<asp:Series BorderColor="180, 26, 59, 105" Name="Series5">

</asp:Series>
<asp:Series BorderColor="180, 26, 59, 105" Name="Series6">
</asp:Series>
<asp:Series BorderColor="180, 26, 59, 105" Name="Series7">
</asp:Series>
<asp:Series BorderColor="180, 26, 59, 105" Name="Series8">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea BackColor="Gainsboro"
BackGradientStyle="TopBottom" BackSecondaryColor="White"
BorderColor="64, 64, 64, 64" Name="ChartArea1"
ShadowColor="Transparent">
<AxisY2 Interval="25" IsLabelAutoFit="False">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"
<MajorGrid Enabled="False" />
</AxisY2>
<AxisX2 Interval="25" IsLabelAutoFit="False">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"
<MajorGrid Enabled="False" />
</AxisX2>
<Area3DStyle Inclination="15" IsClustered="False"
IsRightAngleAxes="False" LightStyle="Realistic"
Rotation="10" WallWidth="0" />
<AxisY LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"
<MajorGrid LineColor="64, 64, 64, 64" />
</AxisY>
<AxisX LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"
<MajorGrid LineColor="64, 64, 64, 64" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
O HTML abaixo ser utilizando para construo do grfico de pizza:
<asp:Chart ID="PieChart" runat="server" BackColor="WhiteSmoke"
BackGradientStyle="TopBottom"
BackSecondaryColor="White" BorderColor="26, 59, 105"
BorderlineDashStyle="Solid"
BorderWidth="2" Height="350px"
ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"
Palette="BrightPastel" Width="900px">
<Legends>
<asp:Legend LegendStyle="Row" IsTextAutoFit="False"
DockedToChartArea="ChartArea1"
Docking="Bottom" IsDockedInsideChartArea="False"
Name="Default" BackColor="Transparent"
Alignment="Center">
</asp:Legend>
</Legends>
<BorderSkin SkinStyle="Emboss" />
<Series>
<asp:Series BorderColor="180, 26, 59, 105" Name="Series1">
</asp:Series>
</Series>
<ChartAreas>

/>

/>

/>

/>

<asp:ChartArea BackColor="Gainsboro"
BackGradientStyle="TopBottom" BackSecondaryColor="White"
BorderColor="64, 64, 64, 64" Name="ChartArea1"
ShadowColor="Transparent">
<AxisY2 Interval="25" IsLabelAutoFit="False">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"
<MajorGrid Enabled="False" />
</AxisY2>
<AxisX2 Interval="25" IsLabelAutoFit="False">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"
<MajorGrid Enabled="False" />
</AxisX2>
<Area3DStyle Inclination="15" IsClustered="False"
IsRightAngleAxes="False" LightStyle="Realistic"
Rotation="10" WallWidth="0" />
<AxisY LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"
<MajorGrid LineColor="64, 64, 64, 64" />
</AxisY>
<AxisX LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"
<MajorGrid LineColor="64, 64, 64, 64" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>

/>

/>

/>

/>

importante lembra de fazer o registro do assembly System.Web.DataVisualization na pgina,

para que os controles de grficos sejam corretamente identificados e renderizados.
<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35"
namespace="System.Web.UI.DataVisualization.Charting"
tagprefix="asp" %>

2 Gerando dados
O cdigo abaixo ir criar dados aleatrios, estes dados so apenas dados de teste criados para
este exemplo. Quando for necessrio implementar uma aplicao real basta substituir o meio de
popular os dados desta entidade ChartData com dados vindos do Entity Framework, DataTable,
arquivos XML, ou qualquer outra fonte de dados.
private static ChartData[] CreateSampleData()
{
ChartData[] data = new ChartData[8];
Random rnd = new Random(DateTime.Now.Millisecond);
for (int i = 0; i < data.Length; i++)
{
int index = i + 1;
ChartData currentChartData = data[i] = new ChartData();
currentChartData.X = index;
currentChartData.Y = rnd.Next(25) + rnd.NextDouble();
currentChartData.Legend = string.Format("Legend {0}", index);
}

return data;
}
A estrutura que utilizo para representar os dados dos grficos a estrutura abaixo:
public class ChartData
{
public double X { get; set; }
public double Y { get; set; }
public string Legend { get; set; }
}

3 Rotina de limpeza
Para limpar qualquer dado esquecido entre uma renderizao ou outra, criei uma rotina de
limpeza dos dados dos grficos, o cdigo desta rotina pode ser visto abaixo:
private static void CleanChart(Chart currentChart)
{
foreach (var itemSerie in currentChart.Series)
{
if (itemSerie.Points != null)
itemSerie.Points.Clear();
}
}

4 Construindo os grficos
Por fim, vamos aos algoritmos necessrios para construir os grficos. O cdigo abaixo o
algoritmo necessrio para criar o grfico de colunas:
private static void BindColumnChart(Chart currentChart,
SeriesChartType chartType, params ChartData[] data)
{
for (int i = 0; i < data.Length; i++)
{
if (currentChart.Series.Count <= i)
break;
ChartData currentChartData = data[i];
// Largura da barra
currentChart.Series[i]["PointWidth"] = "1.5";
currentChart.Series[i].XValueType = ChartValueType.Double;
currentChart.Series[i].YValueType = ChartValueType.Double;
currentChart.Series[i].Points.AddXY(currentChartData.X,
currentChartData.Y);
currentChart.Series[i].Label =
currentChartData.Y.ToString("F");
currentChart.Series[i].ChartType = chartType;
currentChart.Series[i].LegendText = currentChartData.Legend;
}

currentChart.DataBind();
}
E o cdigo abaixo o algoritmo necessrio para criar o grfico de pizza:
private static void BindPieChart(Chart currentChart, SeriesChartType
chartType, params ChartData[] data)
{
int serieIndex = 0;
var xValues = data.Select(d => d.Legend).ToList();
var yValues = data.Select(d => d.Y).ToList();
currentChart.Series[serieIndex].Points.DataBindXY(xValues,
yValues);
currentChart.Series[serieIndex].ChartType = chartType;
currentChart.ChartAreas[0].Area3DStyle.Enable3D = true;
currentChart.DataBind();
}

5 Integrando tudo
Para renderizar todos os grficos, com os diferentes blocos de cdigo que construmos,
adicionaremos o seguinte bloco de cdigo no evento Load de nossa pgina:
protected void Page_Load(object sender, EventArgs e)
{
CleanChart(this.ColumnChart);
CleanChart(this.PieChart);
var data = CreateSampleData();
BindColumnChart(this.ColumnChart, SeriesChartType.Column, data);
BindPieChart(this.PieChart, SeriesChartType.Pie, data);
}

6 Resultado final
Por fim, nossos grficos devem ficar desta forma: