Creating Charts with Microsoft Chart Control

MS Chart Control

The Microsoft Chart Control for .NET Framework provides rich data visualization for developers. It enables you to create ASP.NET pages or Windows Forms applications with simple, intuitive, and visually compelling charts for complex statistical or financial analysis.

Benefits of using Chart Control -

* Created with 'Fast Loading' with efficient memory usage

* Can be used in C#, VB.NET, and

* Managed C++ as well as other languages which use .NET Framework.

* Chart library provides the Chart Parameters control that allows you change all parts of the chart layout by using a single easy form.

Features of MSChart control:-

* Unlimited number of chart areas.

* Automatic and manual layout and alignment management.

* Automatic and manual scaling.

* Logarithmic scaling for any base.

* Fully customizable legends.

* Intelligent data label positioning.

* Data binding. filtering.

* Data exporting.

* Binary and XML serialization.

* Unlimited number of data series and data points. e.t.c.

Types of Chart

There are around 40 different types of charts, including 2D and 3D charts,available in MSChart control. Some of them are as follows:-

* Area                                       * Bar

* Column                                 * Line

* Pyramid                                * Bubble

* Radar                                   and many more…

Important properties of Chart control

Two important properties of the class are the Series and ChartAreas
Series :-A Series stores DataPoint objects using the DataPointCollection class.

ChartArea:- The chart area is the rectangular region that encompasses the plot position, the tick marks, the axis
labels and the axis titles on the chart.

Most of the chart takes only one y value, but the chart like Bubble, Range, Stock etc. take more than one y value. Following are some of the example of creating chart.

Line Chart:

            Random random = new Random();

            for (int pointIndex = 0; pointIndex < 10; pointIndex++)

            {

                Chart1.Series["Series1"].Points.AddY(random.Next(45, 95));

                Chart1.Series["Series2"].Points.AddY(random.Next(5, 75));

            }

            // Set series chart type

            Chart1.Series["Series1"].ChartType = SeriesChartType.Line;

            Chart1.Series["Series2"].ChartType = SeriesChartType.Spline;

            // Set point labels

            Chart1.Series["Series1"].IsValueShownAsLabel = true;

            Chart1.Series["Series2"].IsValueShownAsLabel = true;

            // Enable 3D

            Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

            CustomLabel cl = new CustomLabel();

            cl.FromPosition = 1;

            cl.ToPosition = 2;

            cl.Text = "custom Label";

            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(cl);

Range Chart:

            Chart1.Series["Series1"].ChartType = SeriesChartType.SplineRange;

            // Populate series data with data

            double[] yValue1 = { 56, 74, 45, 59, 34, 87, 50, 87, 64, 34 };

            double[] yValue2 = { 42, 65, 30, 42, 25, 47, 40, 70, 34, 20 };

            Chart1.Series["Series1"].Points.DataBindY(yValue1, yValue2);

          

            // Enable 3D

            Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

One can create chart directly by setting its data source property:

<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1"

        Width="508px">

        <Series>

            <asp:Series Name="Series1" YValueMembers="Machinery etc">

            </asp:Series>

        </Series>

        <ChartAreas>

            <asp:ChartArea Name="ChartArea1">

            </asp:ChartArea>

        </ChartAreas>

    </asp:Chart>

    </br>

    <asp:Button ID="btnBack" runat="server" Text="Back" OnClick="btnBack_Click" />

    <asp:SqlDataSource ID="SqlDataSource1" runat="server"

        ConnectionString="<%$ ConnectionStrings:ConnectionString4 %>"

        ProviderName="<%$ ConnectionStrings:ConnectionString4.ProviderName %>"

        SelectCommand="SELECT * FROM [Financials]"></asp:SqlDataSource>

Stock Chart:

           // Create a new random number generator

            Random rnd = new Random();

            // Data points X value is using current date

            DateTime date = DateTime.Now.Date;

            // Add points to the stock chart series

            for (int index = 0; index < 10; index++)

            {

                Chart1.Series["Series1"].Points.AddXY(

                    date,                // X value is a date

                    rnd.Next(40, 50),    // High Y value

                    rnd.Next(10, 20),    // Low Y value

                    rnd.Next(20, 40),    // Open Y value

                    rnd.Next(20, 40));    // Close Y value

                // Add 1 day to our X value

                date = date.AddDays(1);

            }

You can use CustomLabel class to set custom label:

            CustomLabel cl = new CustomLabel();

            cl.FromPosition = 1;

            cl.ToPosition = 2;

            cl.Text = "custom Label";

            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(cl);

            Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = -60;