How do I chart multiple lines on one graph in Silverlight 4 - silverlight

Question

I'm new in Silverlight and I'm just trying to get a handle on how to do some things. What I'd like to do is have a chart, that has 2 lines that might overlap one another. What is happening with my code is that one line is displayed and then the next line is displayed, one after another rather than overlapping.
Here is my xaml
<navigation:Page x:Class="SilverlightNav1.Home"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="547"
Title="Home"
Style="{StaticResource PageStyle}" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<Grid x:Name="LayoutRoot" Height="544">
<sdk:Label Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" Width="120" Content="First Name" />
<TextBox Height="23" Margin="91,8,0,0" Name="txtFirstName" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120" >
<TextBox.RenderTransform>
<SkewTransform AngleX="2" AngleY="12" />
</TextBox.RenderTransform>
<TextBox.Effect>
<DropShadowEffect />
</TextBox.Effect>
</TextBox>
<Button Content="Greet Me" Height="23" HorizontalAlignment="Left" Margin="91,72,0,0" Name="GreetMe" VerticalAlignment="Top" Width="75" Click="GreetMe_Click" />
<TextBlock Margin="91,116,25,0" Name="Greeting" Text="" Height="105" VerticalAlignment="Top" FontSize="20" />
<toolkit:Chart HorizontalAlignment="Left" Margin="21,246,0,0" Name="chart1" Title="Testing graph" VerticalAlignment="Top" Height="249" Width="400">
<toolkit:Chart.Series>
<toolkit:LineSeries Title="Guys" ItemsSource="{Binding p}" IndependentValueBinding="{Binding FirstName}" DependentValueBinding="{Binding Greeting}" Name="testGraph">
</toolkit:LineSeries>
<toolkit:LineSeries Title="Girls" ItemsSource="{Binding girls}" IndependentValueBinding="{Binding FirstName}" DependentValueBinding="{Binding Greeting}" Name="lsGirls">
</toolkit:LineSeries>
</toolkit:Chart.Series>
</toolkit:Chart>
</Grid>
Here is my code-behind.
List<Model.Person> p = new List<Model.Person>();
p.Add(new Model.Person() { FirstName = "Bob", Greeting = 1 });
p.Add(new Model.Person() { FirstName = "Phil", Greeting = 3 });
p.Add(new Model.Person() { FirstName = "Dennis", Greeting = 4});
p.Add(new Model.Person() { FirstName = "Chewie", Greeting = 2 });
//this.DataContext = p;
List<Model.Person> girls = new List<Model.Person>();
girls.Add(new Model.Person() { FirstName = "Jamie", Greeting = 4 });
girls.Add(new Model.Person() { FirstName = "Abby", Greeting = 7 });
girls.Add(new Model.Person() { FirstName = "M", Greeting = 5 });
girls.Add(new Model.Person() { FirstName = "K", Greeting = 6 });
((LineSeries)chart1.Series[0]).ItemsSource = p;
((LineSeries)chart1.Series[1]).ItemsSource = girls;
And finally here is my class defined in person.cs
namespace SilverlightNav1.Model
{
public class Person
{
private string _firstName;
public string FirstName
{
get { return _firstName; }
set
{
_firstName = value;
}
}
private int _greeting;
public int Greeting
{
get { return _greeting; }
set { _greeting = value; }
}
}
}

Answer 1

An issue is that both data sets have different X-axis values - Bob and Jamie are not the same, for example, so the toolkit will not show them on the same X-axis value. You can see how this could be fixed by changing the girls data set FirstName's to Bob, Phil, Dennis, and Chewie.
One option is to assign a increasing numeric counter to both guys and girls sets, and use that as the X-axis, so that they can be graphed together. So have the X-axis be bound to the "Counter" property, and have bob/phil/dennis/chewie have respective values of 0,1,2, and 3, and the same for Jamie through K. You could style the graph to display the actual FirstName next to the datapoint itself, or another such method.