SimplyGold

I think it's safe to say that most people prefer seeing summaries in charts instead of having to slog through rows and columns in an Excel spreadsheet. There are many frameworks out there to help you create charts in your .NET applications. Microsoft released a chart control at the end of 2008 that allows you to create many kind of charts¹. Best of all, the chart control is completely free for you to use in any way you want.

Let's see how easy it is to create a chart.

Installations

Before you can start using the chart control, you need to install:

1. Microsoft Chart Controls for Microsoft .NET 3.5
2. Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008²

Microsoft also offers samples and documentation, which you can download at:

1. Microsoft Chart Controls Samples
2. Microsoft Chart Controls Documentation

Getting started

The first step is to setup the data points. You can do it programmatically; for example, you can (and often will) get the data from a database. For the sake of simplicity, we will define static data points in this article:

<asp:Chart ID="MostPopulatedCitiesChart" Height="300" Width="800" runat="server">
    <Series>
        <asp:Series 
            Name="Cities" 
            ChartType="Column" 
            ChartArea="MainChartArea" 
            YValueType="Int32" >
            <Points>
                <asp:DataPoint AxisLabel="Shanghai" YValues="7174" />
                <asp:DataPoint AxisLabel="Mumbai" YValues="22937" />
                <asp:DataPoint AxisLabel="Karachi" YValues="3683" />
                <asp:DataPoint AxisLabel="Delhi" YValues="29149" />
                <asp:DataPoint AxisLabel="Istanbul" YValues="6211" />
                <asp:DataPoint AxisLabel="São Paulo" YValues="7247" />
                <asp:DataPoint AxisLabel="Moscow" YValues="9722" />
                <asp:DataPoint AxisLabel="Seoul" YValues="17288" />
                <asp:DataPoint AxisLabel="Beijing" YValues="7400" />
                <asp:DataPoint AxisLabel="Mexico City" YValues="5954" />
            </Points>
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="MainChartArea" />
    </ChartAreas>
</asp:Chart>

That's all the "code" you need to write to show the chart:

But it doesn't look very good. Let's make some formatting changes.

1. Change the column colors and add gradients to something that's a little more pleasing.
2. Add background gradients to the chart area.
3. Lighten the gridlines.
4. Add a title.
5. Add labels to the axes.

6. Show all column labels (via Interval="1")

What if you wanted to make it 3D? No big deal! Inside your chart area (""), add the following line:

<Area3DStyle Enable3D="true" />

And it's as simple as that!