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"
3. 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>

4. 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");
        }
5. 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;
        }

6. 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:
Lumia920Yellow_Linechart_small.png

Last edited Sep 25, 2012 at 11:45 PM by JustinJosefAngel, version 4

Comments

No comments yet.