Skip to main content

asp.net charting controls microsoft (ms chart) Line chart samples / tutorial

If you are thinking of charting, graph and reporting then MS Chart is one of the best and easy way to display your data.
By default ms chart include with visual studio 2010 and 2012 (.net framework 4.0, 4.5 or later), you can also use it with visual studio 2008 by installing ms chart component from Microsoft website.

ToolBox Data Tag Chart Control
You can it inside data tag in toolbox after drag and drop it to your page it will add following keys and handlers to your web config file.

Config Setting Required For Microsoft Chart Control -

Aspx Page :-
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<appSettings>
  <add key="ChartImageHandler" value="storage=memory;timeout=20;"/>

<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>

<controls>
     <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
          assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</controls>

<system.webServer>
  <handlers>
     <remove name="ChartImageHandler" />
     <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST"
        path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

  </handlers>


It will also add an assembly to your project and reference it to web config as below.
<assemblies>
  <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

</assemblies>

Chart Control Definition (Asp.net Mark Up) -

There is lots of chart type available in MS Chart I am taking here only line chart type example.
Chart Type MS Chart


<asp:Chart EnableViewState="false" ID="chrtSupporters" runat="server" Width="600px">
    <Series>
        <asp:Series  ChartType="Line" Name="Series1">
        </asp:Series>
        <asp:Series  ChartType="Line" Name="Series2">
        </asp:Series>
        <asp:Series  ChartType="Line" Name="Series3">
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="chrtAreaSupporters">
            <AxisY LineColor="White">
                <LabelStyle Font="Trebuchet MS, 8.25pt" />
                <MajorGrid LineColor="#e6e6e6" />
                <MinorGrid Enabled="false" LineColor="#e6e6e6" />
            </AxisY>
            <AxisX LineColor="White">
                <LabelStyle Font="Trebuchet MS, 8.25pt" />
                <MajorGrid LineColor="#e6e6e6" />
                <MinorGrid Enabled="false" LineColor="#e6e6e6" />
            </AxisX>
        </asp:ChartArea>
    </ChartAreas>

</asp:Chart>

Simple Line Chart Demo MS Chart
Simple Line Chart Demo

Chart X, Y Axis Value Type -

You can even change the X value chart type and Y value chart type by default both axis chart type is double but if you want to show date or datetime you can do so by the property XValueType and YValueType as given below, when you are using date or datetime value type then you have to assign date value like this 
dtSms.XValue = COS.DateOfRegistrations.ToOADate(); ( See in adding data point to chart section. )


chrtSupporters.ChartAreas[0].AxisX.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8F);
chrtSupporters.ChartAreas[0].AxisY.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8F);
chrtSupporters.ChartAreas[0].AxisY.Title = "Number Of Supporters";

chrtSupporters.Series["Series1"].XValueType = ChartValueType.Date;
chrtSupporters.Series["Series2"].XValueType = ChartValueType.Date;
chrtSupporters.Series["Series3"].XValueType = ChartValueType.Date;

chrtSupporters.ChartAreas[0].AxisX.LabelStyle.IntervalType = System.Web.UI.DataVisualization.Charting.DateTimeIntervalType.Days;
chrtSupporters.ChartAreas[0].AxisX.IntervalType = DateTimeIntervalType.Days;
//chrtSupporters.ChartAreas[0].AxisX.Interval = -1; //for showing all label
chrtSupporters.ChartAreas[0].AxisX.LabelStyle.Format = "ddMMM";
  
chrtSupporters.Series["Series1"].YValueType = ChartValueType.Int32;
chrtSupporters.Series["Series2"].YValueType = ChartValueType.Int32;
chrtSupporters.Series["Series3"].YValueType = ChartValueType.Int32;

Chart Axis Value Type
Chart Axis Value Type 

Rotate the X, Y Axis Label by the property LabelStyle.Angle.


chrtSupporters.ChartAreas[0].AxisX.LabelStyle.Angle = -90;

Rotate the X, Y Axis Label
Rotate X Axis Label

Adding Series Symbol Legend In MS Chart -


Legend SeriesSymbolLegend = new Legend("SeriesSymbolLegend");
SeriesSymbolLegend.Docking = Docking.Bottom;
SeriesSymbolLegend.Alignment = System.Drawing.StringAlignment.Center;
SeriesSymbolLegend.IsEquallySpacedItems = true;
SeriesSymbolLegend.IsTextAutoFit = true;
chrtSupporters.Legends.Add(SeriesSymbolLegend);

chrtSupporters.Series["Series1"].LegendText = "Missed Call Registration";
chrtSupporters.Series["Series2"].LegendText = "Online Registration";

chrtSupporters.Series["Series3"].LegendText = "SMS Registration";

Series Symbol Legend In MS Chart
Series Symbol Legend

Adding Custom Legend To MS Chart -


Legend CustomLegend = new Legend("Custome Legend");
CustomLegend.CustomItems.Add(new LegendItem("LegendItem", System.Drawing.Color.Red, ""));
CustomLegend.CustomItems[0].Cells.Add(new LegendCell(LegendCellType.Text, "My Custom text", System.Drawing.ContentAlignment.MiddleCenter));

chrtSupporters.Legends.Add(CustomLegend);


Adding DataPoint To Chart Control From CS File -


DataPoint dpSms = new DataPoint();

dpSms.YValues = new double[] { COS.CountOfRegistrations };

chrtSupporters.Series["Series3"].XValueType = ChartValueType.Date;
dtSms.XValue = COS.DateOfRegistrations.ToOADate();

// This will show each and every point of series.
dpSms.ToolTip = string.Format("{0}({1})", dpSms.YValues[0], COS.DateOfRegistrations.ToString("dd-MMM"));

chrtSupporters.Series["Series1"].Points.Add(dpSms);

