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

RadCartesianChart X Axis Labels

5 Answers 484 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 20 May 2013, 05:18 PM
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"
        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; }
   }

5 Answers, 1 is accepted

Sort by
0
Petar Kirov
Telerik team
answered on 23 May 2013, 11:27 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Dev
Top achievements
Rank 1
answered on 09 Apr 2014, 09:55 AM
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.




0
Petar Marchev
Telerik team
answered on 10 Apr 2014, 07:12 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Dev
Top achievements
Rank 1
answered on 11 Apr 2014, 08:30 AM
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







0
Petar Marchev
Telerik team
answered on 14 Apr 2014, 08:39 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart
Asked by
Mike
Top achievements
Rank 1
Answers by
Petar Kirov
Telerik team
Dev
Top achievements
Rank 1
Petar Marchev
Telerik team
Share this question
or