Creating an EEG Line Chart
Using
Telerik Windows Phone controls it's pretty easy to get a Brainwave
chart setup.
1. Download Telerik Windows Phone controls and a reference to the following DLLs: Telerik.Windows.Controls.Chart.dll, Telerik.Windows.Controls.DataVisualization.dll, Telerik.Windows.Controls.Primitives.dll and Telerik.Windows.Core.dll.
2. Add the following xml namespace to your XAML:
xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
xmlns:chartEngine="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
Add the following XAML Chart with 8 different Series.
<chart:RadCartesianChart x:Name="chart">
<chart:RadCartesianChart.Grid>
<chart:CartesianChartGrid MajorXLineDashArray="5, 5" MajorYLineDashArray="5, 5" MajorLinesVisibility="XY">
</chart:CartesianChartGrid>
</chart:RadCartesianChart.Grid>
<chart:RadCartesianChart.HorizontalAxis>
<chart:DateTimeCategoricalAxis Visibility="Collapsed" DateTimeComponent="Second" LineStroke="{StaticResource PhoneDisabledBrush}" LineThickness="2"/>
</chart:RadCartesianChart.HorizontalAxis>
<chart:RadCartesianChart.VerticalAxis>
<chart:LinearAxis LineStroke="{StaticResource PhoneDisabledBrush}" LineThickness="2"/>
</chart:RadCartesianChart.VerticalAxis>
<chart:LineSeries Stroke="Red" CombineMode="Stack" />
<chart:LineSeries Stroke="Blue" CombineMode="Stack" />
<chart:LineSeries Stroke="Green" CombineMode="Stack" />
<chart:LineSeries Stroke="Yellow" CombineMode="Stack" />
<chart:LineSeries Stroke="Orange" CombineMode="Stack" />
<chart:LineSeries Stroke="Purple" CombineMode="Stack" />
<chart:LineSeries Stroke="White" CombineMode="Stack" />
<chart:LineSeries Stroke="Gray" CombineMode="Stack" />
</chart:RadCartesianChart>
In code behind initialize the 8 Series required to show each of the different brainwaves. We're going to assign one Series to each Brainwave Property. The Brainwave property value will be the Y-axis and the timestamp will be the X-axis.
public LineChartMindwaveData()
{
InitializeComponent();
InitSeries(0, "Delta");
InitSeries(1, "Theta");
InitSeries(2, "AlphaLow");
InitSeries(3, "AlphaHigh");
InitSeries(4, "BetaLow");
InitSeries(5, "BetaHigh");
InitSeries(6, "GammaLow");
InitSeries(7, "GammaMid");
}
private ObservableCollection<MindwaveReading> mindsetPoints = new ObservableCollection<MindwaveReading>();
private void InitSeries(int index, string propertyName)
{
chart.Series[index].ItemsSource = mindsetPoints;
((LineSeries)chart.Series[index]).ValueBinding = new PropertyNameDataPointBinding(propertyName);
((LineSeries)chart.Series[index]).CategoryBinding = new PropertyNameDataPointBinding("Timestamp");
}
On navigation into the form turn on the Mindwave Sensor and assign some data.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (!Mindwave.Current.IsConnected)
{
Mindwave.Current.Start();
}
if (Mindwave.Current.IsDataValid)
{
mindsetPoints.Add(Mindwave.Current.CurrentValue);
}
Mindwave.Current.CurrentValueChanged += Current_CurrentValueChanged;
base.OnNavigatedTo(e);
}
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
Mindwave.Current.CurrentValueChanged -= Current_CurrentValueChanged;
}
Whenever the data changes, add the reading to the ObservableCollection that's databound to the form. Since this is an ObservableCollection any addition to the collection will trigger a databinding update.
private void Current_CurrentValueChanged(object sender, MindwaveReadingEventArgs e)
{
if (e.SensorReading.IsDataReliable)
{
mindsetPoints.Add(e.SensorReading);
}
}
When we run this code sample we can see that the following chart over time:
