Problem with X axis Ticks

[Eitan]

<phone:PhoneApplicationPage x:Class="RadControlsWindowsPhoneApp1.Page1"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
                            xmlns:chartEngine="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            d:DesignHeight="768"
                            d:DesignWidth="480"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            Orientation="Portrait"
                            shell:SystemTray.IsVisible="True"
                            SupportedOrientations="Portrait"
                            mc:Ignorable="d">

    <!--  LayoutRoot is the root grid where all page content is placed  -->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  TitlePanel contains the name of the application and page title  -->
        <StackPanel x:Name="TitlePanel"
                    Grid.Row="0"
                    Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle"
                       Style="{StaticResource PhoneTextNormalStyle}"
                       Text="MY APPLICATION" />
            <TextBlock x:Name="PageTitle"
                       Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}"
                       Text="page name" />
        </StackPanel>

        <!--  ContentPanel - place additional content here  -->
        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">

            <chart:RadCartesianChart x:Name="chart">

                <chart:RadCartesianChart.HorizontalAxis>

                    <chart:DateTimeCategoricalAxis DateTimeComponent="Date"
                                                   LabelFormat="MM-yy"
                                                   PlotMode="OnTicks"/>

                </chart:RadCartesianChart.HorizontalAxis>

                <chart:RadCartesianChart.VerticalAxis>
                    <chart:LinearAxis Maximum="200" />
                </chart:RadCartesianChart.VerticalAxis>

                <chart:RadCartesianChart.Series>

                    <chart:LineSeries Loaded="LineSeries_Loaded"
                                      Stroke="Orange"
                                      StrokeThickness="2" />

                    <chart:LineSeries Loaded="LineSeries_Loaded"
                                      Stroke="Blue"
                                      StrokeThickness="2" />

                    <chart:LineSeries Loaded="LineSeries_Loaded"
                                      Stroke="Red"
                                      StrokeThickness="2" />

                    <chart:LineSeries Loaded="LineSeries_Loaded"
                                      Stroke="DarkGreen"
                                      StrokeThickness="2" />

                </chart:RadCartesianChart.Series>

            </chart:RadCartesianChart>
        </Grid>
    </Grid>

    <!--  Sample code showing usage of ApplicationBar  -->
    <!--
        <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
        <shell:ApplicationBar.MenuItems>
        <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
        <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
        </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
        </phone:PhoneApplicationPage.ApplicationBar>
    -->

</phone:PhoneApplicationPage>






--------------------------------------------------------------------------------------------------------------------------------



using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Telerik.Windows.Controls;

namespace RadControlsWindowsPhoneApp1
    {
    public partial class Page1 : PhoneApplicationPage
        {
        public Page1()
            {
            InitializeComponent();
            }

        private void LineSeries_Loaded( object sender, RoutedEventArgs e )
            {
            DateTime lastDate = DateTime.Now;
            double lastVal = 20;

            int noPoints = ( 24 / 6 ) * 365;        // I know that 24 / 6 is 4       :)

            List<ChartDataObject> dataSource0 = new List<ChartDataObject>();
            List<ChartDataObject> dataSource1 = new List<ChartDataObject>();

            for ( int i = 0 ; i < noPoints ; ++i )
                {
                ChartDataObject obj0 = new ChartDataObject
                {
                    Date  = lastDate.AddHours( 6 ),
                    Value = lastVal + 0.1
                };

                ChartDataObject obj1 = new ChartDataObject
                {
                    Date  = obj0.Date,
                    Value = obj0.Value + 50
                };

                dataSource0.Add( obj0 );
                dataSource1.Add( obj1 );

                lastDate = obj0.Date;
                lastVal = obj0.Value;
                }

            chart.HorizontalAxis.LabelInterval = ( ( ( noPoints / 4 ) / 8 ) / 30 ) * 30;
            chart.HorizontalAxis.LabelFitMode = Telerik.Charting.AxisLabelFitMode.Rotate;
            chart.HorizontalAxis.LabelRotationAngle = 270;

            LineSeries series0 = (LineSeries)this.chart.Series[0];
            LineSeries series1 = (LineSeries)this.chart.Series[1];

            series0.CategoryBinding = new PropertyNameDataPointBinding()
                {
                    PropertyName = "Date"
                };
            series0.ValueBinding = new PropertyNameDataPointBinding()
                {
                    PropertyName = "Value"
                };

            series1.CategoryBinding = new PropertyNameDataPointBinding()
            {
                PropertyName = "Date"
            };
            series1.ValueBinding = new PropertyNameDataPointBinding()
            {
                PropertyName = "Value"
            };

            series0.ItemsSource = dataSource0;
            series1.ItemsSource = dataSource1;
            }
        }

    public class ChartDataObject
        {
        public DateTime Date
            {
            get;
            set;
            }
        public double Value
            {
            get;
            set;
            }
        }
    }

Hi,

I created a test application that is attached. I have large test data (one sample every 6 hours) for one year.

1. The graph is drawn OK but the X axis show too many ticks that I would like to reduce so they can mean something?!

2. Not sure I understand what is the difference between the DateTimeCategoricalAxis and the DateTimeContinuousAxis in a  RadCartesianChart chart? Can you lead me to documentation describing the difference?

3. Can a DateTime chart slide to the left like your Stocks example?

4. The labels of the X Axis are a bit cut on the buttom. How can I fix that?

Thanks,
Eitan Barazani

[Victor]

Hello Eitan,

Thanks for the questions.
Here are the answers in the same order:

1. In order to reduce the ticks you have to bind your chart to less points or by manipulating the MajorTickStep property.

2. You can read about DateTimeCategoricalAxis and DateTimeCategoricalAxis here.

3. Every time of chart can be panned like the stocks example, all you need to do is to use the PanAndZoomBehavior.

4. To remedy the slight clipping of the labels you can simply set a bottom margin of the label template. For example:

<chart:DateTimeCategoricalAxis.LabelTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding}"
                   Margin="0, 0, 0, 5"/>
    </DataTemplate>
</chart:DateTimeCategoricalAxis.LabelTemplate>

Also please be sure to check out our online help related to the chart and the code of the Examples application. The code is available in the Examples solution that is bundled inside the RadControls for Windows Phone installation.

Please write again if you have other questions.

Regards,
Victor
the Telerik team