Step Area Series problem with PlotMode

[Ernie S]

Hi Guys.  I am using the latest version of the control and am noticing a problem in the StepAreaSeries.  Consider this code:

<UserControl x:Class="StepLineChart.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:StepLineChart"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.DataContext>
        <local:MainVM />
    </UserControl.DataContext>

    <UserControl.Resources>
        <DataTemplate x:Key="NodePointTemplate">
            <Ellipse Fill="Yellow" Width="10" Height="10"/>
        </DataTemplate>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadCartesianChart x:Name="chart1">

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis LabelFormat="MMMdd"
                                                PlotMode="OnTicksPadded"/>
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis />
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True"
                                                ShowTrackInfo="False"
                                                SnapMode="ClosestPoint"/>
            </telerik:RadCartesianChart.Behaviors>

            <telerik:RadCartesianChart.Series>
                <telerik:StepAreaSeries CategoryBinding="Date"
                                        PointTemplate="{StaticResource NodePointTemplate}"
                                        CombineMode="Stack"
                                        ValueBinding="Val"
                                        RisersPosition="BetweenTicks"
                                        ItemsSource="{Binding OriginalData}"
                                        Fill="Blue" />
                <telerik:StepAreaSeries CategoryBinding="Date"
                                        PointTemplate="{StaticResource NodePointTemplate}"
                                        CombineMode="Stack"
                                        RisersPosition="BetweenTicks"
                                        ValueBinding="Val"
                                        ItemsSource="{Binding OriginalData}"
                                        Fill="Green" />

            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>
    </Grid>
</UserControl>

And this codebehind:

using System.Windows.Controls;
using Telerik.Charting;
using Telerik.Windows.Controls.ChartView;

namespace StepLineChart
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            chart1.HorizontalAxis = new DateTimeCategoricalAxis()
            {
                LabelFormat = "MMM.dd.yy",
                PlotMode = AxisPlotMode.OnTicksPadded
            };
        }
    }
}

Paying attention to the line "RisersPosition="BetweenTicks"" and  "PlotMode = AxisPlotMode.OnTicksPadded".  What is suppose to happen is the steps are suppose to begin at the datapoint when BetweenTicks is used.  This works ONLY if the PlotMode is not set, i.e. I comment out that last line in the code behind. 

Doesnt seem like it should work with way so I thought I would ask.

Thanks
Ernie

[Ernie S]

Sorry, should have mentioned this.  You will notice that the XAML code does have the PlotMode set as well which does not cause any problem.  It is only after the mode is set in the code behind after initialization that the problem shows up.

[Petar Marchev]

Hi Ernie,

Thank you for the attached images and code snippets. Unfortunately I am unsure if I understand the issue, because the images look correct. The axis' plot-mode and series' risers-position have little to do with each other. The axis' plot-mode pretty much specifies where the axis labels are placed. In date time continuous axis the label is placed exactly where the value is. The riser position specifies where the riser's position is. I have attached an image that depicts with a red line where the riser is, and indeed the riser is between ticks, so this seems to be correct.

Please excuse me if I misunderstand something and let me know if I need to provide more information.

Regards,
Petar Marchev
Telerik

 

 

[Ernie S]

Hi Petar.  Yes, It is a little confusing.  Lets try this:  Try replacing the code behind with this:

using System.Windows.Controls;
using Telerik.Charting;
using Telerik.Windows.Controls.ChartView;

namespace StepLineChart
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            chart1.HorizontalAxis = new DateTimeCategoricalAxis()
            {
                LabelFormat = "MMM.dd.yy",
                //PlotMode = AxisPlotMode.OnTicksPadded  <- this is the only difference!
            };
        }
    }
}

Notice there is only one difference and that is the last line is commented out.  With this commented out you get the result of "WithOUTPlotMode.jpg" which is what I was looking for.  But, if you uncomment it back in you get "WithPlotMode.jpg" which does not seem right. 

Shouldnt both look exactly the same?  You will notice that all I am doing is resetting the plotmode to the same exact setting.  In other words, in the XAML I set it with <..PlotMode="OnTicksPadded"..>  and in the code-behind I set it with "PlotMode = AxisPlotMode.OnTicksPadded" (the last line commented in/out).  So why would setting it in the code-behind AFTER it has been rendered to the exact same setting make the output look different?

Hope that makes sense.

Thanks
Ernie

[Petar Marchev]

Hi Ernie,

Hm, I think I am starting to get what you mean : )

In code you are creating a brand new axis. It has a default value for its plot mode (BetweenTicks). And this is why you get different results. In xaml you have OnTicksPadded and in code you don't, because you have commented this out. Does this make sense?

Regards,
Petar Marchev
Telerik

 

 

[Ernie S]

Thanks again Petar.  Take a look at this and let me know if it makes sense:

