Managed Code Sample

This topic will explain on how to create a chart with DateTime values using Managed Code.

To learn about how to create your first chart from managed code in Silverlight and WPF, refer the Quick Start section of this documentation.

We are assuming that you have created a Silverlight project and all references have been added by following the steps explained in Managed Code Silverlight Sample.

Now, let's create a chart from Page.xaml.cs file. Open the file and add a function CreateChart() in Page() constructor with following code.

public Page()

{

InitializeComponent();

// Call function to create chart

CreateChart();

}

Following is the content of the CreateChart function. Each line is commented for your reference.

private void CreateChart()

{

// Create a Chart element

Chart chart = new Chart();

// Set chart properties

chart.Theme = "Theme2";

// Set chart width and height

chart.Width = 500;

chart.Height = 300;

// Create new Axis

Axis axisX = new Axis();

// Set properties of Axis

axisX.IntervalType = IntervalTypes.Months;

axisX.Interval = 1;

axisX.ValueFormatString = "MMM/d/yyyy";

// Add Axis to AxesX collection

chart.AxesX.Add(axisX);

// Create new DataSeries

DataSeries dataSeries = new DataSeries();

// Set property of DataSeries

dataSeries.XValueFormatString = "MMM/d/yyyy";

// Create DataPoints and add them to DataSeries's DataPoints collection. All XValues are supplied with DateTime values and YValues with Double values.

dataSeries.DataPoints.Add(new DataPoint() { XValue = new DateTime(2008, 1,1), YValue = 20 });

dataSeries.DataPoints.Add(new DataPoint() { XValue = new DateTime(2008, 3, 1), YValue = 14 });

dataSeries.DataPoints.Add(new DataPoint() { XValue = new DateTime(2008, 4, 18), YValue = 10 });

dataSeries.DataPoints.Add(new DataPoint() { XValue = new DateTime(2008, 5, 28), YValue = 12 });

dataSeries.DataPoints.Add(new DataPoint() { XValue = new DateTime(2008, 7, 4), YValue = 18 });

dataSeries.DataPoints.Add(new DataPoint() { XValue = new DateTime(2008, 8, 4), YValue = 9 });

dataSeries.DataPoints.Add(new DataPoint() { XValue = new DateTime(2008, 9, 2), YValue = 11 });

dataSeries.DataPoints.Add(new DataPoint() { XValue = new DateTime(2008, 10, 1), YValue = 19 });

dataSeries.DataPoints.Add(new DataPoint() { XValue = new DateTime(2008, 11, 2), YValue = 22 });

dataSeries.DataPoints.Add(new DataPoint() { XValue = new DateTime(2008, 12, 8), YValue = 18 });

// Add DataSeries to Series collection in chart

chart.Series.Add(dataSeries);

// Add chart to the LayoutRoot for display

LayoutRoot.Children.Add(chart);

}

Press F5 to run the application and see the chart.

The chart should appear as shown below:

In the same way you can create chart with DateTime axis in WPF and XBAP also. To learn about how to create your first chart from managed code in WPF, follow Managed Code WPF sample. Once you have created a WPF application, add the code shown above inside the Window1.xaml.cs file and run the application.