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

Unable to use DateTimeCategoricalAxes in Horizontal axes

1 Answer 14 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Misha
Top achievements
Rank 1
Misha asked on 13 Jan 2014, 11:27 AM
<UserControl x:Class="Telerik.Examples.WP.Chart.Series.BarVertical"
    xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
    xmlns:telerikCharting="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
    xmlns:local="clr-namespace:Telerik.Examples.WP.Chart.Series"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">
 
    <Grid x:Name="LayoutRoot">
        <telerikChart:RadCartesianChart Margin="12,0,0,0" x:Name="radChart1" Background="White">
            <telerikChart:RadCartesianChart.Grid>
                <telerikChart:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="Y">
                    <telerikChart:CartesianChartGrid.YStripeBrushes>
                        <SolidColorBrush Color="#33666666"/>
                        <SolidColorBrush Color="Transparent"/>
                    </telerikChart:CartesianChartGrid.YStripeBrushes>
                </telerikChart:CartesianChartGrid>
                 
            </telerikChart:RadCartesianChart.Grid>
             
 
            <telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:DateTimeCategoricalAxis LineStroke="Black" ElementBrush="Black">
                </telerikChart:DateTimeCategoricalAxis>
            </telerikChart:RadCartesianChart.HorizontalAxis>
            <telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:LinearAxis Minimum="0"
                                         Maximum="100"
                                         MajorStep="10"
                                         LineStroke="Black"
                                         ElementBrush="Black"
                                         />
            </telerikChart:RadCartesianChart.VerticalAxis>
 
            <telerikChart:BarSeries Background ="White">
                <telerikChart:BarSeries.PointTemplate>
                <DataTemplate>
                    <Rectangle Fill="Blue"/>
                </DataTemplate>
                </telerikChart:BarSeries.PointTemplate>
            </telerikChart:BarSeries>
            <telerikChart:LineSeries StrokeThickness="5" Stroke="Green"/>
        </telerikChart:RadCartesianChart>
    </Grid>
</UserControl>
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 Telerik.Charting;
//using Telerik.Charting;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Chart;
 
namespace Telerik.Examples.WP.Chart.Series
{
    public partial class BarVertical : UserControl
    {
        public BarVertical()
        {
            InitializeComponent();
    
            this.radChart1.Series[0].ItemsSource = new double[] { 40, 45, 30, 50, 52, 60 };
            this.radChart1.Series[1].ItemsSource = new double[] { 90, 60, 30, 70, 80, 85 };
 
             
 
            DateTimeCategoricalAxis categoricalAxis = new DateTimeCategoricalAxis();
            categoricalAxis.DateTimeComponent = DateTimeComponent.Day;
            categoricalAxis.PlotMode = AxisPlotMode.BetweenTicks;
            categoricalAxis.LabelFormat = "{0:m}";
            
 
            //First assign the axis to the VerticalAxis property and then add the series to the chart
            this.radChart1.Series[0].HorizontalAxis = categoricalAxis;
            
 
             
        }
    }
}
Horizontal axes are still showing 1,2,3 and not the Actual date/time. Please let me know what else I need to add.

1 Answer, 1 is accepted

Sort by
0
Rosy Topchiyska
Telerik team
answered on 14 Jan 2014, 11:03 AM
Hello Misha,

Thank you for contacting us.

  First you will need to set the ItemsSource of the series to a collection of items that have a property of type DateTime.
 Then you have to set the CĐ°tegoryBinding of the series to the DateTime property. If the CategoryBinding is not set, the chart automatically sets the categories of the data points to 1, 2, 3...
 I have attached a sample project to demonstrate how you can setup the chart in order to display the categories properly.

I hope this was useful. Please, do not hesitate to contact us if you have further questions.

Regards,
Rositsa Topchiyska
Telerik
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Tags
Chart
Asked by
Misha
Top achievements
Rank 1
Answers by
Rosy Topchiyska
Telerik team
Share this question
or