How do I: Chart Data Binding

Sep 21, 2010 at 1:54 PM

Hello, All!

I am new in d3.

I  tried use examples but I didn't find anything about binding.

So, I have in my View d3Chart

also I have data for this chart in such structure:

class DataForChart

{

  public double StepValue {get; set;}  // X Values

  public int DurationMinutes {get; set;}  // Y Values (Time Axis)

}

My data is a Step-like

Some like this:

                 _____

           ____|

     ____|

___|

Please, advice me about it.

I'm looking forward to your advices.

If you can - not only for my problem. I need info about binding data in whole too.

Thanks! 

 

Sep 21, 2010 at 7:05 PM

How about something like this....

Model

    public class ModelData
    {
        public double Value { get; set; }
        public TimeSpan Elapsed { get; set; }
        public ModelData(double value, TimeSpan elapsed)
        {
            Value = value;
            Elapsed = elapsed;
        }
    }

    public class SampleModel
    {

        public List<ModelData> Values { get; private set; }

        CompositeDataSource _timeData;
        public CompositeDataSource TimeData
        {
            get
            {
                if (_timeData == null)
                {
                    var xData = new EnumerableDataSource<double>(Values.Select(v => v.Elapsed.TotalSeconds));
                    xData.SetXMapping( x => x );
                    var yData = new EnumerableDataSource<double>(Values.Select(v => v.Value));
                    yData.SetYMapping( y => y );
                    _timeData = xData.Join(yData);
                }
                return _timeData;
            }
        }
        public SampleModel()
        {
            Values = new List<ModelData>();
        }
    }

View

<Window x:Class="D3Binding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <d3:ChartPlotter>
            <d3:LineGraph DataSource="{Binding Path=TimeData}" Stroke="Black"/>
        </d3:ChartPlotter>
    </Grid>
</Window>

View code

 

    public partial class MainWindow : Window
    {
        SampleModel Model { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            Model = new SampleModel();
            PopulateModel();
            DataContext = Model;
        }

        void PopulateModel()
        {

            for (int i = 0; i < 10; i++)
            {
                Model.Values.Add(new ModelData((double) i, TimeSpan.FromSeconds(i)));
                Model.Values.Add(new ModelData((double)i, TimeSpan.FromSeconds(i+1)));
            }        
        }
    }

This can be done without code in the view but this is a start.

Grant.

Sep 22, 2010 at 7:33 AM
Edited Sep 22, 2010 at 7:36 AM

Thanks, Grant.

I tried to use your example code.

It seems all work Ok.

Thank you!!

Jan 10, 2011 at 4:27 PM

Just wanted to say thanks Grant, worked great for me as well.

Oct 31, 2013 at 3:41 AM
The Chart Databinding C# tutorial shows a variety way of binding to MS SQL, Oracle, MySQL, Access ODBC as well as XML data, etc.
Nov 4, 2016 at 4:03 AM
The problem with the above approach is each time a new EnumerableSource needs to be created. It doesn't seem to work if ModelData implements INotifyPropertyChanged and only the value changes. This causes lot of issues when you have a large set of points (2000+) updating almost every 500ms-1s. It results in the chart getting messed up when trying to pan/zoom it around. Anyone has faced this before and has a solution?