synchronizing X axis scrolling and zooming

[Ben Tsai]

Hi,

I have two separate chart controls on the same form. On the x-axis, they share the same scale and range. I would like to synchronize scrolling and zooming on the x-axis so that when I scroll on one chart, the other chart also gets scrolled (and likewise for zooming).

I realize this may not be built-in behavior for the zooming/scrolling feature that is currently implemented. In light of this, I was wondering what events should I catch in order to detect when the chart''s range or scale has changed? If I can detect this, then I can apply the same range and scale change on the other chart within my event handler.

Does this sound like a reasonable approach? Can you suggest anything else?

Thank you!

[Administrator]

Hi BenT,

It is possible to synchronize the two charts in the same form.

The zooming effect of chartControl2 can be achieved by assigning ZoomFactorX and ZoomPositionX of chartControl1 to ZoomFactorX and ZoomPositionX of chartControl2 in the chartControl1_VisibleRangeChanged Event.


The following code illustrate this :

private void chartControl1_VisibleRangeChanged()
{

this.chartControl2.ZoomPositionX=this.chartControl1.ZoomPositionX;
this.chartControl2.ZoomPositionY=this.chartControl1.ZoomPositionY;
this.chartControl2.ZoomFactorX=this.chartControl1.ZoomFactorX;
this.chartControl2.ZoomFactorY=this.chartControl1.ZoomFactorY;

}

Please try the attached sample which helps you to synchronize the two charts while zooming and scrolling.

Kindly let me know if this helps.

Thank you for your continued interest in Syncfusion products.

Regards,
Jaya

ChartSynchronization0.zip

[Ben Tsai]

Hi Jaya,

This is exactly what I was asking for. Thank you.

Because I wanted chart 2 to also update chart 1 (your example only goes one direction), I had to add some additional code. I noticed that when setting the ZoomPosition properties, this also caused the VisibleRangeChanged event. So I had to introduce a flag to block out updates until all of them were done:

private void chartControl1_VisibleRangeChanged()
{
if (updatingFlag == true) return;
updatingFlag = true;
this.chartControl2.ZoomPositionX = this.chartControl1.ZoomPositionX;
this.chartControl2.ZoomPositionY = this.chartControl1.ZoomPositionY;
this.chartControl2.ZoomFactorX = this.chartControl1.ZoomFactorX;
this.chartControl2.ZoomFactorY = this.chartControl1.ZoomFactorY;
updatingFlag = false;
return;
}

Best regards,

BenT

>
Hi BenT,

It is possible to synchronize the two charts in the same form.

The zooming effect of chartControl2 can be achieved by assigning ZoomFactorX and ZoomPositionX of chartControl1 to ZoomFactorX and ZoomPositionX of chartControl2 in the chartControl1_VisibleRangeChanged Event.


The following code illustrate this :

private void chartControl1_VisibleRangeChanged()
{

this.chartControl2.ZoomPositionX=this.chartControl1.ZoomPositionX;
this.chartControl2.ZoomPositionY=this.chartControl1.ZoomPositionY;
this.chartControl2.ZoomFactorX=this.chartControl1.ZoomFactorX;
this.chartControl2.ZoomFactorY=this.chartControl1.ZoomFactorY;

}

Please try the attached sample which helps you to synchronize the two charts while zooming and scrolling.

Kindly let me know if this helps.

Thank you for your continued interest in Syncfusion products.

Regards,
Jaya

ChartSynchronization0.zip