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

Unable to use DateTimeCategoricalAxes in Horizontal axes

1 Answer 79 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