RadCartesianChart X Axis Labels

[Mike]

I need to customize the labels on the X axis of a cartesian chart.  The date/times are not uniform across the X axis (see attached screen shot) but we'd like to see the labels/tics at regular intervals. 

For example, the attached chart starts a 5/19/2013 7:00:21 and we'd like to have a tick and label show as 5/19/2013 (midnight) even though there is not a data point at that time.  Then we'd like to have a label and tickmark at midnight each following day. So in this case, we'd like to see 5/19/2013, 5/20/2013, and 5/21/2013.

Any ideas would be helpful (I've very new to using the Telerik WFP controls).

<Window xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  x:Class="LatLon.Views.ChartWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Chart" Height="600" Width="600">
    <Grid>
        <telerik:RadCartesianChart Name="myChart" >
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="Y">
                </telerik:CartesianChartGrid>
            </telerik:RadCartesianChart.Grid>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeCategoricalAxis />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:SplineSeries  CategoryBinding="XValue" ValueBinding="YValue" >
            </telerik:SplineSeries>
        </telerik:RadCartesianChart>
    </Grid>
</Window>

public partial class ChartWindow : Window
   {
       public DataTable chartDataTable;
       public string yAxisLabel = string.Empty;
       public string xAxisLabel = string.Empty;
       public int xAxisColumn;
       public int yAxisColumn;

       public ChartWindow()
       {
           InitializeComponent();
       }

       public void Render()
       {
           List<ChartData> ChartDatas = new List<ChartData>();

           foreach (DataRow dr in chartDataTable.Rows)
           {
               ChartData cdc = new ChartData();
               cdc.XValue = (DateTime)dr[xAxisColumn];
               cdc.YValue = Convert.ToDouble(dr[yAxisColumn].ToString());
               ChartDatas.Add(cdc);
           }

           myChart.HorizontalAxis.LabelInterval = (int)(chartDataTable.Rows.Count / 10);
           myChart.Series[0].ItemsSource = ChartDatas;

           myChart.HorizontalAxis.Title = xAxisLabel;
           myChart.VerticalAxis.Title = yAxisLabel;

           myChart.HorizontalAxis.LabelFitMode = Telerik.Charting.AxisLabelFitMode.Rotate;
           myChart.HorizontalAxis.LabelRotationAngle = 45;
       }
   }

   public class ChartData
   {
       public DateTime XValue { get; set; }
       public double YValue { get; set; }
   }

[Petar Kirov]

Hi Mike,

You can achieve this by using DateTimeContinuousAxis, instead of DateTimeCategoricalAxis. The DateTimeContinuousAxis behaves like a linear axis - it places ticks (and labels respectively) at fixed interval. By default the axis automatically calculates this interval, but often in scenarios such as yours it is useful to define the interval yourself. This is done through the MajorStep and the MajorStepUnit (of type TimeInterval) properties. Here's an example: 

<telerik:RadCartesianChart.HorizontalAxis>
    <telerik:DateTimeContinuousAxis MajorStepUnit="Day"
                          MajorStep="1"/>
</telerik:RadCartesianChart.HorizontalAxis>

I hope this helps.
 
Regards,
Petar Kirov
Telerik

[Dev]

Hi,
Thanks for your post.

I have some similar kind of requirement.

I want to show label on X-axis in 24 hour format like 09/04/2014 00:00:00, 09/04/2014 00:30:00 ,09/04/2014 01:00:00 ...... , 09/04/2014 23:30:00  which is working fine for normal days but on long day  ( in UK) when clock moved one hour back  on last Sunday of October.,
It should show X-axis label like 26/10/2014 00:00:00,  26/10/2014 00:30:00,  26/10/2014 01:00:00,  26/10/2014 01:30:00,  26/10/2014 01:00:00, 26/10/2014 01:30:00, 26/10/2014 02:00:00 , 26/10/2014 02:30:00.............., 26/10/2014 23:30:00.                                             
Note: Period 01:00 and 01:30 should repeat on long day but it is showing only once. Please suggest how could I achieve this? I have tried it with DateTimeContinuousAxis and DateTimeCategoricalAxis.

Thanks.

[Petar Marchev]

Hello Dev,

The .Net framework does not have a built-in day light savings support. Internally the chart handles the given DateTime elements. The chart will plot the given DateTime. When you give it a DateTime object representing the 29th March 2014 01:30 the chart does not know whether this is old time or new time.

If you think that you are able to make such a distinction in your application by a given date, we may be able to work around this by using a categorical axis (not a continuous one) and some axis label template. Do let us know if this is the case so that we can help.

Regards,
Petar Marchev
Telerik

 

 

[Dev]

Hi Petar,

Thanks for the response.

Please find below sample code to give an idea of my requirement and the approach I am using currently.

public ObservableCollection<TaChartData> SeriesCollection
        {
            get { return _series; }
            set
            {
                if (_series != value)
                {

                    _series = value;

                    RaisePropertyChanged(()=> SeriesCollection);

                }


            }

        }

 
 

  public class TaChartData
        {
            public string Name { get; set; }
            public ObservableCollection<Series> SeriesCollection { get; set; }
        }

 

 

        public class Series
        {

            public DateTime DateTime { get; set; }
            public double Value { get; set; }
        }


//You could use code something like below dummy collection to bind chartSeriesProvider

for(int i=0;1<4;i++)
  {   
                SeriesCollection.Add(  new TaChartData()
                {

                    Name ="Series" +i.ToString(),
                    SeriesCollection = new ObservableCollection<Series>
                    {
                     new Series()
                     {
                        DateTime = new DateTime(2014,10,26,00,00,00),
                        Value= i*50.0
                     },

                    new Series()
                    {
                      DateTime = new DateTime(2014,10,26,00,30,00),
                       Value= i*50.0

                    },

                    new Series()
                    {
                      DateTime = new DateTime(2014,10,26,01,00,00),
                     Value= i*50.0
                    },

                    new Series()
                    {
                      DateTime = new DateTime(2014,10,26,01,30,00),
                     Value= i*50.0
                    },

                    new Series()
                    {
                     DateTime = new DateTime(2014,10,26,01,00,00),         //Repeating  Value
                      Value= i*50.0
                    },

                    new Series()
                    {
                      DateTime = new DateTime(2014,10,26,01,30,00),         //Repeating value
                     Value= i*50.0
                    }
                     }
                    }

 
//-----------Cartesian Chart Xaml----  
   
   

<xt:RadCartesianChart Palette="Metro" Grid.Column="0" Height="300" ClipToBounds="True" HorizontalAlignment="Stretch"
TooltipTemplate="{StaticResource ToolTipTemplate}" Width="Auto" >

<xt:RadCartesianChart.Behaviors>
<xt:ChartTrackBallBehavior ShowIntersectionPoints="True" SnapMode="ClosestPoint" ShowTrackInfo="True" />
<xt:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both" />
</xt:RadCartesianChart.Behaviors>
<xt:RadCartesianChart.TrackBallInfoStyle>
<Style TargetType="xt:TrackBallInfoControl">
<Setter Property="Background" Value="Transparent" />

</Style>
</xt:RadCartesianChart.TrackBallInfoStyle>

<xt:RadCartesianChart.SeriesProvider>
<xt:ChartSeriesProvider Source ="{Binding SeriesCollection}" >
<xt:ChartSeriesProvider.SeriesDescriptors>
<xt:CategoricalSeriesDescriptor ItemsSourcePath="SeriesCollection" ValuePath="Value" CategoryPath="DateTime" >
<xt:CategoricalSeriesDescriptor.Style>
<Style TargetType="xt:AreaSeries" >
<Setter Property="CombineMode" Value="None" />
<Setter Property="TrackBallInfoTemplate">
<Setter.Value>
<DataTemplate>
<Grid Background="{StaticResource WhiteHalfOpacityBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TextBlock Margin="6,0,6,3" Text="Time:" FontWeight="Bold"  />
<TextBlock Margin="0,0,0,3" Text="{Binding Path=DataPoint.Category, StringFormat='{}{0:HH:mm}'}"  />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<TextBlock Margin="5,0,5,3" Text="Volume:" FontWeight="Bold"  />
<TextBlock Margin="0,0,0,3" Text="{Binding Path=DataPoint.Value}"  />
</StackPanel>

</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</xt:CategoricalSeriesDescriptor.Style>
</xt:CategoricalSeriesDescriptor>
</xt:ChartSeriesProvider.SeriesDescriptors>
</xt:ChartSeriesProvider>
</xt:RadCartesianChart.SeriesProvider>

<xt:RadCartesianChart.HorizontalAxis>

<xt:CategoricalAxis x:Name="HorizontalAxis" HorizontalAlignment="Stretch"
MajorTickInterval="1"
Title="Period"
MajorTickStyle="{StaticResource TickStyle}"
LabelTemplate="{StaticResource AxisLabelDataTemplate}"
LabelFitMode="MultiLine"
FontFamily="Segoe UI"
LineThickness="2"
LineStroke="Gray"
LabelOffset="0">

</xt:CategoricalAxis>
</xt:RadCartesianChart.HorizontalAxis>

<xt:RadCartesianChart.VerticalAxis>
<xt:LinearAxis x:Name="VerticalAxis"
Minimum="0"
Maximum="{Binding YMax}"
MajorStep="{Binding MajorStep}"
LabelOffset="0"
MajorTickStyle="{StaticResource TickStyle}"
LabelStyle="{StaticResource AxisLabelStyle}"
LineThickness="2"
LineStroke="Gray"
FontFamily="Segoe UI">
<xt:LinearAxis.MajorTickTemplate>
<DataTemplate>
<Rectangle Fill="Gray" Width="3" Height="1" Margin="2,0,0,0"/>
</DataTemplate>
</xt:LinearAxis.MajorTickTemplate>
</xt:LinearAxis>
</xt:RadCartesianChart.VerticalAxis>
</xt:RadCartesianChart>



Attached is the screenshot of chart generated using this approach.

Though we have added duplicate DateTime value to our collection above but X-Axis show it only once.
Please help how could I have duplicate DateTime value on X-Axis.
 
 Thanks.
Dev

[Petar Marchev]

Hi Dev,

What I was trying to say in my previous post was that if you know a nice way to distinguish new DateTime(2014,10,26,01,00,00) from new DateTime(2014,10,26,01,00,00) we could suggest a nice work-around. However, I do not think that you are able to find any difference between the two. The chart is also not able to do this. You are using a DateTimeContinuousAxis, which basically tells the chart to treat date-time data in a date-time manner. This in turn will position the DateTime(2014,10,26,01,00,00) exactly where it should be. 

A work-around I can suggest, if this is a must in your application is for you to use a CategoricalAxis. You need to create a new property which should contain a unique value describing the business item. You can use the DateTime value and append a symbol and an index ("2014/10/26 01:00 x2", where 2 is the idex of the item in the collection). So the one of the items will look like this "2014/10/26 01:00 x2" and the other will look like this "2014/10/26 01:00 x4". Now, you need to use a LabelTemplate (and a custom converter) for the categorical axis in which you can remove the "x2" appendix, so the axis will show only the date. I hope this helps.

Regards,
Petar Marchev
Telerik