[Solved] Uniform X-Axis on DateTimeContinuousAxis with MajorStep=1 and MajorStepUnit=Hour

[Kumar]

Hi,

Am trying to achieve a chart for Windows 8 XAML Metro App which displays
The chart should have both
a) X-Axis with Time values
b) Line series plotting the tick matching to the x-axis time.

- Show Time in the X-Axis, with equal length between the ticks
- the time difference between the x-axis tick should be  4 hours from the current time, and till the specified date.
- On Scroll, the Date of the visible points(first or default) has to be shown on the bottom of the Chart (in a separate textblock)

The data source is a collection of value and Dates.
Sample data:
Date: 01/01/2014 06:10 AM   Value: 34.4
Date: 01/01/2014 06:23 AM   Value: 50.0
Date: 01/06/2014 08:00 AM   Value: 80.0


The approach I've followed is not working as expected.
Expected:
1. The X-Axis should show exactly 4 hours difference of time. But the DateTimeContinuousAxis,with MajorStep=1, and MajorStepUnit=Hour is not plotting accordingly. It is plotting for every 15 minutes.
2. The Data is huge. because of which the x-axis values are overlapping and merged on top of one another., which shouldn't be.

Attachments:
1. Expected - Sample chart expected.
2. Result - The result we are getting so far.


<telerik:RadCartesianChart x:Name="VitalCartesianChart" Margin="35,10,35,10"
                                   ScrollOffset="{Binding ElementName=VitalChartUserControl,  Path=ScrollOffSet, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid Style="{StaticResource VitalDetailsChartGridStyle}" />
            </telerik:RadCartesianChart.Grid>
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartPanAndZoomBehavior ZoomMode="None" HandleDoubleTap="False" />
            </telerik:RadCartesianChart.Behaviors>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis x:Name="VitalLinearAxis" TickThickness="0" LabelOffset="1" HorizontalLocation="Left" ShowLabels="True" LabelInterval="1" LabelFitMode="None" Minimum="{Binding ElementName=VitalChartUserControl, Path=MinimumVerticalAxisValue}"
                                  Maximum="{Binding ElementName=VitalChartUserControl, Path=MaximumVerticalAxisValue}">
                    <telerik:LinearAxis.LabelStyle>
                        <Style TargetType="TextBlock">
                            <Setter Property="LineHeight" Value="11" />
                            <Setter Property="Foreground" Value="Black" />
                            <Setter Property="FontSize" Value="14" />
                            <Setter Property="FontWeight" Value="SemiLight" />
                        </Style>
                    </telerik:LinearAxis.LabelStyle>
                    <telerik:LinearAxis.LineStyle>
                        <Style TargetType="Line">
                            <Setter Property="Stroke" Value="Transparent" />
                        </Style>
                    </telerik:LinearAxis.LineStyle>
                </telerik:LinearAxis>
            </telerik:RadCartesianChart.VerticalAxis>            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis x:Name="DateTimeContinuousAxis" PlotStretch="Uniform" TickThickness="1" PlotMode="OnTicks" HorizontalLocation="Right" ShowLabels="True" LabelInterval="1" LabelOffset="1"  MajorStepUnit="Hour" MajorStep="1" LabelFitMode="None" LabelFormat="{}{0,0:HH:mm}">
                    <telerik:DateTimeContinuousAxis.LabelStyle>
                        <Style TargetType="TextBlock">
                            <Setter Property="Margin" Value="0,10,0,0" />
                            <Setter Property="VerticalAlignment" Value="Top" />
                            <Setter Property="HorizontalAlignment" Value="Center" />
                            <Setter Property="Foreground" Value="Black" />
                            <Setter Property="FontSize" Value="14" />
                            <Setter Property="FontWeight" Value="SemiLight" />
                        </Style>
                    </telerik:DateTimeContinuousAxis.LabelStyle>
                    <telerik:DateTimeContinuousAxis.MajorTickTemplate>
                        <DataTemplate>
                            <Rectangle Stroke="{StaticResource LightGrayBorderBrushColor}" Margin="0,-5,0,0" StrokeThickness="0.5" />
                        </DataTemplate>
                    </telerik:DateTimeContinuousAxis.MajorTickTemplate>
                </telerik:DateTimeContinuousAxis>
            </telerik:RadCartesianChart.HorizontalAxis>            <telerik:LineSeries ItemsSource="{Binding Components}" ShowLabels="True" ClipToPlotArea="False" CombineMode="Cluster" Stroke="{Binding ElementName=VitalChartUserControl,  Path=LineSeriesStrokeValue}" StrokeThickness="4" >
                <telerik:LineSeries.PointTemplate>
                    <DataTemplate>
                        <Rectangle Width="4" Height="11" Fill="{Binding ElementName=VitalChartUserControl,  Path=LineSeriesStrokeValue}" />
                    </DataTemplate>
                </telerik:LineSeries.PointTemplate>                <telerik:LineSeries.LabelDefinitions>
                    <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Bottom"  >
                        <telerik:ChartSeriesLabelDefinition.Template>
                            <DataTemplate>
                                <TextBlock MinWidth="100" Margin="10,0,0,0" TextAlignment="Center" Text="{Binding DataItem.Value}" Foreground="Black"
                                                           FontSize="11"
                                                           FontWeight="Normal" />
                            </DataTemplate>
                        </telerik:ChartSeriesLabelDefinition.Template>
                    </telerik:ChartSeriesLabelDefinition>
                </telerik:LineSeries.LabelDefinitions>                <telerik:LineSeries.CategoryBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="ChartedDate" />
                </telerik:LineSeries.CategoryBinding>
                <telerik:LineSeries.ValueBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Value" />
                </telerik:LineSeries.ValueBinding>
            </telerik:LineSeries>           
        </telerik:RadCartesianChart>

[Ves]

Hi,

Please, see my reply in the other thread you have started.


Regards,
Ves
Telerik