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. Image for the cookie policy date

Set SfChart axis range

How can I set DateTimeAxis range?

I want to display last 5 minutes. New data is added to chart every second.

            <Syncfusion:SfChart>
                <Syncfusion:SfChart.Behaviors>
                    <Syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="False"
                                                     EnablePanning="True"
                                                     EnableSelectionZooming="False" 
                                                     ZoomMode="X"/>
                </Syncfusion:SfChart.Behaviors>
                
                <Syncfusion:SfChart.PrimaryAxis>
                    <Syncfusion:DateTimeAxis LabelFormat="dd.MM.yyyy HH:mm:ss"/>
                </Syncfusion:SfChart.PrimaryAxis>

                <Syncfusion:SfChart.SecondaryAxis>
                    <Syncfusion:NumericalAxis Header="{Binding AxisYHeader}"/>
                </Syncfusion:SfChart.SecondaryAxis>

                <Syncfusion:LineSeries ItemsSource="{Binding Measurements}"
                                       XBindingPath="TimeStamp"
                                       YBindingPath="Value"/>
            </Syncfusion:SfChart>

5 Replies

EL Elvira March 29, 2013 04:53 AM UTC

I found Minimun and Maximum properties of DateTimeAxis, and it works perfectly.

Now I have a question about how to add scroll behavior to the chart.

For example, chart has a LineSeries with data from 01/01/2013 to 01/03/2013, DateTimeAxis Minimum property equals to 01/02/2013 and Maximum is 01/03/2013. How to add a scroll bar to scroll to the date range from 01/01/2013 to 01/02/2013?


RB Rajasekar B Syncfusion Team March 30, 2013 04:36 PM UTC

Hi Elvira,

 

Thanks for using syncfusion product.

Currently, we do not have support for scroll bars. It will be implemented in our upcoming release. However, as you need to display last five miutes of data, you can use ZoomPosition and ZoomFactor property available in DateTimeAxis.

·         ZoomPosition – Determines the start position of the data. Value must be between 0 and 1.

·         ZoomFactor – Determines the range to be displayed from actual range. Value must be between 0 and 1.

Following code demonstrates this,

[C#]

//Since only last 5 minutes data needs to be showed, delat is 5 minutes.

        private TimeSpan delta = TimeSpan.FromMinutes(5);

Following method sets ZoomPosition and ZoomFactor,

private void SetZoomFactorAndPosition()

        {

            if ((maximum - minimum) <= delta)

            {

                ZoomPosition = 0;

                ZoomFactor = 1;

            }

            else

            {

                double totalMilliseconds = (maximum - minimum).TotalMilliseconds;

                double factor = delta.TotalMilliseconds;

                ZoomFactor = factor / totalMilliseconds;

                ZoomPosition = 1 - ZoomFactor;

            }

        }

 

The above method shows only last five minutes of data and then using mouse you can pan and see the previous data.

We have also prepared sample for your reference. In this sample, data will be updated for every second and for each update above method will be called to set the ZoomPosition and ZoomFactor,

 

Thanks,

Rajasekar



ScrollingLineSeries_4ceea3cc.zip


EL Elvira April 1, 2013 05:30 AM UTC

Thank you for useful sample!


AH Attila Hajdrik November 11, 2013 05:54 PM UTC

Hi!


I can't download the sample you posted as an answer. How may I get that?


And since we're 6 months later now, do you've an update on the scrolling capability?


I've to visualize 1-5 years of candle data which means a lot of date, how can that achieved with virtualization or something like that?


Thanka,

Attila



MK Muneesh Kumar G Syncfusion Team November 22, 2013 05:49 AM UTC

Hi Attila,

Thanks for using Syncfusion products.

We would like to inform you that we have implemented the scrollbar feature. We can achieve your requirement by Setting EnableScrollBar="True" as per the below code snippet.

Code Snippet[XAML]:

<chart:SfChart.PrimaryAxis>

<chart:DateTimeAxis EnableScrollBar="True" ></chart:DateTimeAxis>

</chart:SfChart.PrimaryAxis>

We have prepared a sample based on this and you can find the sample under the following location:

Sample : http://www.syncfusion.com/downloads/support/directtrac/116016/SfChart_ScrollingSample1728957590.zip

Please let us know if you have any queries.

Regards,

Muneesh Kumar G.


Loader.
Up arrow icon