XAML - Line Chart in DataGridTemplateColumn

See more:

C#

XAML

WPF

chart

Hi,

The problem I has is follows:

1. I have a DataGrid table with rows and columns bound to a List<DataStructure> where the DataStructure has Name, MinVal, MaxVal, TodayVal.

2. In my DataGrid, I need to display a chart/graph of all the data values for a list of data points. For example, if X has grades of 78.5, 45.5, 100, 94.5.....etc, the MinVal, MaxVal and TodayVal are based on this list of data points. The graph/chart shows the progress starting wih day1 through to today.

3. The chart has to fit in the datagrid row/column - (no: borders, legends, x/y axis, title....etc). The chart/graph has to be stretched or scaled such that it fits perfectly in the datagrid cell (startpoint left aligned, endpoint is rightaligned).

<dg:DataGridTemplateColumn x:Name="GRADES" Header="GRADE&#13;Chart" IsReadOnly="True" Width="83">
<dg:DataGridTemplateColumn.CellTemplate>
<DataTemplate x:Name="DAILYGRIDTEMPATE">
	<Grid Width="83" ClipToBounds="False">
 		<Canvas Margin="0" ClipToBounds="False" Background="Transparent">
                                    <Polyline Points="{Binding GRADES}" 
                                              Stroke="Blue" 
                                              StrokeThickness="1" 
                                              ClipToBounds="False"
                                              HorizontalAlignment="Stretch"
                                              VerticalAlignment="Stretch"
                                              Stretch="Uniform"/>
                                </Canvas>                                
                         </Grid>
                 </DataTemplate>
         </dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>

My DataStructure contains the following property for the polyline pointcollections (Class = rowModel)

// GradeChart - Point Collection
 public PointCollection _grades;
 public PointCollection GRADES
 {
     get { return _grades; }
     set
     {
         _grades= value;
         OnPropertyChanged("GRADES");
     }
 }

My code populates the XAML/WPF by the following (where points = List<double> {76.3, 56.2, 96.4...etc}):

PointCollection pc = new PointCollection();
for (int i = 0; i < points.Count; i++)
{
    pc.Add(new Point(i, (double)points[i]*10));
    Debug.WriteLine(className + ": paintIntradayChart [" + i + ", " + (double)points[i] + "]");
}
pc.Freeze();
rowModel.GRADES= pc;

Now this all works fine and I can set my chart/graph in the datacell....in fact, I can also have this update intraday if required as all I have to do is add a point to the pointcollection, freeze it and then set it to the GRADES property to reflect the chanege.

What I need to do fix the following which I am sort of struggling with:

1. X/Y coordinates of the Polyline should be like a chart (X -> right, Y -> Up)....currently Y -> Down

2. Scaling of the Polyline in the Canvas - need it to fit perfectly in the Grid -> Canvas

Would appreciate any help. Please provide code snippets as I am new to learning .NET an would appreciate illustrative guidance rather than just general direction.

Thanks,

Manish