TwoIndependentAxis and realtime data

Sep 21, 2012 at 1:40 AM


I'm having trouble with the multiple Y axis in the TwoIndependentAxis sample when the graphs are continously updated. I'm not sure where, exactly, the problem kicks in.

The problem is, the main Y axis seems to scale to contain the injected graph. If main graph is values -10-40 and injected graph is 0-26280, the main axis scales to 0-26280 so the graph is almost flat. It works when i run the sample as-is. The expected result is that main (left axis) is -10-40 and right axis is 0-26280

I added this code to the sample for testing purposes:

public partial class MainWindow : Window
    ObservableCollection<DataPoint> source1;
    ObservableCollection<DataPoint> source2;

    DispatcherTimer timer = null;

    public MainWindow()

    protected EnumerableDataSource<DataPoint> CreateDataSource(ObservableCollection<DataPoint> values)
        EnumerableDataSource<DataPoint> ds = new EnumerableDataSource<DataPoint>(values);
        ds.SetXMapping(ci => dateAxis.ConvertToDouble(ci.Data));
        ds.SetYMapping(ci => ci.Value);

        return ds;

    private void Window_Loaded(object sender, RoutedEventArgs e)
        source1 = new ObservableCollection<DataPoint>();
        source2 = new ObservableCollection<DataPoint>();
        plotter.AddLineGraph(CreateDataSource(source1), Colors.Red, 2, "CAL1");
        innerPlotter.AddLineGraph(CreateDataSource(source2), Colors.Red, 2, "CAL2");

        innerPlotter.SetVerticalTransform(-10, 0, 40, 26280);

        timer = new DispatcherTimer();
        timer.Interval = new TimeSpan(0, 0, 1);
        timer.Tick += new EventHandler(timer_tick);

    void timer_tick(object sender, EventArgs e)
        DateTime now = DateTime.Now;

        Random rnd = new Random();
        double dValue = (rnd.NextDouble() * 50.0) - 10.0;
        source1.Add(new DataPoint{ Date = now, Value = dValue });

        dValue = rnd.NextDouble() * 26280.0;
        source2.Add(new DataPoint{ Date = now, Value = dValue });

public class DataPoint
    public DateTime Date{ get; set; }
    public double Value{ get; set; }


    <d3:ChartPlotter x:Name="plotter">
            <d3:HorizontalDateTimeAxis x:Name="dateAxis"/>

        <d3:InjectedPlotter x:Name="innerPlotter">
            <d3:VerticalAxis Placement="Right"/>

        <d3:AxisNavigation Placement="Bottom"/>
        <d3:AxisNavigation Placement="Right"/>

        <d3:VerticalAxis Content="CAL1"/>
        <d3:VerticalAxis Content="CAL2" Placement="Right"/>



Jan 11, 2013 at 8:41 PM

Were you able to get a solution for this?