meteo chart using ChartView control

[Charly]

Hi,

is it possible to create chart using the new ChartView like the meteo chart in the original RadChart?
I need to show image and value on y axis, and date on x axis. 

[Giuseppe]

Hello Charly,

You can achieve the desired appearance via custom DataTemplateSelector for the series item labels:

• Set SplineSeries.ShowLabel property to true.
• Implement custom DataTemplateSelector that retrieves the proper image based on the respective data point value (ImageTemplateSelector).
• Define new ChartSeriesLabelDefinition for the SplineSeries and set the custom ImageTemplateSelector to the ChartSeriesLabelDefinition.TemplateSelector property (you can also use the ChartSeriesLabelDefinition.Margin property for fine-tuning the image position).
• Add the created ChartSeriesLabelDefinition to the SplineSeries.LabelDefinitions collection.

Here is some sample code to get you started:
XAML

<Window x:Class="WpfApplication15.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"
        xmlns:demo="clr-namespace:WpfApplication15"
        Title="MainWindow">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <demo:ImageTemplateSelector x:Key="ImageSelector" />
        </Grid.Resources>

        <telerik:RadCartesianChart x:Name="RadChart1">
            <telerik:RadCartesianChart.Resources>
                <DataTemplate x:Key="Custom1">
                    <Ellipse Height="10" Width="10" Fill="Red" />
                </DataTemplate>
            </telerik:RadCartesianChart.Resources>

            <telerik:SplineSeries ShowLabels="True">
                <telerik:SplineSeries.LabelDefinitions>
                    <telerik:ChartSeriesLabelDefinition Margin="10,0,0,0" TemplateSelector="{StaticResource ImageSelector}" />
                </telerik:SplineSeries.LabelDefinitions>
            </telerik:SplineSeries>

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis LabelFormat="dd/MM" />
            </telerik:RadCartesianChart.HorizontalAxis>

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

        </telerik:RadCartesianChart>

    </Grid>
</Window>

C#

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using Telerik.Charting;
using Telerik.Windows.Controls.ChartView;
using Telerik.Windows.Controls;

namespace WpfApplication15
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private Random rand = new Random(123456);

        public MainWindow()
        {
            InitializeComponent();

            var series = RadChart1.Series[0] as SplineSeries;

            for (int i = 0; i < 50; i++)
            {
                series.DataPoints.Add(new CategoricalDataPoint() { Value = rand.Next(10, 100), Category = DateTime.Today.AddDays(i) });
            }
        }

        public class ImageTemplateSelector : DataTemplateSelector
        {
            public override DataTemplate SelectTemplate(object item, DependencyObject container)
            {
                // Implement your custom image selection logic here (item is the respective data point, container -- the respective series).

                return container.GetVisualParent<RadCartesianChart>().Resources["Custom1"] as DataTemplate;
            }
        }
    }
}

Hope this helps.


Regards,
Giuseppe
the Telerik team

[Charly]

Hi Giuseppe  ,

Thanks for your response.
For example, i have the following class:
WeatherInfo
{
DateTime Timestamp ;
double AverageTemperature;
string Condition; //sunny, partial cloudy, cloudy, heavy rain, etc
}
.

WeatherViewModel has a collection of WeatherInfo
public ObservableCollection<WeatherInfo> WeatherInfoCollection;

how do I use ChartView that plot averageTemperature against Timestamp  
, and for each point, show the image for the condition.
I prefer to do all that using xaml. 

if using RadChart, i can customize the label using SeriesItemLabelStyle, add image and bind source to DataItem.Condition with converter to image.

But there's problem with the scrolling and zooming of RadChart when data points are outside of the chart area. (we get No Data Source). so now, i want to use ChartView to replace the RadChart. 

but what i find in ChartView, we're limited to ValueBinding and CategoryBinding. is there anyway to access the 'Condition' value from within  LineSeries?

