We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Label change on zooming

Thread ID:

Created:

Updated:

Platform:

Replies:

143279 Mar 12,2019 06:00 PM UTC Mar 22,2019 06:35 AM UTC WPF 7
loading
Tags: SfChart
John
Asked On March 12, 2019 06:00 PM UTC

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 [Syncfusion]
Replied On March 13, 2019 06:05 AM UTC

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:  
 
Please let us know if you have any queries.  
 
Thanks, 
Muneesh Kumar G. 


John
Replied On March 15, 2019 03:14 AM UTC

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 [Syncfusion]
Replied On March 15, 2019 09:21 AM UTC

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";  
        }  
  
 
 
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
Replied On March 15, 2019 04:24 PM UTC

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

Muneesh Kumar G [Syncfusion]
Replied On March 18, 2019 07:00 AM UTC

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.  
 
 
Thanks, 
Muneesh Kumar G. 
 


John
Replied On March 21, 2019 05:50 PM UTC

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.  
 
 
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 [Syncfusion]
Replied On March 22, 2019 06:35 AM UTC

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.  
 
 
Please let us know if you have any queries.  
  
Thanks,  
Muneesh Kumar G.  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;