C# – Host Microsoft Chart in WPF application

How we provide our customers the way to display their data is a important feature of every software for data management. Maybe the users want to use Bar, Line, Pie, Pyramid chart… someone wants to display as 2D and the other wants 3D for his plotting. The financial prefer Kagi, Renko, Point and Figure chart… meanwhile the statisticians maybe use Bar and Column, Cylinder or just simple Line chart. Because of these numerously different requirements we need a stable chart library flexible for customizing and extending. We can make ourselves one or there are a lot of candidates out there in internet such as ZedGraph, Telerik component, DevExpress component… But my favor is Microsoft Chart included in .Net Framework. The components of Telerik, for example, are beautiful with their animations (in WPF) and have a lot of advance features. However the structure of this framework is not stable with breaking changes with new released versions. The Microsoft Chart provides us all simple features necessary for data representing and is very stable. We can use it on Windows Forms or WPF or even on ASP.NET website.

There are already a lot of examples of Microsoft Chart. One of them is http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=4418 and I find it very helpful and informative. If you’ve any question about Microsoft Chart, then first take a look at this example. It covers almost all problems. So please don’t expect an outstanding example about Microsoft Chart in this post. I just would like to recommend it as a good candidate when you consider about a chart library. Next I’ll make some small examples to illustrate some FAQ questions when we work with Microsoft Chart.

My demo project is a WPF application and the Microsoft Chart is a windows form component therefore to host it in a WPF application, please follow steps described in WPF – Use ZedGraph in WPF application.

1. Supported chart value type.
Microsoft Chart supports many kinds of primitive data types such as Date, DateTime, DateTimeOffset, Double, Int32, String … To define value type of an axis, we just have to set XValueType or YValueType of Serie as code listing below

public void ExecuteExample1()
{
	mainChart.Series.Clear();
	mainChart.DataSource = null;
	Dictionary<DateTime, int> values = new Dictionary<DateTime, int>();
	Random r = new Random((int)DateTime.Now.Ticks);
	for (int index = 0; index < 10; index++)
	{
		values.Add(DateTime.Now.AddDays(index), (int)(r.NextDouble() * 100));
	}

	Series serie = new Series();
	serie.XValueType = ChartValueType.DateTime;
	serie.XValueMember = "Key";
	serie.YValueType = ChartValueType.Int32;
	serie.YValueMembers = "Value";
	mainChart.Series.Add(serie);
	mainChart.DataSource = values;
	//mainChart.ChartAreas[0].AxisX.Interval = 1;
}

In code above, I would like to display a set of data whose x has type of DateTime and y has type of int. Data set is stored in a Dictionary whose DateTime member is counted from today till next 10 days and Int member is just a random number.

Microsoft Chart DateTime

2. Kind of series chart type, add data point and not start from zero.
Besides of data types, Microsoft Chart also supports many kinds of series chart type such as Area, Bar, BoxPlot, Bubble, Candlestick, Column, and Doughnut … which fulfill any requirements in many fields. The ChartType can be set for each series which means that on one plot you can have many series and each of them has its own representing.

public void ExecuteExample2()
{
	mainChart.Series.Clear();
	mainChart.DataSource = null;

	int yValue = 50, xValue = 0;
	Random r = new Random();
	Series serie = new Series();
	serie.XValueType = ChartValueType.Int32;
	serie.YValueType = ChartValueType.Int32;
	mainChart.Series.Add(serie);
	mainChart.Series[0].ChartType = SeriesChartType.Line;
	mainChart.Series[0].MarkerStyle = MarkerStyle.Circle;
	mainChart.Series[0].MarkerSize = 8;
	mainChart.Series[0].IsValueShownAsLabel = true;
	mainChart.ChartAreas[0].AxisX.IntervalType = DateTimeIntervalType.Auto;
	for (int index = 0; index < 100; index++)
	{
		yValue = r.Next(200, 1000);
		xValue++;
		mainChart.Series[0].Points.Add(new DataPoint(xValue, yValue));
	}
	mainChart.ChartAreas[0].AxisY.IsStartedFromZero = false;
}

Setting the property IsStartedFromZero of AxisY means that Y Axis should zoom only to his value range (from 200 to 1000). Without setting this property, chart will always show value range from 0 to maximum value. The marker was indicated to use circle form with size of 8 and the value is shown next to for reading data easily out. It’s just a small feature but it makes the chart look more professional.

Microsoft Chart ChartType and IsStartedFromZero

3. Set fixed value range, zoom into defined range and set label for each data point.
If we make a real time application which should display a real time data and we don’t fix the displayed value range of axis, the chart will automatically make a new scale to fix the value range so that we can read values. But its consequent is bad because we’ll feel that the chart jump to and jump back steadily. And as usual in real time application, the trend and current value is more important for users than the old ones.

public void ExecuteExample3()
{
	mainChart.ChartAreas[0].AxisY.Minimum = 100;
	mainChart.ChartAreas[0].AxisY.Maximum = 1500;
	ExecuteExample2();
	mainChart.ChartAreas[0].AxisX.ScaleView.Zoom(4, 14);
	mainChart.ChartAreas[0].CursorX.IsUserSelectionEnabled = true;
	mainChart.ChartAreas[0].CursorY.IsUserSelectionEnabled = true;

	for (int index = 0; index < mainChart.Series[0].Points.Count; index++)
	{
		mainChart.Series[0].Points[index].AxisLabel = "Series 1 - Point " + index.ToString();
	}
}

The code listing above fixes the value range of Y axis from 100 to 1500. It will automatically zoom to range 4 to 14 and allow users to zoom through his selection with mouse. Each data point will has its customized descriptions through setting its AxisLabel property.

Microsoft Chart Zoom Point AxisLabel

Microsoft Chart Zoom Point AxisLabel

Microsoft Chart Zoom Point AxisLabel

4. Export to image and set style for border
As many other chart components, Microsoft Chart allows users the options to export chart view to other format. In current version in .Net Framework 4, it supports Bmp, Emf, EmfDual, EmfPlus, Gif, Jpeg, Png and Tiff.

public void ExecuteExample4()
{
	mainChart.Series[0].BorderDashStyle = ChartDashStyle.Dash;
	mainChart.SaveImage("Chart.jpg", ChartImageFormat.Jpeg);
}

Microsoft Chart Export and BorderDashStyle

Finally, Microsoft Chart doesn’t provide beautiful animations or advanced features but it provide us a stable and flexible chart library which can be applied in any fields for data presenting or plotting. The source code can be downloaded here “WPF Microsoft Chart Examples

Leave a Reply

Your email address will not be published. Required fields are marked *