// This will define the marker size and shape of series.
dpSms.MarkerStyle = MarkerStyle.Circle;
dpSms.MarkerSize = 3;


Custom X Axis Label -

//Instead of XAxis Value label will show
dtSms.AxisLabel = "XValue = " + COS.DateOfRegistrations.ToString("dd-MMM");
chrtSupporters.ChartAreas[0].AxisX.Interval = -1; //for showing all label

Custom X Axis Label
X Axis Labeling

We can define custom label in series data points (Marker position).

//To Show custome value in label of series.
dpSms.Label = string.Format("{0}({1})", dtSms.YValues[0], COS.DateOfRegistrations.ToString("dd-MMM"));
// To Show the YAxis value in label of series.
//dtSms.IsValueShownAsLabel = true;

 custom label in series data points
 custom label in series data points

Remove the margin of Series Lines and Grid Lines -

chrtSupporters.ChartAreas[0].AxisX.IsMarginVisible = false;

Increasing Thickness Of Series Lines Of MS Chart -

We can increase or decrease thickness of series lines by the property BorderWidth and color by BorderColor.

chrtSupporters.Series["Series1"].BorderWidth = 2;
chrtSupporters.Series["Series2"].BorderWidth = 2;
chrtSupporters.Series["Series3"].BorderWidth = 2;

//chrtSupporters.Series["Series1"].BorderColor = System.Drawing.Color.Blue;


Two Chart Area In One MS Chart -


<asp:Chart EnableViewState="false" ID="chrtSupporters" runat="server" Width="600px">
<Series>
<asp:Series ChartArea="chrtAreaFirst" XValueType="Date" YValueType="Int32" ChartType="Line" Name="Series1">
</asp:Series>
<asp:Series ChartArea="chrtAreaFirst" XValueType="Date" YValueType="Int32" ChartType="Line" Name="Series2">
</asp:Series>
<asp:Series ChartArea=" chrtAreaSecond" XValueType="Date" YValueType="Int32" ChartType="Line" Name="Series3">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="chrtAreaFirst">
    <AxisY LineColor="White">
        <LabelStyle Font="Trebuchet MS, 8.25pt" />
        <MajorGrid LineColor="#e6e6e6" />
        <MinorGrid Enabled="false" LineColor="#e6e6e6" />
    </AxisY>
    <AxisX LineColor="White">
        <LabelStyle Font="Trebuchet MS, 8.25pt" />
        <MajorGrid LineColor="#e6e6e6" />
        <MinorGrid Enabled="false" LineColor="#e6e6e6" />
    </AxisX>
</asp:ChartArea>

    <asp:ChartArea Name="chrtAreaSecond">
    <AxisY LineColor="White">
        <LabelStyle Font="Trebuchet MS, 8.25pt" />
        <MajorGrid LineColor="#e6e6e6" />
        <MinorGrid Enabled="false" LineColor="#e6e6e6" />
    </AxisY>
    <AxisX LineColor="White">
        <LabelStyle Font="Trebuchet MS, 8.25pt" />
        <MajorGrid LineColor="#e6e6e6" />
        <MinorGrid Enabled="false" LineColor="#e6e6e6" />
    </AxisX>
</asp:ChartArea>
</ChartAreas>

</asp:Chart>

Two Chart Area In One MS Chart
Two Chart Area In One MS Chart

Most of the component (e.g. series, legend, annotation etc.) of MS Chart has a property named chartarea container, we can define that which will show this component.

//You Can Define In Which ChartArea This Legend Will Be Show (In Case Of Multiple ChartArea)
XAxisLegend.DockedToChartArea = "MyChartArea";

//You Can Define Parent ChartArea Of Series Here
chrtSupporters.Series["Series1"].ChartArea = " MyChartArea ";


Adding Annotation To MS Chart -


RectangleAnnotation ann = new RectangleAnnotation();
ann.Text = "Chart showing supporter origin";
ann.IsMultiline = true;
ann.AxisX = chrtSupporters.ChartAreas[0].AxisX;
ann.AxisY = chrtSupporters.ChartAreas[0].AxisY;
ann.AnchorX = 2;  // these values must be inside the range
ann.AnchorY = 2;  // these values must be inside the range
ann.Font = new System.Drawing.Font("Trebuchet MS", 8F);

//add the annotation to the chart annotations list

chrtSupporters.Annotations.Add(ann);


Popular posts from this blog

Uploading large file in chunks in Asp.net Mvc c# from Javascript ajax

Often we have a requirement to upload files in Asp.net, Mvc c# application but when it comes to uploading larger file, we always think how to do it as uploading large file in one go have many challenges like UI responsiveness, If network fluctuate for a moment in between then uploading task get breaks and user have to upload it again etc.

How to handle click event of linkbutton inside gridview

Recently I have posted how to sort only current page of gridview, Scrollble gridview with fixed header through javascript, File upload control inside gridview during postback and now i am going to explain how to handle click event of linkbutton or any button type control inside gridview.

We can handle click event of any button type control inside gridview by two way first is through event bubbling and second one is directly (in this type of event handling we need to access current girdviewrow container)

how $document.ready() is different from window.onload()

we often use window.onload() in javascript and $document.ready() in jquery and assume that both are same just jquery library wrap up javascript window.onload() and introduce $document.ready() but no there is much difference between them below is the explanation -

What is NameSpace in .Net

This a basic question which allways asked in the interview that what is the namespace ,do you know about namespace,can you tell me some words about namespace.

Merging multiple PDFs using iTextSharp in asp.net c#

In this article i will show you how to merge multiple pdfs into one using ITextSharp below is the two approach one is to pass your input files path, output file path (will be created if not exist) and another is pass direct input stream, output stream and it will write the merge files into output stream.