1

I want to place 2 charts one under the another one. And I want them to have shared X axis. So when I move the upper chart the lower one moves too, the same for zoom. I found that it is implemented in Dynamic Data Display lib for Silverlight. And is implemented very good. Here you can see the implementation. "Synchronized figures". I want the same. How can I do it?

Vasilii Ruzov
  • 554
  • 1
  • 10
  • 27
  • what charting tool are you using ? – Noctis Nov 05 '13 at 10:50
  • @Noctis, I use Dynamic Data Display. – Vasilii Ruzov Nov 05 '13 at 10:52
  • WOW ... your link blew my mind ... sorry ... cool sh*t ... The wpf toolkit is seriously lacking, and I've played with OxyPlot and was quite happy ... Now I'll have to give this a go ... seems cool. So, what's your problem ATM ? Is it not compatible? You have the code right in the examples I've seen ... – Noctis Nov 05 '13 at 10:54
  • Ok ... no updates since 2009 ...that's why I've never seen it ... Cool, but dead in the water ... Give more details, I'll have a look a bit later – Noctis Nov 05 '13 at 10:57
  • @Noctis, They provide newer version for Silverlight. But afaik, it's impossible to build in the silverlight control to wpf app. I want to make 2 charts like centerPlotter and bottomPlotter in that link. I have real-time data. 1 integer number per second. It must be on the 1st chart. Then I make some computations on the set of received numbers and have the second number. These numbers must be on the 2nd chart. I make these computations on every received number. Both of these sets of numbers depends on time(of receiving the number from the stream). – Vasilii Ruzov Nov 05 '13 at 11:07
  • @Noctis, So when I move the upper chart the lower one must move too and must show the data for corresponding time. X-axis is time axis. – Vasilii Ruzov Nov 05 '13 at 11:08
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/40569/discussion-between-noctis-and-vasilii-ruzov) – Noctis Nov 05 '13 at 14:32
  • Felice Pollano has added some good axes synching to the WPF D3 library http://www.felicepollano.com/CategoryView.aspx?category=D3 – The Lonely Coder Sep 10 '15 at 11:29

2 Answers2

1

Ok. I've found the solution. It works a little wrong, but it's ok. If you want to have shared X axis, you have to do next: 

// Add handler
        SpeedChart.Viewport.PropertyChanged += new EventHandler<ExtendedPropertyChangedEventArgs>(Viewport_PropertyChanged);


// Respond to changes
        void Viewport_PropertyChanged(object sender, ExtendedPropertyChangedEventArgs e)
        {
            if (e.PropertyName == "Visible")
            {
                StrokeChart.Viewport.Visible = new DataRect(SpeedChart.Viewport.Visible.XMin, StrokeChart.Viewport.Visible.YMin, SpeedChart.Viewport.Visible.Width, StrokeChart.Viewport.Visible.Height);
            }
        }

Next you have to remove MouseNavigation and HorizontalAxisNavigation from StrokeChart. The problem is that the points on StrokeChart are not visible at first, because the range on Y axis is wrong. But you can zoom and drag the Y axis only for getting the proper values. If you know how to solve the problem with ranges please let me know. Thanks

Vasilii Ruzov
  • 554
  • 1
  • 10
  • 27
  • 1
    If you want to have only X axis shared change in the code above *SpeedChart.Viewport.Visible.YMin* to *StrokeChart.Viewport.Visible.YMin*. – MPękalski Feb 22 '14 at 22:01
-1
void Viewport_PropertyChanged(object sender, ExtendedPropertyChangedEventArgs e)
{
    if (e.PropertyName == "Visible")
    {
        if((sender as Viewport2D).Plotter==plotter)
            plotter2.Viewport.Visible = new DataRect(plotter.Viewport.Visible.XMin, plotter2.Viewport.Visible.YMin, plotter.Viewport.Visible.Width, plotter2.Viewport.Visible.Height);
        else if ((sender as Viewport2D).Plotter == plotter2)
                plotter.Viewport.Visible = new DataRect(plotter2.Viewport.Visible.XMin, plotter.Viewport.Visible.YMin, plotter2.Viewport.Visible.Width, plotter.Viewport.Visible.Height);
    }
}


private void Window1_Loaded(object sender, RoutedEventArgs e)
{
    // Add handler
    plotter.Viewport.PropertyChanged += new EventHandler<ExtendedPropertyChangedEventArgs>(Viewport_PropertyChanged);
    plotter2.Viewport.PropertyChanged += new EventHandler<ExtendedPropertyChangedEventArgs>(Viewport_PropertyChanged);
}

Full connection of the two graphs. Supplement to the previous text.

vyv
  • 1
  • 1