Label change on zooming

[John]

I have a chart where time is shown in minutes & seconds at PrimaryAxis. I'm using format of "mm:ss" and it works nice. But when I zoom further, lets say whole chart is showing 1 second, then I want label to show milliseconds as well "mm:ss.fff". But if zoom out, show mm:ss only.

How to do that ?

[Muneesh Kumar G]

Hi Xmen, 

 

Greetings from Syncfusion,  

 

We have analyzed your requirement and you can achieve this changing LabelFormat for axis based on VisibleInterval property in ActualRangeChanged event as per the below code snippet.  

 

Code snippet 

          <chart:SfChart.PrimaryAxis> 

                <chart:TimeSpanAxis  

                    x:Name="xAxis"                       

                   ActualRangeChanged="TimeSpanAxis_ActualRangeChanged"/> 

            </chart:SfChart.PrimaryAxis> 

 

private void TimeSpanAxis_ActualRangeChanged(object sender,       

                       ActualRangeChangedEventArgs e) 

        { 

            double interval = (double)xAxis.GetType().GetProperty("VisibleInterval", System.Reflection.BindingFlags.NonPublic | 

                System.Reflection.BindingFlags.Instance).GetValue(xAxis); 

 

            if ((interval < 1 && e.ActualInterval > 1000) || interval > 1000) 

                xAxis.LabelFormat = @"mm\:ss"; 

            else 

                xAxis.LabelFormat = "mm':'ss':'fff"; 

        } 

 

We have prepared a sample based on this, please find the sample from the following location.  

 

Sample:  

http://www.syncfusion.com/downloads/support/forum/143279/ze/WPF_Sample2005454349.zip 

 

Please let us know if you have any queries.  

 

Thanks, 

Muneesh Kumar G. 

[John]

still its not working as I want, buggy when zoom out. I think I need different approach, how do I make sure that second label only appear once at its starting point. Like, 00:27 should only appear once at the beginning no matter how much zoom level is, next label should be 00:28.

[Muneesh Kumar G]

Hi Xmen, 

 

Thanks for your update,  

 

We have analyzed our sample with reported problem. It does not display duplicate label in axis. We suspect that you are not changing LabelFormat in ActualRangeChanged event based on interval as per the below code snippet.  

 

Code snippet  

          <chart:SfChart.PrimaryAxis>  

                <chart:TimeSpanAxis   

                    x:Name="xAxis"                        

                   ActualRangeChanged="TimeSpanAxis_ActualRangeChanged"/>  

            </chart:SfChart.PrimaryAxis>  

  

private void TimeSpanAxis_ActualRangeChanged(object sender,        

                       ActualRangeChangedEventArgs e)  

        {  

            double interval = (double)xAxis.GetType().GetProperty("VisibleInterval", System.Reflection.BindingFlags.NonPublic |  

                System.Reflection.BindingFlags.Instance).GetValue(xAxis);  

  

            if ((interval < 1 && e.ActualInterval > 1000) || interval > 1000)  

                xAxis.LabelFormat = @"mm\:ss";  

            else  

                xAxis.LabelFormat = "mm':'ss':'fff";  

        }  

  

Sample: http://www.syncfusion.com/downloads/support/forum/143279/ze/WPF_Sample630757602 

 

Video: http://www.syncfusion.com/downloads/support/forum/143279/ze/SfChart-148786708 

 

If you still face any problem, can you revert us by modifying the attached sample based on your application scenario, this will help us to provide you a better solution at the earliest.  

 

Thanks, 

Muneesh Kumar G. 

[John]

please read my last message, I no longer want milliseconds. Just a simple format of mm:ss.

[Muneesh Kumar G]

Hi Xmen, 

 

You can achieve this requirement by setting EnableAutoIntervalOnZooming as false and required Interval in axis as per the below code snippet.  

 

Code snippet 

<chart:SfChart.PrimaryAxis> 

                <chart:TimeSpanAxis Interval="00:00:01" 

                    x:Name="xAxis" EnableAutoIntervalOnZooming="False" 

                    LabelFormat="mm\:ss"/> 

            </chart:SfChart.PrimaryAxis> 

 

Here Interval 00:00:01 represents hh:mm:ss format. Please let us know if you have any queries.  

 

UG: https://help.syncfusion.com/wpf/sfchart/axis#auto-interval-calculation-on-zooming 

 

Thanks, 

Muneesh Kumar G. 

 

[John]

Hi Xmen, 

 

You can achieve this requirement by setting EnableAutoIntervalOnZooming as false and required Interval in axis as per the below code snippet.  

 

Code snippet 

<chart:SfChart.PrimaryAxis> 

                <chart:TimeSpanAxis Interval="00:00:01" 

                    x:Name="xAxis" EnableAutoIntervalOnZooming="False" 

                    LabelFormat="mm\:ss"/> 

            </chart:SfChart.PrimaryAxis> 

 

Here Interval 00:00:01 represents hh:mm:ss format. Please let us know if you have any queries.  

 

UG: https://help.syncfusion.com/wpf/sfchart/axis#auto-interval-calculation-on-zooming 

 

Thanks, 

Muneesh Kumar G. 

 

yes but now whole chart is filled by lines if using 10 minutes of time span. Its only good if zoom in deep.

[Muneesh Kumar G]

Hi Xmen,  

 

Sorry for the inconvenience caused.  

 

We have achieved your requirement by extending TimeSpanAxis and calculated interval based on visible range as per the below code snippet.  

   

Code snippet  

  <chart:SfChart  x:Name="chart" Margin="15" > 

 

            <chart:SfChart.Behaviors> 

                <chart:ChartZoomPanBehavior EnableZoomingToolBar="True" EnableSelectionZooming="True"/> 

            </chart:SfChart.Behaviors> 

            <chart:SfChart.PrimaryAxis> 

 

                <local:TimeSpanAxisExt   

                    x:Name="xAxis"  

                    LabelFormat="mm\:ss"/> 

            </chart:SfChart.PrimaryAxis> 

 

            <chart:SfChart.SecondaryAxis> 

                <chart:NumericalAxis > 

                </chart:NumericalAxis> 

            </chart:SfChart.SecondaryAxis> 

 

            <chart:FastLineBitmapSeries XBindingPath="XValue" YBindingPath="YValue" ItemsSource="{Binding Data}"/> 

 

        </chart:SfChart> 

 

  

public class TimeSpanAxisExt :TimeSpanAxis 

    { 

        protected override void CalculateVisibleRange(Size avalableSize) 

        { 

            base.CalculateVisibleRange(avalableSize); 

 

            TimeSpan interval=new TimeSpan(); 

            if (VisibleRange.Start > 1) 

            { 

                TimeSpan ts1 = TimeSpan.FromMilliseconds(VisibleRange.Start); 

                TimeSpan ts2 = TimeSpan.FromMilliseconds(VisibleRange.End); 

 

                TimeSpan diff = ts2.Subtract(ts1); 

 

                interval = new TimeSpan(diff.Ticks / 10); 

 

                if (interval.Seconds == 0) 

                    interval = new TimeSpan(0, 0, 1); 

            } 

 

            this.GetType().GetProperty("VisibleInterval", System.Reflection.BindingFlags.NonPublic | 

                System.Reflection.BindingFlags.Instance).SetValue(this, interval.TotalMilliseconds); 

        } 

    } 

 

We have prepared a sample based on this, please find the sample from the following location.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/143279/ze/WPF_Sample695203153 

 

Please let us know if you have any queries.  

  

Thanks,  

Muneesh Kumar G.