MS Chart Control an easy implementation

Basically MS chart control is used to depict the domain data to be repesented in a graphiacl format, which eases the understanding of a user to analyse the domain data. The best simple example that strikes my mind is a sales manager looking at a campaign information of multiple years. Lets see some basics that drives to build a chart control.

Before we dive in to building a chart control lets understand some of the most important chart components that we make use of it in our development.
• Chart Series:
- A series is a related group of data points. Each series is associated with a
chart type
• Chart Area:
- The chart picture consists of one or more chart areas, which are rectangular
areas that are used to draw series, labels, axes, grid lines, tick marks,
and so on. Multiple series can be plotted in one chart area, depending on
the chart types involved.
• Legend:
- A legend for the Chart picture. There can be an unlimited number of legends
in a chart.
• Grid Lines:
- There are major and minor horizontal and vertical grid lines, which usually
occur in conjunction with tick marks
• Tick Marks:
- There are major and minor horizontal and vertical tick marks, which usually
occur in conjunction with grid lines.
• Plot Area:
- The plot area is the inner rectangular area within a chart area that is used
to plot series and grid lines. Labels, tick marks, the axis title, and so
on, are all drawn outside of the plotting area and inside the chart area.
The plot area can be set via the ChartArea.InnerPlotPosition property.
• Axis Label
- Label along an axis
• Axis Title
- The title of an axis
• Chart Picture
- The chart picture, is the entire image surface that is rendered by the Chart
control. It corresponds to the root Chart object.
• Value Label
- A special label that occurs for a data point, slightly offset from where the
point is plotted. It can be the data point's value or custom text.

Below image describes complete picture of all the components of a chart control.







Chart control in aspx page

<asp:CHART ID="aChart" runat="server" BackColor="White"  Width="396px" Height="312px" BorderDashStyle="Solid" BackGradientStyle="TopBottom" BorderColor="Silver" BorderSkin-SkinStyle="None">

<legends>

<asp:Legend Docking="Bottom"  TableStyle="Wide" IsTextAutoFit="true" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"></asp:Legend>

</legends>

<series>

<asp:Series MarkerSize="9" BorderWidth="3" Name="CompliantSalesPerStoreDay" LegendText="Series User friendly name" ChartType="Line"  BorderColor="180, 26, 59, 105" Color="#99FF33" IsValueShownAsLabel="false" XValueMember="Date[Property/Column[which holds the X axix data]" YValueMembers="Property/Column[which holds the y axix data]" ChartArea="ChartArea1" Legend="Default" YAxisType="Secondary"></asp:Series>

</series>

<chartareas>

<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="White" ShadowColor="Transparent" BackGradientStyle="Center">

<area3dstyle Rotation="25" Perspective="9" LightStyle="Realistic" Inclination="40" IsRightAngleAxes="False" WallWidth="3"/>

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

<Titles>

<asp:Title Name="Display Execution"></asp:Title>

</Titles>

</asp:CHART>

Some of the important Properties programmatically

//For setting the tool tip
aChart.Series["Seriesname"].ToolTip = "TooltipText";

//Making Visible/Invisible legend information
aChart.Series["Seriesname "].IsVisibleInLegend = false;

// Enable X axis margin
aChart.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = true;

// Enable 3D, and show data point marker lines
aChart.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;

//Enabling the secondary axis and axix title
aChart.ChartAreas[0].AxisY2.Enabled = AxisEnabled.True;
aChart.ChartAreas[0].AxisY2.Title = "SecondaryAxisTitle";
aChart.ChartAreas[0].AxisY.Title = "YAxixTitle";

//Set Y axis labels format
aChart.ChartAreas["ChartArea1"].AxisY2.LabelStyle.Format = "C2";


//Setting axis labes and intervals
aChart.ChartAreas["ChartArea1"].AxisY2.Minimum = 00.0;
aChart.ChartAreas["ChartArea1"].AxisY2.Maximum = maxY2AxixValue;
aChart.ChartAreas["ChartArea1"].AxisY2.Interval = intervalValue;
aChart.ChartAreas["ChartArea1"].AxisY.Minimum = 0;
aChart.ChartAreas["ChartArea1"].AxisY.Maximum = 1;

//aChart.ChartAreas["ChartArea1"].AxisY.LabelStyle.Format = "0:0%";
aChart.ChartAreas["ChartArea1"].AxisY.LabelStyle.Format = "P2";

