The official Fatica Labs Blog! RSS 2.0
# Wednesday, May 25, 2011

In  the previous sample we shown how to present multiple chart by keeping them aligned in order to be comparable on the horizontal axis by using the WidthSpring feature. But D3 charting can automatically pan and zoom ( both by rect zoom by pressing control and left dragging the mouse on the chart, or by the wheel ) and in this case we loose the axis synchronization. Here below the undesired behavior:

image On the left we see the top chart zoomed, the other ones show the horizontal range thus there is no more relation among the three charts.

So we create an attached property as below:

<ddd:ChartPlotter x:Name="price" ddd:SynchroVisible.Axis="X" ddd:SynchroVisible.With="{Binding ElementName=volume}" …>
 

by applying this property we choose which axis synchronize ( X in the example, but can be Y or XY ) and which chart keep synchronized with, in this case we bind with the chart named “volume”. By repeating the property two chart by two chart:

<ddd:ChartPlotter x:Name="volume" ddd:SynchroVisible.Axis="X" ddd:SynchroVisible.With="{Binding ElementName=ma}" …>
<ddd:ChartPlotter    x:Name="ma"  ddd:SynchroVisible.Axis="X" ddd:SynchroVisible.With="{Binding ElementName=price}" …>

 

so we achieve this interesting result without any code behind:

image This is the result after panning the chart ( by dragging the mouse pointer into the chart area in any of the three chart ) as you can see the other chart properly follow…
image The same apply if we zoom on the chart area ( by pressing ctrl while dragging, or by the mouse wheel ) other chart amplify the resolution on the synchronized axis and the start position accordingly.

Check out the source for this example here.

Wednesday, May 25, 2011 9:49:37 PM (GMT Daylight Time, UTC+01:00)  #    Comments [5] - Trackback
Charting | D3 | WPF

Thursday, March 01, 2012 6:21:57 PM (GMT Standard Time, UTC+00:00)
Your example looks great. It's just there are some error messages displayed in the console output:

===========================================
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name=''); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name=''); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')

=================================

Do you know how to fix it?


Rui
Thursday, March 01, 2012 6:23:29 PM (GMT Standard Time, UTC+00:00)
Your example looks great. It's just that there are some error messages displayed in the console ouput:

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name=''); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name=''); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')

Do you know how to fix it?


Rui
Thursday, March 01, 2012 6:40:32 PM (GMT Standard Time, UTC+00:00)
@Rui example works my side try a rebuild and let me know. Try to run the whole app, may be is just some random error caused by thr designer.
Monday, March 19, 2012 3:58:25 PM (GMT Standard Time, UTC+00:00)
Hi Felice,

I am using your version of Dynamic Data Display to build an application. I am wondering how I can automatically scroll x axis when new data comes in. Now it scales the x axis show all history data.


Rui
Monday, March 19, 2012 4:00:06 PM (GMT Standard Time, UTC+00:00)
Hi Felice,

I am using your version of Dynamic Data Display to build an application. I am wondering how I can automatically scroll x axis when new data comes in, instead of scaling x axis to show all history data. Could you please show me an example?


Rui
All comments require the approval of the site owner before being displayed.
OpenID
Please login with either your OpenID above, or your details below.
Name
E-mail
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, b, strike, strong) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Enter the code shown (prevents robots):

Live Comment Preview
My Stack Overflow
Contacts

Send mail to the author(s) E-mail

Tags
profile for Felice Pollano at Stack Overflow, Q&A for professional and enthusiast programmers
About the author/Disclaimer

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2019
Felice Pollano
Sign In
Statistics
Total Posts: 157
This Year: 0
This Month: 0
This Week: 0
Comments: 127
This blog visits
All Content © 2019, Felice Pollano
DasBlog theme 'Business' created by Christoph De Baene (delarou) and modified by Felice Pollano