DateTimeContinuousAxis refuses to cooperate, data is not displayed

7 posts, 1 answers
  1. Clas Ericson
    Clas Ericson avatar
    31 posts
    Member since:
    Sep 2011

    Posted 04 May 2012 Link to this post

    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");
            }
        }
    }

  2. Answer
    Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 09 May 2012 Link to this post

    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 >>

  3. DevCraft banner
  4. Clas Ericson
    Clas Ericson avatar
    31 posts
    Member since:
    Sep 2011

    Posted 10 May 2012 Link to this post

    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
  5. Clas Ericson
    Clas Ericson avatar
    31 posts
    Member since:
    Sep 2011

    Posted 11 May 2012 Link to this post

    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
  6. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 16 May 2012 Link to this post

    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 >>
  7. Gregor
    Gregor avatar
    2 posts
    Member since:
    Dec 2012

    Posted 12 May 2014 Link to this post

    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
  8. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 15 May 2014 Link to this post

    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.
     
Back to Top
DevCraft banner