Reputation: 1066
Is it possible to draw multiple lines in a single toolkit chart where line numbers are determined at run-time? I prefer a MVVM way of binding lines to a collection. For example below, there is only one "LineSeries" to be shown, but what if I want to show multiple lines. Thank you!
<ch:Chart.Series>
<ch:LineSeries Title="{Binding Title}"
ItemsSource="{Binding DataPoints}"
IndependentValueBinding="{Binding Path=X}"
DependentValueBinding="{Binding Path=Y}">
</ch:LineSeries>
</ch:Chart.Series>
Upvotes: 2
Views: 3666
Reputation: 13188
EDIT 3 - Adding a Test button:
XAML:
<Grid>
<chartingToolkit:Chart x:Name="chart1" HorizontalAlignment="Left" Margin="10,10,0,0" Title="Chart Title" VerticalAlignment="Top" Width="498" Height="277">
</chartingToolkit:Chart>
<Button x:Name="button1" Content="ADD" HorizontalAlignment="Center" Margin="226,292,217.4,0" VerticalAlignment="Top" Width="75" Click="button1_Click"/>
</Grid>
Window:
int index;
MyViewModel2 viewModel;
private void Window_Loaded(object sender, RoutedEventArgs e)
{
viewModel = new MyViewModel2();
DataContext = viewModel;
}
private void button1_Click(object sender, RoutedEventArgs e)
{
PointCollection pc = new PointCollection();
for (int i = 1; i <= 10; i++)
pc.Add(new Point { X = i, Y = i * (2 + index) });
LineSeries series1 = new LineSeries();
series1.DependentValuePath = "Y";
series1.IndependentValuePath = "X";
series1.ItemsSource = pc;
chart1.Series.Add(series1);
viewModel.MyList.Add(pc);
index++;
}
EDIT 2 - Adding Series
dynamically:
XAML:
<chartingToolkit:Chart x:Name="chart1" Margin="0" Title="Chart Title">
</chartingToolkit:Chart>
ViewModel:
public class MyViewModel2
{
public List<PointCollection> MyList { get; set; }
public MyViewModel2()
{
MyList = new List<PointCollection>();
}
}
Window:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
viewModel = new MyViewModel2();
DataContext = viewModel;
PointCollection pc1 = new PointCollection();
PointCollection pc2 = new PointCollection();
for (int i = 1; i <= 10; i++)
{
pc1.Add(new Point { X = i, Y = i * 2 });
pc2.Add(new Point { X = i, Y = i * 3 });
}
LineSeries series1 = new LineSeries();
series1.DependentValuePath = "Y";
series1.IndependentValuePath = "X";
series1.ItemsSource = pc1;
chart1.Series.Add(series1);
viewModel.MyList.Add(pc1);
LineSeries series2 = new LineSeries();
series2.DependentValuePath = "Y";
series2.IndependentValuePath = "X";
series2.ItemsSource = pc2;
chart1.Series.Add(series2);
viewModel.MyList.Add(pc2);
}
EDIT 1 - This should get you going:
XAML:
<Grid>
<chartingToolkit:Chart Margin="0" Title="Chart Title">
<chartingToolkit:LineSeries DependentValuePath="Y" IndependentValuePath="X" ItemsSource="{Binding MyPointCollection1}"/>
<chartingToolkit:LineSeries DependentValuePath="Y" IndependentValuePath="X" ItemsSource="{Binding MyPointCollection2}"/>
</chartingToolkit:Chart>
</Grid>
ViewModel:
public class MyViewModel
{
public PointCollection MyPointCollection1 { get; set; }
public PointCollection MyPointCollection2 { get; set; }
public MyViewModel()
{
MyPointCollection1 = new PointCollection();
MyPointCollection2 = new PointCollection();
}
}
Window:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
viewModel = new MyViewModel();
DataContext = viewModel;
for (int i = 1; i <= 10; i++)
{
viewModel.MyPointCollection1.Add(new Point { X = i, Y = i * 2 });
viewModel.MyPointCollection2.Add(new Point { X = i, Y = i * 3 });
}
}
Upvotes: 4