Home > Computer Science, Controls > MS Chart with C#

MS Chart with C#

In this article I’d like to describe MS Chart (.Net 4.0) through an example. The picture below is the final result.

MS Chart

Fig 1

Initialization:

1-      Create a temp folder to store temp image files (c:\TempImageFiles) and add some codes to your web config file.
<compilation debug="true" targetFramework="4.0">

<assemblies>

<add assembly=”System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35″/>

</assemblies>

</compilation>

<appSettings>

<add key=”ChartImageHandler” value=”storage=file;timeout=20;dir=c:\TempImageFiles\”/>

</appSettings>

<system.web>

<httpHandlers>

<add path=”ChartImg.axd” verb=”GET,HEAD,POST” type=”System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ validate=”false” />

</httpHandlers>

</system.web>
In .Net 4.0 edition you don’t need to download and install any control to use MSChart, you just need to drag and drop it from Data section of MS Visual Studio 2010 toolbox to your form (But I really dislike doing this, it’s better to write code in source tab of your form). In order to code it, add System.Web.UI.DataVisualization.Charting namespace to your form.

In this sample I will go through coding MSChart at runtime. Once you learned this, you learned static one also.

Start Coding:

ASPX Form:

Add this code to your form, this is the only thing you need to have in your aspx form:

<asp:Chart ID="MSChart" runat="server">

</asp:Chart>

Code Behind:

Below codes are clear, you just add them in your cs file:

MSChart.Width = 900;

MSChart.Height = 600;

//It renders chart as an image and places it into an &lt;img&gt; html tag.

MSChart.RenderType = RenderType.ImageTag;

//Adds title to chart

Title t = new Title("Sample Chart", Docking.Top, new System.Drawing.Font("Tahoma", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));

MSChart.Titles.Add(t);

Chart Sections:

MS Chart has two primary sections, Series and CharArea. You can either have a design time data in these two sections or add data programmatically during runtime.

–          Series are the most important part of each chart. Every chart has at least one series. A chart is a series of numbers which can be plotted into space as X and Y points. These numbers are dependent and depict a concept together regarding an issue. Assume that this series build a sine shape line, so this sine shape line is a series then you can add another series in the same chart to depict another meaning. These two series can be used to compare two different data of the same concept.

Fig 2

Fig 3

–          ChartArea: Is a place that you want to plot your series (so it contains series). It is a collection; therefore your chart can contain multiple ChartAreas.

MSChart.Series.Add("Series1");

MSChart.Series["Series1"].ChartType = SeriesChartType.Column;

MSChart.Series["Series1"].Color = System.Drawing.Color.Goldenrod;

MSChart.Series["Series1"].YValueType = ChartValueType.Int32;

Series1 is added to the collection of MSChart.Series. Each series has some important properties. ChartType that specifies the type of chart which can be Column (Same as ours), Pie, Doughnut etc. Color is to specify color of series and YValueType is the type of values in Y axis.

MSChart.ChartAreas.Add("ChartMainArea");

After defining Series you should define ChartArea. You can easily add a chart area to the CharAreas collection.

Legends:


Legend leg = new Legend("Legend1");

MSChart.Legends.Add(leg);

MSChart.Legends[0].Alignment = System.Drawing.StringAlignment.Near;

In order to describe each series in a chart, Legends are used. To add them you can write the above code. Each ChartArea needs a legend; it automatically detects your series in a ChartArea.

Now it’s time to add data to our series:

Random _r = new Random();
for (int i = 10; i &lt; 100; i+=10)

{
int n = _r.Next(0, 100);
MSChart.Series["Series1"].Points.AddXY(i, n);

}
Points.AddXY(x,y)

is a fast method to specify data of each point directly.

Up to now the below picture is created.

MS Chart

Fig 4

Theming and Appearance:

MSChart has some appearance properties that help your chart look more attractive. (Since chart is only for reporting purpose, either management or customer will see it, so make it the most beautiful :D, don’t forget the power of feelings).

You have definitely seen 3D charts. We want to develop one.

ChartArea3DStyle chartArea3DStyle = new ChartArea3DStyle();

chartArea3DStyle.Enable3D = true;

chartArea3DStyle.LightStyle = LightStyle.Realistic;

chartArea3DStyle.Rotation = 5;

chartArea3DStyle.Inclination = 40;

chartArea3DStyle.PointDepth = 50;

MSChart.ChartAreas["ChartMainArea"].Area3DStyle = chartArea3DStyle;

ChartArea3DStyle class has some properties to style a 3D chart. Then Area3DStyle property should be assigned with a ChartArea3DStyle object. After these simple changes you’ll have the below picture.

MS Chart

Fig 5

Adding more series:

It is really easy to add more series. Just write the following code:

MSChart.Series.Add("Series2");

MSChart.Series["Series2"].ChartType = SeriesChartType.Column;

MSChart.Series["Series2"].BorderWidth = 2;

MSChart.Series["Series2"].YValueType = ChartValueType.Int32;

for (int i = 15; i <= 100; i += 10)

{

MSChart.Series["Series2"].Points.AddXY(i, i);

}
MS Chart

Fig 6

It adds a new series and adds some points to it.

Wish you enjoyed it.

Peace and love for you all

References:

http://www.datadynamics.com/Help/ActiveReports6/arCONChartSeries.html

http://archive.msdn.microsoft.com/mschart

Advertisements
  1. Geek
    April 28, 2011 at 7:55 am

    Thanks, again short and useful but you could use a better example, your X value and Y value are the same and the same type.

    • April 29, 2011 at 10:28 pm

      Hi Geek 😉
      I’m gonna write a new post on MSChart, then I give more examples. 😉

  2. October 16, 2012 at 11:08 pm

    This is the right website for everyone who would like to understand this
    topic. You understand so much its almost tough to argue with you (not that
    I really will need to…HaHa). You definitely put a new spin on
    a topic that has been written about for ages.

    Great stuff, just great!

    • December 10, 2012 at 9:36 am

      Thanks for your kind expressions and comments. Im glad that you think like that.

  3. February 25, 2013 at 7:05 am

    Hi there very cool site!! Man .. Beautiful .. Wonderful .
    . I’ll bookmark your website and take the feeds additionally? I am glad to search out a lot of useful information here within the post, we’d
    like work out extra strategies in this regard, thanks
    for sharing. . . . . .

    • May 7, 2013 at 7:36 am

      It is my absolute honor that you had such an experience. Deeply thanks for motivating me to continue blogging.

  4. May 7, 2013 at 5:12 am

    Thanks on your marvelous posting! I quite enjoyed reading it, you
    may be a great author.I will remember to bookmark your
    blog and may come back in the foreseeable future.
    I want to encourage yourself to continue your great work,
    have a nice morning!

    • May 7, 2013 at 7:34 am

      Deeply thanks for your kind remarks. I’m so happy that you liked my post.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: