DateTimeContinuousAxis and MajorStep/MajorStepUnit behavior

[Michael]

There are data for whole year with 1 minute time step. It's 525,600 points. 
I'm trying to use DateTimeContinuousAxis, but its properties behavior is really strange.

I need ticks for first minute of each day. But setting MajorStep="1" MajorStepUnit="Day" results in attached image. (It results in 1 tick per 2 hours for some reason)
Is there way to get one tick for day?

Note, that I also use Pan/Zoom feature.

Thanks,
Michael



MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        DataContext = this;
        var c = 365*24*60;
        var data = new List<Step>(c);
        var random = new Random();
        for (var minute = 0; minute < c; minute++)
        {

            var date = new DateTime(2006, 1, 1) + TimeSpan.FromMinutes(minute);
            var value = random.Next(1800, 2000);
            data.Add(new Step {Value = value, Date = date});
        }
        Data = data;
    }

    public static readonly DependencyProperty DataProperty = DependencyProperty.Register("Data",
        typeof (IEnumerable<Step>), typeof (MainWindow), new PropertyMetadata(null));

    public IEnumerable<Step> Data
    {
        get { return (IEnumerable<Step>) GetValue(DataProperty); }
        set { SetValue(DataProperty, value); }
    }
}

public class Step
{
    public Double Value { get; set; }
    public DateTime Date { get; set; }
}



MainWindow.xaml

<Window x:Class="telerik_chart_big_data.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <telerik:RadCartesianChart x:Name="Chart" Zoom="12.1,1" PanOffset="0,0" MaxZoom="365,1">
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal"/>
            </telerik:RadCartesianChart.Behaviors>
           
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis Title="X" LabelFitMode="MultiLine" PlotMode="OnTicks" MajorStep="1" MajorStepUnit="Day"/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Title="Y"/>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:LineSeries ItemsSource="{Binding Data}" RenderMode="Light" ValueBinding="Value" CategoryBinding="Date" Stroke="Red"/>            
        </telerik:RadCartesianChart>
    </Grid>
</Window>

[Michael]

Screenshot attached.

[Petar Marchev]

Hello Michael,

Thank you for the attached code, image and explanations. I was able to create a project with this code and I was able to reproduce the behavior you are observing.

The output you get is a natural result of a feature that the axis has. When the chart is fully zoomed out, you want it to have 1 label for every Day (MajorStepUnit=Day, MajorStep=1). This means that the axis will show about 360 labels. The axis assumes that this number of ticks is the desired ticks count and it tries to show relatively the same number of labels when zooming in. So, when you zoom in 10 times, it recalculates the actual step, so that about 360 labels are shown again. So now we have about 10 labels per day, leading to that 2 hour step you see.

I hope I was able to explain well what is happening. Unfortunately, the axis does not have an API to disable this feature (we have this logged here, you can like it and follow it).

However, there is a way to counter this feature. You can attach a handler to the ZoomChanged event of the chart and set a new major step. The chart internally calculates a zoomFactor based on the zoom and we need to use the same calculations and set the major step:

double zoomFactor = this.Chart.Zoom.Width - (this.Chart.Zoom.Width % 2);
zoomFactor = Math.Max(1, zoomFactor);
xAxis.MajorStep = zoomFactor;

I have also attached a project so you can see it in action. Now, when the user zooms in, the axis should never change the actual step it is using, and this should lead to the result you need. Let us know how it goes.

On a side note, I see that you are indeed showing many points and I think that you can take advantage of the lighter render modes we have so you can get a better performance. Check out the rendering article here.

Even when you switch to a lighter render mode, you will still have so many items. In the image you attached, there are about 600 thousand items, you have zoomed in 12 times, leaving about 50 thousand items on screen. If the chart is 1000 pixels wide - there are 50 items per single pixel (horizontal wise). Generally this leads to unreadable representation. I suggest you consider using a ChartDataSource and sampling down the items to a readable number. I have also demonstrated this in the attached project.

Regards,
Petar Marchev
Telerik