01.<UserControl x:Class="StepLineChart.MainPage"
02.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04.    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
05.    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
06.    xmlns:local="clr-namespace:StepLineChart"
07.    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08.    mc:Ignorable="d"
09.    d:DesignHeight="300" d:DesignWidth="400">
10.
11.    <UserControl.DataContext>
12.        <local:MainVM />
13.    </UserControl.DataContext>
14.
15.    <UserControl.Resources>
16.        <DataTemplate x:Key="NodePointTemplate">
17.            <Ellipse Fill="Yellow" Width="10" Height="10"/>
18.        </DataTemplate>
19.
20.    </UserControl.Resources>
21.
22.    <Grid x:Name="LayoutRoot" Background="White">
23.        <telerik:RadCartesianChart x:Name="chart1">
24.
25.            <telerik:RadCartesianChart.HorizontalAxis>
26.                <telerik:DateTimeContinuousAxis LabelFormat="MMMdd"
27.                                                PlotMode="OnTicks"/>
28.            </telerik:RadCartesianChart.HorizontalAxis>
29.
30.            <telerik:RadCartesianChart.VerticalAxis>
31.                <telerik:LinearAxis />
32.            </telerik:RadCartesianChart.VerticalAxis>
33.
34.            <telerik:RadCartesianChart.Behaviors>
35.                <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True"
36.                                                ShowTrackInfo="False"
37.                                                SnapMode="ClosestPoint"/>
38.            </telerik:RadCartesianChart.Behaviors>
39.
40.            <telerik:RadCartesianChart.Series>
41.                <telerik:StepAreaSeries CategoryBinding="Date"
42.                                        PointTemplate="{StaticResource NodePointTemplate}"
43.                                        CombineMode="Stack"
44.                                        ValueBinding="Val"
45.                                        RisersPosition="BetweenTicks"
46.                                        ItemsSource="{Binding OriginalData}"
47.                                        Fill="Blue" />
48.                <telerik:StepAreaSeries CategoryBinding="Date"
49.                                        PointTemplate="{StaticResource NodePointTemplate}"
50.                                        CombineMode="Stack"
51.                                        RisersPosition="BetweenTicks"
52.                                        ValueBinding="Val"
53.                                        ItemsSource="{Binding OriginalData}"
54.                                        Fill="Green" />
55.
56.            </telerik:RadCartesianChart.Series>
57.        </telerik:RadCartesianChart>
58.    </Grid>
59.</UserControl>

and this:

01.using System.Windows.Controls;
02.
03.namespace StepLineChart
04.{
05.    public partial class MainPage : UserControl
06.    {
07.        public MainPage()
08.        {
09.            InitializeComponent();
10.
11.            //chart1.HorizontalAxis = new DateTimeCategoricalAxis()
12.            //{
13.            //    LabelFormat = "MMM.dd.yy",
14.            //    PlotMode = AxisPlotMode.OnTicks
15.            //};
16.        }
17.    }
18.}

Look at line 27 of the XAML which now says "PlotMode="OnTicks" and the replacement of the X-Axis is commented out in the code behind.  Attached is a screen shot of what I get with this - OnTicsInXaml.jpg.  Notice the yellow dots are at the beginning of steps. 

Now, if I do this:

01.using System.Windows.Controls;
02.using Telerik.Charting;
03.using Telerik.Windows.Controls.ChartView;
04.
05.namespace StepLineChart
06.{
07.    public partial class MainPage : UserControl
08.    {
09.        public MainPage()
10.        {
11.            InitializeComponent();
12.
13.            chart1.HorizontalAxis = new DateTimeCategoricalAxis()
14.            {
15.                LabelFormat = "MMM.dd.yy",
16.                PlotMode = AxisPlotMode.OnTicks
17.            };
18.        }
19.    }
20.}

Note the axis is replaced but still with OnTics as the plot mode.  I then get the yellow dots in the middle of the steps - OnTicsInCode.jpg. 

UNDERSTAND that the code behind is switching to a DateTimeCategoricalAxis axis, not a DateTimeCategoricalAxis (this has been the case all along).

Does that make sense?

Thanks
Ernie

[Petar Marchev]

Hi Ernie,

I have attached a small project that demonstrates two things. One is the PlotMode and the other is the RisersPosition.

As I mentioned earlier - these properties have little to do with each other and I will try to explain what the properties do.

plot mode
The plot mode of the axis specifies the position of the axis labels and axis ticks and where the point visual is drawn. In a categorical axis, a category has a position (singularity) and this is exactly where the middle of the axis label is. You can check the demo by looking only at the LineSeries, this should clear the plot mode.

Note that both series have point visuals and it is crucial that they are positioned in the exact same place.

risers position
Now, a riser is the vertical line of the step series. The RisersPosition property only specifies the position of the riser. When you set this value to BetweenTicks - you surely want to see the riser positioned between the ticks, no matter the axis' plot mode. Same applies for OnTicks.

Now, you see that one property controls the position of the axis labels and ticks, and the other controls the position of the risers.

Do try playing with the project and see that both of the properties are always respected. I hope this helps.

Regards,
Petar Marchev
Telerik

 

 

[Ernie S]

Thanks Petar for the project, I appreciate the all the effort you have put into it.

