Ability to customize chart?

[Jesper]

My customer has handed me some new requirements that makes me wonder whether Telerik's ChartView can deliver upon.
For sake of simplicity I attached an illustration and marked the three features that's being requested:

A: Is it possible to add areas like in the illustration. I would need to be able to add one such area per series.
B: The area might have to change its size at some point along the X-axis and it would be great if I could highlight and textually present those points somehow
C: The series would need to be drawn differently outside the marked min/max areas. Is this possible?

I've looked at PointTemplateSelectors for feature C but I don't understand how to move on with that. How would I get to the selected color for example?

Thank you

[Petar Marchev]

Hi Jesper,

You can check our online Annotations example here.

Is it possible to add areas like in the illustration.
This seems like a MarkedZone functionality, which is currently not supported. The ChartView currently supports PlotBandAnnotations which are drawn from one end to the other end of the chart (refer to the example link - from Jan to Jul, from top to bottom, of course it can be from left to right and say from 400 to 600) .

I would need to be able to add one such area per series.
The annotations in ChartView are chart-wise and not series-wise. So you can add as many annotations as you need, but they are added directly to the chart and are not a part of any series.

extually present those points somehow
You can use the grid line annotations for this purpose and a custom annotation(with text).

The series would need to be drawn differently outside the marked min/max areas. Is this possible?
No. The series are not aware of the annotations and vice-versa.

The PointTemplateSelectors are targeted at the point-marks of a series (such as a bar, or a circle). This will not affect how the line is rendered. 

Let me know if I have addressed all issues that concern you and if you have any additional question.

Kind regards,
Petar Marchev
the Telerik team

[Jesper]

Hi again.

Gotcha on the annotation. I just needed a pointer at where to start looking. The examples seems to do precisely what I'm looking for.

On the need to draw the lines differently when the Y-value goes outside boundary value (min/max) I do realize I cannot link it to annotations. But I still need to draw a dashed line (or, at least, a line that's different somehow) when the Y-value goes outside a set of boundary values. 

I tried to use the series PointTemplateSelector like so:

<Window x:Class="Prototyp.GVS.StatsViewer.Nisse.SpikeWindow"
        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"
        xmlns:Nisse="clr-namespace:Prototyp.GVS.StatsViewer.Nisse" Title="SpikeWindow" Height="300" Width="300">
    <Grid>

        <telerik:RadCartesianChart>
            <telerik:RadCartesianChart.Resources>
                <DataTemplate x:Key="_invalidLineTemplate">
                    <Line StrokeDashArray="1.0 1.0" Stroke="Blue" />
                </DataTemplate>
                <Nisse:PointTemplateSelector x:Key="_templateSelector" InvalidPointTemplate="{StaticResource _invalidLineTemplate}" />
            </telerik:RadCartesianChart.Resources>

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Maximum="100"/>
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:RadCartesianChart.Series>
                <telerik:LineSeries Stroke="Orange" StrokeThickness="2" PointTemplateSelector="{StaticResource _templateSelector}" >
                    <telerik:LineSeries.DataPoints>
                        <Nisse:MyDataPoint MinValue="25" MaxValue="45" Color="Orange" Value="20"/>
                        <Nisse:MyDataPoint MinValue="25" MaxValue="45" Color="Orange" Value="40"/>
                        <Nisse:MyDataPoint MinValue="25" MaxValue="45" Color="Orange" Value="35"/>
                        <Nisse:MyDataPoint MinValue="25" MaxValue="45" Color="Orange" Value="40"/>
                        <Nisse:MyDataPoint MinValue="25" MaxValue="45" Color="Orange" Value="30"/>
                        <Nisse:MyDataPoint MinValue="25" MaxValue="45" Color="Orange" Value="50"/>
                    </telerik:LineSeries.DataPoints>
                </telerik:LineSeries>
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>

    </Grid>
</Window>

... with this code behind ...

namespace Prototyp.GVS.StatsViewer.Nisse
{
    /// <summary>
    /// Interaction logic for SpikeWindow.xaml
    /// </summary>
    public partial class SpikeWindow : Window
    {
        public SpikeWindow()
        {
            InitializeComponent();
        }
    }

    public class PointTemplateSelector : DataTemplateSelector
    {
        public DataTemplate ValidPointTemplate { get; set; }
        public DataTemplate InvalidPointTemplate { get; set; }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            var valid = isValid(item);
            var template = valid ? getValidDataTemplate(item, container) : getInvalidDataTemplate(item, container);
            return template;
        }

        private static bool isValid(object item)
        {
            var dp = item as MyDataPoint;
            if (dp == null)
                return true;

            return dp.Value >= dp.MinValue && dp.Value <= dp.MaxValue;
        }

        private DataTemplate getValidDataTemplate(object item, DependencyObject container)
        {
            return ValidPointTemplate ?? base.SelectTemplate(item, container);
        }

        private DataTemplate getInvalidDataTemplate(object item, DependencyObject container)
        {
            return InvalidPointTemplate ?? base.SelectTemplate(item, container);
        }
    }

    public class MyDataPoint : CategoricalDataPoint
    {
        public double MaxValue { get; set; }
        public double MinValue { get; set; }
        public Color Color { get; set; }
    }
}

But it makes no difference. I'm I even on the right track here?

Cheers

[Petar Marchev]

Hi Jesper,

Check this example. The lower left chart uses a PointTemplateSelector. That is where the red cirlce comes from. The PointTemplateSelector selects a template that is to be used for the point itself and not for the line. So unfortunately you can not use the template selector to achieve the functionality you need.

The only thing I can suggest for you is to break up the items source of the line series into two items sources and create two line series. The one with regular looks and the other with the dashed look.

I have attached a simple project and a snapshot to demonstrate what I have in mind. Note that this is just a demo code and you will need to rewrite all of it for your actual app so that it fits your requirements. If you have not done so, I suggest you explore our online examples here. I am sure that they will prove very useful for you to get to know how things work - Data Binding, Point Templates, Empty Values and so on. Additionally here is a link to our online help topics.

All the best,
Petar Marchev
the Telerik team