Drawing charts in the Windows Phone 7 using Silverlight's graphical API

There is a set of visualization controls in the Silverlight Control Toolkit 4 and Chart control among them. I looked through the Silverlight’s documentation, Microsoft’s sites, Microsoft’s developers’ blogs, and nowhere it was mentioned whether these controls can be used in windows phone 7 or not. We tried on all computers in the team – it was impossible. We even couldn’t add anyone of these controls to the toolbox. But Silverlight’s graphical API is available for phone applications, it is easy to use it, so I work on creating custom component for charts. The simplest way to draw 2-D graphical content in a Silverlight ui is to use classes, derived from shape abstract class: Line, Polyline, Ellipse, Rectangle, and Polygon. Polyline class is suitable for our task. The more simple Line class just draws a straight line between two points, we can draw axes and gridlines with it. But Polyline combines a collection of points and this is what we need for chart. All these classes are UIElement, so we can place Polyline in any of layout containers and we can define our chart in two ways: using XAML and programmatically. Here is an example of the first approach:

<canvas><polyline stroke="Red" strokethickness="2" points="10,150 30,140 50,160 70,130 90,170 110,120 130,180 150,110 170,190 190,100"></polyline></canvas>

This markup will create chart’s line at design time so we don’t need to run the application with emulator to see the result.

It can be useful in some cases, but we must be able to create charts at run time based on user’s action. In the C# code we can add items to Points collection of the Polyline. We have two options.
The first one is good for cases when we know in advance the number of charts to be shown, so we can create as many Polyline elements as needed at design time:

<canvas><polyline name="ChartLine" stroke="Red" strokethickness="2"></polyline></canvas>

But now we must define names (ChartLine in the example) for them they will be used in the C# code, where we can create chart by adding Point objects to Polyline’s Points collection:

ChartLine.Points.Add(new Point(50, 330));
ChartLine.Points.Add(new Point(100, 270));
ChartLine.Points.Add(new Point(150, 200));
ChartLine.Points.Add(new Point(200, 130));
ChartLine.Points.Add(new Point(250, 110));
ChartLine.Points.Add(new Point(300, 40));

Next option is to create Polyline element at run time, define points as in the previous example and finally add the Polyline object
to the layout container’s Children collection:

Polyline ChartLine = new Polyline();
ChartLine.Stroke = new SolidColorBrush(Colors.Green);
ChartLine.Points.Add(new Point(50, 330));
......................
_Canvas.Children.Add(ChartLine);



Now a bit of information about line's appearance.
In order to draw dashed line we can use StrokeDashArray. It is a collection of Double values that indicate the pattern of dashes and gaps that is used to outline shapes. Here is its usage in XAML and C#:

<polyline stroke="Red" strokethickness="1" strokedasharray="5 2" name="ChartLine" points="10,150 30,140 50,160 70,130 "></polyline>

DoubleCollection DashArray = new DoubleCollection();
DashArray.Add(5);
DashArray.Add(2);
ChartLine.StrokeDashArray = DashArray;





To be continued.