Criando gráficos com o ASP.Net 4.0 Chart Controls

Olá,

Como bom admirador de dados (técnicas e formatos de persistência em sua maioria) também gosto da parte de visualização de dados. E quando pensamento em “visualização de dados”, logo surge em nossa mente inúmeros tipos de gráficos. Diante disso, gostaria de neste post demonstrar como podemos criar dois tipos de gráficos muito comuns: pizza e colunas. Para tanto utilizaremos o ASP.Net 4.0 Chart Controls, este não é um recurso novo, na verdade seu lançamento veio junto com o ASP.Net 4.0, em 2010.

Para fazer o download do exemplo acesse este link: http://code.msdn.microsoft.com/Criando-grficos-com-o-43caf1a4

Os dois são muitos simples de serem construídos, mas possuem algoritmos diferentes para sua implementação.

1 – Construindo o HTML

O HTML abaixo será utilizando para construção do gráfico 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 construção do gráfico 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 página, para que os controles de gráficos 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 código abaixo irá criar dados aleatórios, estes dados são apenas dados de teste criados para este exemplo. Quando for necessário implementar uma aplicação 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 gráficos é 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 renderização ou outra, criei uma rotina de limpeza dos dados dos gráficos, o código 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 gráficos

Por fim, vamos aos algoritmos necessários para construir os gráficos. O código abaixo é o algoritmo necessário para criar o gráfico 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 código abaixo é o algoritmo necessário para criar o gráfico 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 gráficos, com os diferentes blocos de código que construímos, adicionaremos o seguinte bloco de código no evento Load de nossa página:

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 gráficos devem ficar desta forma:

 

Espero que tenha sido útil.

Até o próximo!

Por

Fernando Henrique Inocêncio Borba Ferreira

Microsoft Most Valuable Professional – Data Platform Development