I'm working with the Xam Data chart and styling the line series. I'm using sample data from code behind. The question is, how can I add more series (lines) to the chart using ObservableCollection fro the SimpleDataCollection?
{ public class SimpleDataCollection : ObservableCollection<SimpleDataPoint> { public SimpleDataCollection() { this.Add(new SimpleDataPoint() { Label = "1", Value = 4.0 }); this.Add(new SimpleDataPoint() { Label = "2", Value = 3.0 }); this.Add(new SimpleDataPoint() { Label = "3", Value = 2.0 }); this.Add(new SimpleDataPoint() { Label = "4", Value = 7.0 }); this.Add(new SimpleDataPoint() { Label = "5", Value = 4.0 }); this.Add(new SimpleDataPoint() { Label = "6", Value = 9.0 }); } } /// <summary> /// Simple storage class for pair of string and double value /// </summary> public class SimpleDataPoint { public double Value { get; set; } public string Label { get; set; } }
The Xaml code for the chart is this:
<ig:XamDataChart x:Name="Test_Trend_Chart" HorizontalZoomable="True" HorizontalZoombarVisibility="Visible" VerticalZoombarVisibility="Visible" VerticalZoomable="True" WindowRect="0,0,1,100" Margin="0" Style="{DynamicResource XamDataChartStyleTester}" Height="284.4"> <ig:XamDataChart.DataContext> <local:SimpleDataCollection/> </ig:XamDataChart.DataContext> <ig:XamDataChart.Axes> <ig:CategoryXAxis x:Name="xmXAxis" ItemsSource="{Binding}" Label="{}{Label}" MajorStroke="#7F000000" MajorStrokeDashArray="1 2" > <ig:CategoryXAxis.LabelSettings > <ig:AxisLabelSettings Location="OutsideBottom" Extent="30" Foreground="Black" FontSize="12" /> </ig:CategoryXAxis.LabelSettings> </ig:CategoryXAxis> <ig:NumericYAxis x:Name="xmYAxis" FontFamily="Tahoma" MinorStrokeThickness="0.7" MajorStrokeDashArray="1 2" Stroke="#FFF11B1B" StrokeThickness="0" StrokeDashArray="1 2" > <ig:NumericYAxis.ActualTickmarkValues> <ig:LinearTickmarkValues/> </ig:NumericYAxis.ActualTickmarkValues> <ig:NumericYAxis.LabelSettings > <ig:AxisLabelSettings Location="OutsideLeft" Extent="25" FontSize="12" TextAlignment="Right" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:LineSeries ValueMemberPath="Value" Thickness="3" MarkerType="None" ItemsSource="{Binding}" XAxis="{Binding ElementName=xmXAxis}" YAxis="{Binding ElementName=xmYAxis}" /> </ig:XamDataChart.Series> </ig:XamDataChart>
Hello,
I am just checking the progress of this issue and was wondering if you managed to achieve your goal or if you need any further assistance on the matter.
If the above suggestion helped you solve your issue please verify the thread as answered so other users may take better advantage of it.
Hello cgreenberg,
I have been looking into this and usually there isn’t much to it you just add another LinesSeries instance to your Series collection. If you want to have different line paths for the two (or more) Series you would have to provide for the XamDataChart’s DataCintext property either collection of items that have two (or more) numeric properties:
public class SimpleDataPoint
{
public double Value { get; set; }
public double Value2 { get; set; }
public string Label { get; set; }
}
So that you can use different ValueMemberPaths:
<igChart:XamDataChart.Series>
<ig:LineSeries ValueMemberPath="Value" Thickness="3" MarkerType="None"
ItemsSource="{Binding}"
XAxis="{Binding ElementName=xmXAxis}"
YAxis="{Binding ElementName=xmYAxis}" />
<ig:LineSeries ValueMemberPath="Value2" Thickness="3" MarkerType="None"
</igChart:XamDataChart.Series>
The other approach would be to set different collections to your Series’ ItemsSource properties.
Please let me know if you require any further clarification on the matter.