Hello,
I am new to Syncfusion. I love the product, but I am an inexperienced programmer. I have a scatter SfChart and I would like to auto scale y axis when x axis is zoomed. I have seen the code snippet http://help.syncfusion.com/ug/wpf/default.htm#!documents/howtoautoscaleyaxisw.htm
But I still don’t know how to use it. Here are some of my problems:
I am unable to find the VisibleRangeChanged event associated with the chart or axis.
Your code includes the class RecordFilterDescriptor but I can't seem to find it in the overall program.
I would greatly appreciate it if you could provide a more complete example so that I could see how to implement auto scale y axis when x axis is zoomed.
Thank you.
Hi Steven,
Thanks for your interest in using Syncfuion products.
When set the ZoomMode as “XY” by default both axis will be scaled automatically. However, we can auto scale any of the axis (say Y-axis) while zooming another axis (say X-Axis, if we set ZoomMode=”X”) as reported old chart help link by using ZoomChanged Event. Please refer the below code snippet.
Code Snippet:
private void sfchart_ZoomChanged(object sender, ZoomChangedEventArgs e)
{
}
We have prepared the sample based on this and please find the sample in the below location.
Sample: AutoScaleYAxis.zip
Please refer the below documentation for your more information about SfChart zoom and pan behavior.
Link: http://help.syncfusion.com/ug/wpf/default.htm#!documents/zoomingandpanning.htm
Note: There is no VisibleRangeChanged event and RecordFilterDescriptor class in our SfChart control.
Please let us know if you require any further assistance.
Thanks,
Rachel. A
Hello Rachel,
Thank you for your rapid response and detailed example.
I’m sorry but I guess didn’t explain my problem very well. When I ran your example with zoom on x only, the y axis did not auto-scale.
In order to achieve zoom on x only, I had to change one line in your example to the following:
<chart:ChartZoomPanBehavior EnableSelectionZooming="True" ZoomMode="X" />
The y axis did not auto-scale. I would greatly appreciate your advice on how to get the y axis to auto-scale when I use EnableSelectionZooming="True" ZoomMode="X"
Thank you for your help,
Steven
Hi Steven,
Thank you for your response.
When you are using selection zooming, we can auto scale the y axis using SelectionZoomingEnd event as shown in the below code snippet.
Code Snippet:
private void SfChart_SelectionZoomingEnd(object sender, Syncfusion.UI.Xaml.Charts.SelectionZoomingEndEventArgs e)
{
}
We have modified the sample based on your requirement and please find the sample in the below location.
Sample: AutoScale_SelctionZooming.zip
Note: If this is not your requirement, please let us know your auto scaling functionality. It would be helpful for us to serve you better.
Please let us know if you require any further assistance.
Thanks,
Rachel. A
Thank you for your response.
I am trying to build a stock chart, where I can selection zoom on the x-axis and have the y-axis autoscale. This is some of the functionality I need:
1. A two pane stock chart with OHLC on the top pane and volume on the bottom pane.
2. The x-axis is a DateTimeCategoryAxis.
3. Only the x-axis for the volume pane is visible. The x-axis for the price pane in not visible so that the top pane can sit directly on the volume pane.
4. The cursor is a crosshairs that goes across both panes, and shows the date only on the x-axis of the bottom volume pane.
5. I can use the crosshairs cursor to selection zoom the x-axis, and the y-axis autoscales.
6. Finally, once I zoom the x-axis, a scrollbar appears.
7. When I use the scrollbar and scroll through the data, the y-axis autoscales to the data displayed.
I would greatly appreciate a sample program.
Kind regards
Steven
Hi Steven,
Thanks for your update.
Requirement |
Response |
A two pane stock chart with OHLC on the top pane and volume on the bottom pane. |
You can achieve multiple pane support by using Chart Row/Column Definition. For more information about Multiple Pane chart support please refer the below link: |
The x-axis is a DateTimeCategoryAxis. |
Please refer below link for DateTimeCategoryAxis
Link: http://help.syncfusion.com/ug/wpf/documents/datetimecategoryaxis.htm |
Only the x-axis for the volume pane is visible. The x-axis for the price pane in not visible so that the top pane can sit directly on the volume pane. |
By default in chart Row definition, the ChartAxis will be placed in the bottom pane. |
The cursor is a crosshairs that goes across both panes, and shows the date only on the x-axis of the bottom volume pane. |
You are able show the cross hair value for chart axis by setting the ShowTrackBallInfo as true for specified chart axis. |
I can use the crosshairs cursor to selection zoom the x-axis, and the y-axis autoscales.
Finally, once I zoom the x-axis, a scrollbar appears.
When I use the scrollbar and scroll through the data, the y-axis autoscales to the data displayed. |
For more information about CrossHair and ZoomPan behavior please refer our UG documentation. You can enable the Scrollbar(ChartAxis’s EnableScrollBar as True)and auto scale the Y-axis by using chart zooming events. |
We have prepared the simple sample based on your requirement. Please find the sample in the below location.
Sample: ChartRequirement.zip
Please let us know if you have any queries.
Regards,
M.Sheik
Thank you for your example M. Sheik.
I have a few questions. First, the example you provided does not seem to autoscale after zooming on the x-axis. I can’t see any logic in the method financialChart_SelectionZoomingEnd, which is supposed to autoscale the y-axis. Second, since this is supposed to be a stock chart the days cannot be consecutive. Weekend days must be skipped. Finally, the scrollbars on your example are on the y-axis. I would like to be able to scroll on the x-axis and have the y-axis autoscale.
Thank you for all you help so far.
Steven
Hi Steven,
Thanks for the update.
Query 1: the example you provided does not seem to autoscale after zooming on the x-axis. I can’t see any logic in the method financialChart_SelectionZoomingEnd.
We would like to let you know that, we have already provided the logic for auto scale the y-axis in AutoScale_SelctionZooming.zip sample. Also you can change the calculation based on your scenario in financialChart_SelectionZoomingEnd event. In last sample we have used financialChart_SelectionZoomingEnd event for enable the axis scroll bar while perform the select zooming action and not for auto scale the y-axis.
Query 2: since this is supposed to be a stock chart the days cannot be consecutive. Weekend days must be skipped.
In order to skip the weekends, you need to filter the data points as only for working days and use DateTimeCategoryAxis as shown in the below sample.
Query 3: the scrollbars on your example are on the y-axis. I would like to be able to scroll on the x-axis and have the y-axis autoscale.
As we informed in previous update you can apply the scroll bar in chart axis by setting EnableScrollbar as “True”. So you can set the scroll bar for X-Axis as shown in the below code snippet.
Code Snippet [Xaml]:
<chart:SfChart.PrimaryAxis>
<chart:DateTimeCategoryAxis EnableScrollBar="True"/>
</chart:SfChart.PrimaryAxis>
Sample: Chart_WeekDays.zip
Please let us know if you have any queries.
Regards,
M. Sheik
Sorry for bumping a way old subject.
But i cannot access the zip file, and i cannot find any other documentation on the single axis autozoom solution described above.
Regards
Thomas
<chart:SfChart.Behaviors>
<chart:ChartZoomPanBehavior EnableSelectionZooming="True"
ZoomMode="Y"
EnablePanning="True" />
</chart:SfChart.Behaviors> |
Thanks for your reply.
I already have that part working - Mouse Zoom on the X axis and panning the same axis with click and drag.
But as shown in the image below, i need the Y axis to autozoom, so that Y values resize to fit the chart.
I guess you indicated where to do that, with the // Perform Action in the chart_ZoomChanged method, but not how. ;)
private void chart_ZoomChanged(object sender, ZoomChangedEventArgs e)
{
if ( e.NewRange != null && e.CurrentFactor != 1)
{
var range = (DoubleRange)(e.NewRange);
var x1 = range.Start;
var x2 = range.End;
var y1 = (double)secondaryAxis.VisibleRange.Start;
var y2 = (double)secondaryAxis.VisibleRange.End;
var collection = (chart.Series[0] as CandleSeries).GetDataPoints(x1, x2, y1, y2);
UpdateAxisRange(collection);
}
}
private void chart_SelectionZoomingEnd(object sender, SelectionZoomingEndEventArgs e)
{
var collection = (chart.Series[0] as CandleSeries).GetDataPoints(e.ZoomRect);
UpdateAxisRange(collection);
}
private void UpdateAxisRange(List<object> collection)
{
List<Model> data = new List<Model>();
foreach (var datapoint in collection)
{
data.Add(datapoint as Model);
}
secondaryAxis.Minimum = data.Min(a => a.Low);
secondaryAxis.Maximum = data.Max(a => a.High);
} |
Your example did exactly what i wanted, so a big thank you from here! :)
If i may be so bold as to suggest that you guys take a look at https://www.tradingview.com/chart/
I realize that those guys only focuses on financial charting. But that platform have some awesome features and a really nice feel.
So doing a tutorial on how to archive some of the features and functionality they have, would be greatly appreciated. :)