<chartView:LineSeries  
CategoryBinding="Timestamp" 
ValueBinding="Glucose"
ItemsSource="{Binding WeatherInfoCollection}"/>

[Charly]

up

[Giuseppe]

Hello Charly,

Starting from Q3 2011 SP1 (v2011.3.1220.40) it is possible to access the original data item for a databound chart via the DataPoint.DataItem property. So you can retrieve the original business object in the DataTemplateSelector for the series labels mentioned in our previous reply and select the proper DataTemplate (image) based on another business object property value (check the ImageTemplateSelector.SelectTemplate(...) method below):

XAML

<Window x:Class="WpfApplication15.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"
        xmlns:demo="clr-namespace:WpfApplication15"
        Title="MainWindow">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <demo:ImageTemplateSelector x:Key="ImageSelector" />
        </Grid.Resources>

        <telerik:RadCartesianChart x:Name="RadChart1">
            <telerik:RadCartesianChart.Resources>
                <DataTemplate x:Key="Custom1">
                    <Ellipse Height="10" Width="10" Fill="Red" />
                </DataTemplate>
            </telerik:RadCartesianChart.Resources>

            <telerik:SplineSeries ShowLabels="True">
                <telerik:SplineSeries.LabelDefinitions>
                    <telerik:ChartSeriesLabelDefinition Margin="10,0,0,0" TemplateSelector="{StaticResource ImageSelector}" />
                </telerik:SplineSeries.LabelDefinitions>
            </telerik:SplineSeries>

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis LabelFormat="dd/MM" />
            </telerik:RadCartesianChart.HorizontalAxis>

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

        </telerik:RadCartesianChart>

    </Grid>
</Window>

C#

using System;

using System.Collections.Generic;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using Telerik.Charting;

using Telerik.Windows.Controls;

using Telerik.Windows.Controls.ChartView;

 

namespace WpfApplication15

{

    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    public partial class MainWindow : Window

    {

        private Random rand = new Random(123456);

 

        public MainWindow()

        {

            InitializeComponent();

 

            List<ChartData> data = new List<ChartData>();

            for (int i = 0; i < 50; i++)

            {

                data.Add(new ChartData() { Value = rand.Next(10, 100), Time = DateTime.Today.AddDays(i) });

            }

 

            var series = RadChart1.Series[0] as SplineSeries;

            series.ValueBinding = new PropertyNameDataPointBinding("Value");

            series.CategoryBinding = new PropertyNameDataPointBinding("Time");

            series.ItemsSource = data;

        }

 

        private IList<ChartData> GetData(int index)

        {

            DateTime startTime = new DateTime(2011, 12, 20, 6, 0, 0);

 

            List<ChartData> data = new List<ChartData>();

            for (int i = 0; i < 720; i++)

            {

                var dataItem = new ChartData();

                dataItem.Time = startTime;

 

                // Simulates null value for some series

                if (startTime.Hour % 2 == 0 && startTime.Minute < 10 && index < 4)

                {

                    dataItem.Value = null;

                }

                else

                {

                    dataItem.Value = rand.Next(10, 17);

                }

 

                data.Add(dataItem);

                startTime = startTime.AddMinutes(2);

            }

 

            return data;

        }

    }

 

    public class ImageTemplateSelector : DataTemplateSelector

    {

        public override DataTemplate SelectTemplate(object item, DependencyObject container)

        {

            // Implement your custom image selection logic here (item is the respective data point, container -- the respective series).

            var dataPoint = item as DataPoint;

                 // Use the data item as per your requirements to return different data template (image)


            ChartData dataItem = dataPoint.DataItem as ChartData;

 

            return container.GetVisualParent<RadCartesianChart>().Resources["Custom1"] as DataTemplate;

        }

    }

 

    public class ChartData

    {

        public DateTime Time

        {

            get;

            set;

        }

 

        public double? Value

        {

            get;

            set;

        }

    }

}

Hope this helps.


Kind regards,
Giuseppe
the Telerik team

[Charly]

Thanks, 

that's what i need.