This is a migrated thread and some comments may be shown as answers.

DateTimeContinuousAxis refuses to cooperate, data is not displayed

6 Answers 205 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Clas Ericson
Top achievements
Rank 2
Clas Ericson asked on 04 May 2012, 11:13 AM
Hi,
I've got stuck when using ChartView to display a ScatterPoint chart. The X-axis should be based on dates and I'm therefor using the DateTimeContinuousAxis but it doesn't work. My business object is quite alright because when I tried using a regular LinearAxis fed with the Year part my scatter points were shown.

I have a zipped test solution reproducing my error on the following link, http://ubuntuone.com/50qawHa1EqVFHfB6ik8L4B
For a quick view of the code, see below.

Does anyone have a clue why it's not working?

Regards, Clas Ericson

MainPage.xaml
<UserControl x:Class="RadChartView_DateTimeContinuousAxis.MainPage"
    xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"  
    xmlns:local="clr-namespace:RadChartView_DateTimeContinuousAxis"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.DataContext>
        <local:ViewModel />
    </UserControl.DataContext>
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadCartesianChart
            x:Name="chart"
            Grid.Row="2"
            Grid.ColumnSpan="2"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Margin="0,0,0,0">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis
                    PlotMode="OnTicksPadded"
                    LastLabelVisibility="Hidden"
                    Title="Year"
                    MajorStep="2"
                    MajorStepUnit="Year"
                    LabelInterval="4" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Title="kWh/m2" />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartPanAndZoomBehavior PanMode="Both" ZoomMode="Both">
                </telerik:ChartPanAndZoomBehavior>
            </telerik:RadCartesianChart.Behaviors>
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="Y"  />
            </telerik:RadCartesianChart.Grid>
            <chartView:ScatterPointSeries AllowSelect="False" ItemsSource="{Binding ScatterData}"  XValueBinding="XValue" YValueBinding="YValue">
                <chartView:ScatterPointSeries.PointTemplate>
                    <DataTemplate>
                        <Ellipse Width="5" Height="5" Fill="{Binding DataItem.FillBrush}" />
                    </DataTemplate>
                </chartView:ScatterPointSeries.PointTemplate>
            </chartView:ScatterPointSeries>
        </telerik:RadCartesianChart>
    </Grid>
</UserControl>



ViewModel.cs
using System;
using System.Collections.Generic;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;
 
namespace RadChartView_DateTimeContinuousAxis
{
    public class ViewModel : ViewModelBase
    {
        public IEnumerable<BuildYearsChartItem> ScatterData { get; set; }
 
        /// <summary>
        /// Default constructor
        /// </summary>
        public ViewModel()
        {
            ScatterData = new List<BuildYearsChartItem>()
                                {
                                    new BuildYearsChartItem() { XValue = new DateTime(1948,1,1), YValue = 148.65, FillBrush = new SolidColorBrush(Color.FromArgb(255,128,128,255)) },
                                    new BuildYearsChartItem() { XValue = new DateTime(1963,1,1), YValue = 125.65, FillBrush = new SolidColorBrush(Color.FromArgb(255,128,128,255)) },
                                    new BuildYearsChartItem() { XValue = new DateTime(1978,1,1), YValue = 176.65, FillBrush = new SolidColorBrush(Color.FromArgb(255,128,128,255)) },
                                    new BuildYearsChartItem() { XValue = new DateTime(1982,1,1), YValue = 185.65, FillBrush = new SolidColorBrush(Color.FromArgb(255,128,128,255)) },
                                    new BuildYearsChartItem() { XValue = new DateTime(1987,1,1), YValue = 112.65, FillBrush = new SolidColorBrush(Color.FromArgb(255,128,128,255)) },
                                    new BuildYearsChartItem() { XValue = new DateTime(1996,1,1), YValue = 101.65, FillBrush = new SolidColorBrush(Color.FromArgb(255,128,128,255)) }
                                };
            this.OnPropertyChanged("ScatterData");
        }
    }
}

6 Answers, 1 is accepted

Sort by
0
Accepted
Yavor
Telerik team
answered on 09 May 2012, 01:43 PM
Hi Clas,

Scatter point series work with continuous series (DateTime axes are categorical). Currently we don't have a point series that works with categorical axes, but we have this in our plans for the future. In the meantime you can use a bar series with a point template that looks exactly like a scatter point series. Here is some code:

<telerik:BarSeries.PointTemplate>
    <DataTemplate>
        <Ellipse Width="6" Height="6" Fill="#FF5AA4D4" VerticalAlignment="Top">
            <Ellipse.RenderTransform>
                <TranslateTransform Y="-3" X="-3" />
            </Ellipse.RenderTransform>
        </Ellipse>
    </DataTemplate>
</telerik:BarSeries.PointTemplate>

All the best,
Yavor
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Clas Ericson
Top achievements
Rank 2
answered on 10 May 2012, 11:36 AM
Thanks Yavor,
for enlightening me! I thought that the DateTimeContinuous-axis was the bridge between ScatterPoint-series and DateTime categorical axis.

I'll go for your example or use a regular LinearAxis fed with the year value as an int from my bound entities.

Kind regards,
Clas Ericson
0
Clas Ericson
Top achievements
Rank 2
answered on 11 May 2012, 08:59 AM
Hello again,
I just wanted to notice you that on http://www.telerik.com/help/silverlight/radchartview-axes-plotmode.html it says that PlotMode is used on Categorical and DateTime axes to improve the look and feel of the series presented. It also says that the mode OnTicksPadded is recommended to use with Scatter series.

To me it seems like the documentation needs to be corrected or made a bit clearer since ScatterPointSeries is not working with DateTimeContinuousAxis.

Kind regards,
Clas Ericson
0
Evgenia
Telerik team
answered on 16 May 2012, 08:35 AM
Hi Clas,

 I should agree with you that there is lack of information on the series types which support DateTimeContinuousAxis. I forwarded your feedback to our technical writers and they will update the documentation so that there is no more ambiguity on this.

Greetings,
Evgenia
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Gregor
Top achievements
Rank 1
answered on 12 May 2014, 10:29 PM
Hi there,
is this still not supported? I am trying to chart time series data for physical readings (e.g. temperature) in a RadCartesianChart. How can i use DateTime values for my x-axis?
cheers, and kind regards,
Gregor
0
Evgenia
Telerik team
answered on 15 May 2014, 07:48 AM
Hello Clas,

Currently we support Point Series (supports both CategoricalAxis and DateTimeContinuous Axis as Horizontal Axis) and ScatterPoint Series (this one requries RadCartesianChart to define two LinearAxis). You might find them demonstrated in our online demos with full source code provided (here and here).
Feel free to use whatever suits your scenario.

Regards,
Evgenia
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
ChartView
Asked by
Clas Ericson
Top achievements
Rank 2
Answers by
Yavor
Telerik team
Clas Ericson
Top achievements
Rank 2
Evgenia
Telerik team
Gregor
Top achievements
Rank 1
Share this question
or