This question is locked. New answers and comments are not allowed.
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.
3. XAML Code
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.
3. XAML Code
<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:LineSeries x:Name="SecondLineSeries" ItemsSource="{Binding Components}" ShowLabels="True" ClipToPlotArea="False" CombineMode="Cluster" Stroke="DarkBlue" StrokeThickness="3" >
<telerik:LineSeries.PointTemplate>
<DataTemplate>
<Rectangle Width="4" Height="11" Fill="DarkBlue" />
</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.SecondaryValue}" 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="SecondaryValue" />
</telerik:LineSeries.ValueBinding>
</telerik:LineSeries>
</telerik:RadCartesianChart>
I have tried almost all the approaches, but didn't worked. I need to do this desparately and as early as possible.
Please provide support.
I have tried almost all the approaches, but didn't worked. I need to do this desparately and as early as possible.
Please provide support.
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.
3. XAML Code
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.
3. XAML Code
<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:LineSeries x:Name="SecondLineSeries" ItemsSource="{Binding Components}" ShowLabels="True" ClipToPlotArea="False" CombineMode="Cluster" Stroke="DarkBlue" StrokeThickness="3" >
<telerik:LineSeries.PointTemplate>
<DataTemplate>
<Rectangle Width="4" Height="11" Fill="DarkBlue" />
</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.SecondaryValue}" 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="SecondaryValue" />
</telerik:LineSeries.ValueBinding>
</telerik:LineSeries>
</telerik:RadCartesianChart>
I have tried almost all the approaches, but didn't worked. I need to do this desparately and as early as possible.
Please provide support.
I have tried almost all the approaches, but didn't worked. I need to do this desparately and as early as possible.
Please provide support.
6 Answers, 1 is accepted
0
Hi Kumar,
I am a bit puzzled by the result you have shown. In order to get a 4-hour step between ticks, you need to configure the DateTimeContinuousAxis like this:
Notice that the value of MajorStep property is 4. In your code it is 1 and the expected result would be to get a label for ever hour, but not a label on every quarter of an hour. I have attached a small example, which works as expected.
Best regards,
Ves
Telerik
I am a bit puzzled by the result you have shown. In order to get a 4-hour step between ticks, you need to configure the DateTimeContinuousAxis like this:
<telerik:DateTimeContinuousAxis ShowLabels="True" MajorStepUnit="Hour" MajorStep="4" LabelFormat="{}{0,0:HH:mm}">Notice that the value of MajorStep property is 4. In your code it is 1 and the expected result would be to get a label for ever hour, but not a label on every quarter of an hour. I have attached a small example, which works as expected.
Best regards,
Ves
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
Kumar
Top achievements
Rank 1
Rank 1
answered on 11 Nov 2014, 02:47 PM
Hi Ves,
Thanks for the response.
I knew that we can MajorStep as 4, and MajorStepUnit as Hour. It didn't worked as expected.
The DataContext has the values which is falling in between the time range.
Please check the example I've mentioned.
At any point of time, the chart will have 84 intervals as we want to show 2 weeks of data.
Problem 1: Unable to set the Uniform space between each tick in X-Axis. If Zoom is given, then the lineseries is getting blurred.
Problem 2: As the value of Y-Axis is not falling under the X-axis, the data point is not getting plotted, also the lines are disconnected.
Please check the result attached in the original post.
Thanks for the response.
I knew that we can MajorStep as 4, and MajorStepUnit as Hour. It didn't worked as expected.
The DataContext has the values which is falling in between the time range.
Please check the example I've mentioned.
At any point of time, the chart will have 84 intervals as we want to show 2 weeks of data.
Problem 1: Unable to set the Uniform space between each tick in X-Axis. If Zoom is given, then the lineseries is getting blurred.
Problem 2: As the value of Y-Axis is not falling under the X-axis, the data point is not getting plotted, also the lines are disconnected.
Please check the result attached in the original post.
0
Kumar
Top achievements
Rank 1
Rank 1
answered on 11 Nov 2014, 03:15 PM
Hi Ves,
I've got the sample you've created. I've modified to my requirement., Unable to attach zip to this post, so pasting below.
See the issue.
Issue: It is plotting all the dates with overlapped on one another, as changed the width & height of the RadChart.
Am trying to achieve, to show only 4 ticks at any point of time, and scroll enabled without Zoom.
<telerik:RadCartesianChart x:Name="VitalCartesianChart" Margin="35,10,35,10" Width="500" Height="500" >
<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" >
<telerik:LinearAxis.LabelStyle>
<Style TargetType="TextBlock">
<Setter Property="LineHeight" Value="11" />
<Setter Property="Foreground" Value="White" />
<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" MaximumTicks="4" PlotStretch="Uniform" TickThickness="1" PlotMode="OnTicks" HorizontalLocation="Right" ShowLabels="True" LabelInterval="1" LabelOffset="1" MajorStepUnit="Hour" MajorStep="4" 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="White" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="SemiLight" />
</Style>
</telerik:DateTimeContinuousAxis.LabelStyle>
<telerik:DateTimeContinuousAxis.MajorTickTemplate>
<DataTemplate>
<Rectangle Stroke="Gray" 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="Red" StrokeThickness="4" >
<telerik:LineSeries.PointTemplate>
<DataTemplate>
<Rectangle Width="4" Height="11" Fill="Red" />
</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="White"
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>
I've got the sample you've created. I've modified to my requirement., Unable to attach zip to this post, so pasting below.
See the issue.
Issue: It is plotting all the dates with overlapped on one another, as changed the width & height of the RadChart.
Am trying to achieve, to show only 4 ticks at any point of time, and scroll enabled without Zoom.
<telerik:RadCartesianChart x:Name="VitalCartesianChart" Margin="35,10,35,10" Width="500" Height="500" >
<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" >
<telerik:LinearAxis.LabelStyle>
<Style TargetType="TextBlock">
<Setter Property="LineHeight" Value="11" />
<Setter Property="Foreground" Value="White" />
<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" MaximumTicks="4" PlotStretch="Uniform" TickThickness="1" PlotMode="OnTicks" HorizontalLocation="Right" ShowLabels="True" LabelInterval="1" LabelOffset="1" MajorStepUnit="Hour" MajorStep="4" 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="White" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="SemiLight" />
</Style>
</telerik:DateTimeContinuousAxis.LabelStyle>
<telerik:DateTimeContinuousAxis.MajorTickTemplate>
<DataTemplate>
<Rectangle Stroke="Gray" 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="Red" StrokeThickness="4" >
<telerik:LineSeries.PointTemplate>
<DataTemplate>
<Rectangle Width="4" Height="11" Fill="Red" />
</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="White"
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>
0
Hi Kumar,
I can see you have set a width of 500 pixels. Having 84 intervals in 500 pixels leaves a space of around 6 pixels per label. It is impossible to fit so many labels in that space. A possible approach here would be to choose another value for step (MajorStep and MajorStepUnit) or different LabelFitMode.
Best regards,
Ves
Telerik
I can see you have set a width of 500 pixels. Having 84 intervals in 500 pixels leaves a space of around 6 pixels per label. It is impossible to fit so many labels in that space. A possible approach here would be to choose another value for step (MajorStep and MajorStepUnit) or different LabelFitMode.
Best regards,
Ves
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
Kumar
Top achievements
Rank 1
Rank 1
answered on 14 Nov 2014, 10:37 AM
You are right Ves. But as per the requirement, the width is 500 only on the screen.
Can't the user swipe/scroll the list of points, if each point/axis is separated with some length.
So, What's the property to separate the Axis with specific length. I've tried using GapLength, but it didn't worked.
Kindly suggest
Can't the user swipe/scroll the list of points, if each point/axis is separated with some length.
So, What's the property to separate the Axis with specific length. I've tried using GapLength, but it didn't worked.
Kindly suggest
0
Hi Kumar,
I am not sure I understand your question. The axis ticks should be in sync with the graph in the plot area, so scrolling the axis just by itself is not possible. You can take advantage of the Pan and Zoom Behavior, but still, when chart is zoomed out you will not be able to display all the labels with 4 hours step.
Best regards,
Ves
Telerik
I am not sure I understand your question. The axis ticks should be in sync with the graph in the plot area, so scrolling the axis just by itself is not possible. You can take advantage of the Pan and Zoom Behavior, but still, when chart is zoomed out you will not be able to display all the labels with 4 hours step.
Best regards,
Ves
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.