we evaluate to replace the current 2D chart library in our application with Telerik's and have the following requirements:
Supported Chart Types:
- Line-Chart
- Spline-Chart
- Bar-Chart
- Point-Chart
- Step-Chart
Legend Support
Cross hair cursor support
Data Point cursor support
Multiple Y-Axis which:
- should be moveable ( left <-> right )
- should have configureable minimum and maximum
- should support multiline configureable title
- should support scientific tick labels
- should support configureable major and minor grid lines
Multiple Data-Series which:
- should support configureable series color
- should support configureable series point marker (should be visible in Plot and Legend)
- should support configureable series stroke type and thickness
Does RadChart and/or RadChartView meet this requirements and which of the control(s) do you recommend?
best regards,
Stefan
11 Answers, 1 is accepted
You can achieve the requirements listed in your last reply with RadChartView. Check the following resources.
- The LineSeries, SplineSeries, BarSeries, PointSeries and StepLineSeries help articles. You can see also the Chart Series Overview article.
- The RadLegend Support help article.
- The Crosshair article.
- The Multiple Axes help article.
- Axis and all the other articles from the Axis section in the documentation.
- The Customizing Cartesian Chart Series article.
I am not sure what is Data Point cursor support, but you can see the Tooltip article and the other behaviors from the Behaviors section in the documentation and see if they fit in this requirement. Also, RadChartView doesn't have a minor ticks and therefore minor grid lines. However, you can achieve such visualization using annotations placed along the axes.
Additionally, you can see the RadChartView demo and SDK examples.
I hope this helps.
Regards,
Martin
Telerik by Progress
Rank 1
Hello Martin,
thanks for your reply.It seems that most of our requirements are met with RadChartView.
But what about the axis order?
The user of our software is able to customize the chart, moving the displayed axis from the left to the right side and back, ordering the axis in a way it suits for his chart view.
So my questions are:
- Is it possible to reorder the axis, inserted in a way the codeblock below shows?
- Is it possible to display empty axis?
best regards,
Stefan
<telerik:RadCartesianChart.SeriesProvider> <telerik:ChartSeriesProvider Source="{Binding DataSeries}"> <telerik:ScatterSeriesDescriptor ItemsSourcePath="Items" ValuePath="XValue" YValuePath="YValue"> <telerik:ChartSeriesDescriptor.Style> <Style TargetType="telerik:ScatterLineSeries"> <Setter Property="StrokeThickness" Value="{Binding StrokeThickness}" /> <Setter Property="VerticalAxis" Value="{Binding AxisViewModel.VerticalAxis}"/> <Setter Property="Stroke" Value="Red"/> <Setter Property="LegendSettings" Value="Binding LegendSettings}"/> </Style> </telerik:ChartSeriesDescriptor.Style> </telerik:ScatterSeriesDescriptor> </telerik:ChartSeriesProvider></telerik:RadCartesianChart.SeriesProvider>I am not sure that I understand your requirements. The series axes will be ordered in the order of the series in the Series collection of the chart. So, if you want to reorder them you might need to reorder also the series. However, the chart allows you to position the axes vertically and horizontally. The horizontal axis can be positioned at the top and bottom sides of the plot area. The vertical axis can be positioned at the left and right sides of the plot area. You can do that via the HorizontalLocation and VerticalLocation properties of the axis. This is demonstrated in the Mutiple Axes help article.
Also, what do you mean by empty axis? Do you mean that you do not want to see any labels or ticks? If so, you can use the ElementBrush property or the ShowLabels and TickThickness properties of the axis. If this is not what you are looking for, I would ask you to send me a picture demonstrating what you want to achieve?
Regards,
Martin
Telerik by Progress
Rank 1
Hello Martin,
thank you for your reply - ordering the bound collection of series is working well.
Actually i try to achieve GridLineAnnotations because i need to display gridlines at the major ticks and also at the minor ticks (see attached picture from our old chart implementation). I'm sure we can dipslay the ticks, but it seems to be difficult to display the grid lines in correct number and position.
I'm using the AnnotationsProvider to bring the GridLineAnnotations to view, which works basically fine. When zooming into the chart (both directions) the property ActualMajorStep does not changes, and also the the event ActualMajorStepChanged does not occur!
Do you have any idea how to achieve this issue?
Best regards,
Stefan
major step of the axis, zooming in/out doesn't actually change the actual step and this is why the event is not fired. In order to achieve your requirement you can set the IsStepRecalculationOnZoomEnabled property to False. Or use the ActualVisibleRangeChanged event.
I attached a small example that demonstrates how to add minor ticks and grid lines using annotations. Please give it a try and let me know if it helps.
About the
Regards,
Martin
Telerik by Progress
Rank 1
Hello Martin,
thanks for your reply!
I tried your sample and yes, it does what it should do. But I do not understand how it works. The method to draw the minor ticks and grid lines is only called oncy, so who is the one who updates the annotations?
I tried to port your code into my project and it works until i want to set minimum and maximum values on my one. At this point the grid lines does not appear.
Attached my xaml code...
best regards and thanks in advance for your help,
Stefan
<UserControl x:Class="ECS.KULI.Charts.Chart2DViewTelerik" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:charts="clr-namespace:ECS.KULI.Charts" mc:Ignorable="d" d:DataContext="Chart2DViewModel" d:DesignHeight="300" d:DesignWidth="300"> <Grid> <Grid.Resources> <charts:AxisViewModelToAxisConverter x:Key="axisViewModelToAxisConverter"/> <Style TargetType="telerik:LinearAxis"> <!--<Setter Property="Minimum" Value="{Binding Minimum}"/> <Setter Property="Maximum" Value="{Binding Maximum}"/>--> <Setter Property="Title" Value="{Binding AxisTitle}"/> <EventSetter Event="Loaded" Handler="EventSetter_OnHandler"></EventSetter> </Style> <DataTemplate x:Key="tickTemplate"> <StackPanel Orientation="Horizontal"> <Rectangle Fill="#FF828282" Height="1" Width="3" Margin="0 1 0 0" /> </StackPanel> </DataTemplate> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <GroupBox Grid.Column="0" Margin="10" BorderThickness="2" Header="Chart View"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <telerik:RadCartesianChart Name="RadChart" Palette="Summer" Grid.Column="0" Background="White"> <telerik:RadCartesianChart.HorizontalAxis> <telerik:LinearAxis Minimum="1" Maximum="3" MajorStep="1"/> </telerik:RadCartesianChart.HorizontalAxis> <telerik:RadCartesianChart.SeriesProvider> <telerik:ChartSeriesProvider Source="{Binding DataSeries}"> <telerik:ScatterSeriesDescriptor ItemsSourcePath="Items" XValuePath="XValue" YValuePath="YValue"> <telerik:ChartSeriesDescriptor.Style> <Style TargetType="telerik:ScatterLineSeries"> <Setter Property="StrokeThickness" Value="{Binding StrokeThickness}" /> <Setter Property="VerticalAxis" Value="{Binding AxisViewModel, Converter={StaticResource axisViewModelToAxisConverter}}"/> <Setter Property="Stroke" Value="Red"/> <Setter Property="LegendSettings" Value="{Binding LegendSettings}"/> </Style> </telerik:ChartSeriesDescriptor.Style> </telerik:ScatterSeriesDescriptor> </telerik:ChartSeriesProvider> </telerik:RadCartesianChart.SeriesProvider> <telerik:RadCartesianChart.Grid> <telerik:CartesianChartGrid StripLinesVisibility="Y" MajorLinesVisibility="Y" /> </telerik:RadCartesianChart.Grid> <telerik:RadCartesianChart.Behaviors> <telerik:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both"/> <telerik:ChartCrosshairBehavior /> <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="True"/> </telerik:RadCartesianChart.Behaviors> </telerik:RadCartesianChart> <telerik:RadLegend Background="White" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Items="{Binding LegendItems, ElementName=RadChart}" HorizontalAlignment="Right" VerticalAlignment="Top" /> </Grid> </GroupBox> </Grid></UserControl>
Rank 1
Hello Martin,
I made further investigations on the weekend so I understand better now how your sample works. Now I think the shown annotations are never updated, they are only zoomed with the chart. Setting the minimum and maximum in my sample causes the annotations to be outside the shown value range, so I cannot see them. Sorry for that.
However, to meet my requirements it is neccessary to draw the same number of minor grid lines between two ticks on the axis. Therefor I guess I have to use the ActualVisibleRangeChanged event.
That's OK so far but I've no idea how to get the tick step shown on the axis, to redraw the annotations.
best regards,
Stefan
Rank 1
Hi Martin,
good news - i found a working solution for my issue.
We will now check the rest of our requirements and I will come back to you if I need help again!
Thank you and best regards,
Stefan
Rank 1
Hello Martin,
I have to meet the requirement that I can drop new items onto the RadChartView which are inserted as new Series.
Unfortunately I'm not able to do this. I set AllowDrop= true, I implemented a handler for PreviewDragEnter, which is called, but setting the DragDropEffects and the handled property of the event args does not change the cursor.
Can you give me a hint?
<telerik:RadCartesianChart Name="RadChart" Grid.Row="1" Grid.Column="0" Palette="Summer" AllowDrop="True" PreviewDragEnter="RadChart_OnPreviewDragEnter">
private void RadChart_OnPreviewDragEnter(object sender, DragEventArgs e){ e.Effects = DragDropEffects.All; e.Handled = true;}best regards,
Stefan
In order for the Effects property to be respected as you want, the drag initialized event should set the allowed effects to a value different than None. I attached a very simple example demonstrating this. I used the Drag and Drop Overview MSDN article as a reference.
You can also take a look at our DragDropManager. Note that if you are using the manager you can set the AllowedEffects property of the DragInitialized's event arguments.
As a side note, if you have any further questions that are not related to the original topic I would ask you to open a new forum or a support ticket. This way the forum will be organized better and finding relevant information will be easier.
Regards,
Martin
Telerik by Progress
Rank 1
Hello Martin,
thanks for your help - Drag'n Drop works perfect!
best regards, Stefan