Ok, I think we are getting to it and in hindsight I should have phrased the question a little differently at the beginning. I think what I am asking is this: For the plot-mode - it is intentional that it behaves differently when using a Data-Time Continuous vs Categorical?

If you look at this pure xaml page (no code in the code-behind other then the typical initializer):

01.<UserControl x:Class="StepLineChart.MainPage1"
02.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04.    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
05.    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
06.    xmlns:local="clr-namespace:StepLineChart"
07.    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08.    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">
09.
10.    <UserControl.DataContext>
11.        <local:MainVM />
12.    </UserControl.DataContext>
13.
14.    <UserControl.Resources>
15.        <DataTemplate x:Key="NodePointTemplate">
16.            <Ellipse Fill="Yellow" Stroke="Black" Width="10" Height="10"/>
17.        </DataTemplate>
18.    </UserControl.Resources>
19.
20.    <Grid Background="White">
21.        <Grid.RowDefinitions>
22.            <RowDefinition />
23.            <RowDefinition />
24.        </Grid.RowDefinitions>
25.
26.        <TextBlock Text="Date Time Continuous" HorizontalAlignment="Center" />
27.
28.        <telerik:RadCartesianChart Grid.Row="0">
29.
30.            <telerik:RadCartesianChart.HorizontalAxis>
31.                <telerik:DateTimeContinuousAxis LabelFormat="MMMdd"
32.                                                PlotMode="OnTicks"/>
33.            </telerik:RadCartesianChart.HorizontalAxis>
34.
35.            <telerik:RadCartesianChart.VerticalAxis>
36.                <telerik:LinearAxis />
37.            </telerik:RadCartesianChart.VerticalAxis>
38.
39.            <telerik:RadCartesianChart.Series>
40.                <telerik:StepAreaSeries CategoryBinding="Date"
41.                                        PointTemplate="{StaticResource NodePointTemplate}"
42.                                        ValueBinding="Val"
43.                                        ItemsSource="{Binding OriginalData}"
44.                                        Fill="Green" />
45.            </telerik:RadCartesianChart.Series>
46.        </telerik:RadCartesianChart>
47.
48.
49.        <TextBlock Text="Date Time Categorical" HorizontalAlignment="Center" Grid.Row="1" />
50.
51.        <telerik:RadCartesianChart Grid.Row="1">
52.
53.            <telerik:RadCartesianChart.HorizontalAxis>
54.                <telerik:DateTimeCategoricalAxis LabelFormat="MMMdd"
55.                                                 PlotMode="OnTicks"/>
56.            </telerik:RadCartesianChart.HorizontalAxis>
57.
58.            <telerik:RadCartesianChart.VerticalAxis>
59.                <telerik:LinearAxis />
60.            </telerik:RadCartesianChart.VerticalAxis>
61.
62.            <telerik:RadCartesianChart.Series>
63.                <telerik:StepAreaSeries CategoryBinding="Date"
64.                                        PointTemplate="{StaticResource NodePointTemplate}"
65.                                        ValueBinding="Val"
66.                                        ItemsSource="{Binding OriginalData}"
67.                                        Fill="Blue" />
68.            </telerik:RadCartesianChart.Series>
69.        </telerik:RadCartesianChart>
70.
71.    </Grid>
72.</UserControl>

This results in the attached screen shot.  Note that the ONLY different between the plots are the Horizontal axis types (lines 31 and 54).  The riser position settings are untouched.  I can get the bottom chart to look like the top by setting its RiserPosition to OnTicks but I cannot get the top chart to look like the bottom.

Ernie

[Petar Marchev]

Hi Ernie,

it is intentional that it behaves differently when using a Data-Time Continuous vs Categorical?
Yes, this is intentional. The reason for this is that there is a huge difference in the notion of the two axes.

A categorical axis consists of categories. These are different entities, discrete objects. Categories can be: "Bananas", "Carrots", 5.6, "Bolts", 1/12014. You can find some way to compare them, but categories are not necessarily comparable. A category occupies the whole axis slot and there is no position for "Bananas" and a half.

Continuous axis (linear, logarithmic, date time continuous) do not work with separate categories, they work with values. Here you have the notion of 10 and 10 and a half. You have the notion of Jan, Feb, March and March the 5th. Here the items will be positioned in a way to respect the actual value.

This is why the date time continuous axis does not support the RisersPosition. This is on purpose, so that it does not fool the viewer. The riser should be exactly where the item's DateTime is, otherwise the data would be presented incorrectly. If the riser is positioned somewhere else - the viewer might understand that the change in the values happened earlier.

You will easily see this if you test the two axes with unevenly distributed dates, say:
1/1/2010
2/2/2010
1/1/2011
2/1/2011
3/1/2011
4/4/2012

Regards,
Petar Marchev
Telerik

 

 

[Ernie S]

Hi Petar.  Sorry for taking so long to respond.  Thank you for the answer.  I am not sure I quite agree with the limitation but if it is by design I will have to live with it.

Thanks for all the time taken.

Ernie