// Enable all elements
aChart.ChartAreas["ChartArea1"].AxisX.MinorGrid.Enabled = false;
aChart.ChartAreas["ChartArea1"].AxisX.MinorTickMark.Enabled = true;
aChart.ChartAreas["ChartArea1"].AxisX.MinorGrid.LineColor = Color.Silver;

// Set Title font
aChart.ChartAreas["ChartArea1"].AxisY.TitleFont = new Font("verdana", 8, FontStyle.Bold);
aChart.ChartAreas["ChartArea1"].AxisY2.TitleFont = new Font("verdana", 8, FontStyle.Bold);

// Set Title color
aChart.ChartAreas["ChartArea1"].AxisY.TitleForeColor = Color.Navy;
aChart.ChartAreas["ChartArea1"].AxisY2.TitleForeColor = Color.Navy;

aChart.Series["CompliantCurrent"]["ShowMarkerLines"] = "True";
aChart.Series["CompliantPrior"]["ShowMarkerLines"] = "True";

// Set new legend text font
aChart.Legends["Default"].Font = new Font("Verdana", 8, FontStyle.Regular);

// Set the legend title to Black
aChart.Legends["Default"].ForeColor = Color.Black;

// Set the alignment of the legend title
//aChart.Legends["Default"].Alignment = StringAlignment.Center;

// Disable axis labels auto fitting of text
aChart.ChartAreas["ChartArea1"].AxisX.IsLabelAutoFit = false;

// Set axis labels font
aChart.ChartAreas["ChartArea1"].AxisX.LabelStyle.Font = new Font("verdana", 7, FontStyle.Bold);
aChart.ChartAreas["ChartArea1"].AxisY.LabelStyle.Font = new Font("verdana", 7, FontStyle.Bold);
aChart.ChartAreas["ChartArea1"].AxisY2.LabelStyle.Font = new Font("verdana", 7, FontStyle.Bold);

// Set axis labels angle
aChart.ChartAreas["ChartArea1"].AxisX.LabelStyle.Angle = 30;

// Disable offset labels style
aChart.ChartAreas["ChartArea1"].AxisX.LabelStyle.IsStaggered = false;

// Enable X axis labels
aChart.ChartAreas["ChartArea1"].AxisX.LabelStyle.Enabled = true;

// Enable AntiAliasing for either Text and Graphics or just Graphics
aChart.AntiAliasing = AntiAliasingStyles.All;

//This basically contolls the look of a chart image
aChart.BorderSkin.SkinStyle = BorderSkinStyle.None;
//Setting Line annotation to chart control this feature
annotation.AnchorDataPoint = point;
annotation.Height = -35;
annotation.ResizeToContent();
annotation.LineWidth = 3;
annotation.ToolTip = "Target Start date:" + dateTime.ToShortDateString();
annotation.LineColor = Color.Green;
annotation.StartCap = LineAnchorCapStyle.None;
annotation.EndCap = LineAnchorCapStyle.None;
aChart.Annotations.Add(annotation);

//Finding Maximum point for the Y axis
//chartData is a list which contains all the series data
decimal? maxValueOfSeries = chartData.Max(c => c.YaxisSeriesName);
var findMax = new List
{
maxValueOfSeries
};
decimal? maxSecondaryAxisValue = findMax.Max();
if (maxSecondaryAxisValue.ToString().Contains("."))
maxSecondaryAxisValue = maxSecondaryAxisValue + 1;

//For the five intervals : Increase it if the interval is more than 5
var secondaryY2AxisIntervalValue = (double)(maxSecondaryAxisValue / 5);

//Note: In any case if the X axis values are set to date and in order to //retrieve the date values, following conversion is required, basically the //the dates are stored in double format.
//Convert Double to DateTime.
DateTime dateTime = DateTime.FromOADate(point.XValue);


Following are the Settings that needs to be entered in the web.config file.
Place them at appropriate level as seen in the enclosed tags.

<appSettings>
<add key="ChartImageHandler" value="storage=file;timeout=20;url=~/website/temp/TempChartImages" />
//Setting Relative path [Create a folder “TempChartImages” in the above defined path]
</appSettings>

<handlers>
<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,POST,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</handlers>
<httpHandlers>
<add path="ChartImg.axd" verb="GET,POST,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
<pages><controls>
<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>
</pages>

With this you are done with implementing a chart control.

Download Link: http://www.microsoft.com/downloads/details.aspx?FamilyId=130F7986-BF49-4FE5-9CA8-910AE6EA442C&displaylang=en