Does 2d chart fit these requirements

12 posts, 0 answers
  1. Stefan
    Stefan avatar
    8 posts
    Member since:
    May 2014

    Posted 30 Aug Link to this post

    Hello,

    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
  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 31 Aug Link to this post

    Hi Stefan,

    You can achieve the requirements listed in your last reply with RadChartView. Check the following resources.

    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.

    As a side note, RadChart is our old charting component which has known issues and limitations. This is why we created RadChartView that brings better implementation and improved performance. We recommend using RadChartView over RadChart.

    I hope this helps.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Stefan
    Stefan avatar
    8 posts
    Member since:
    May 2014

    Posted 01 Sep Link to this post

    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>

  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 01 Sep Link to this post

    Hi Stefan,

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Stefan
    Stefan avatar
    8 posts
    Member since:
    May 2014

    Posted 01 Sep in reply to Martin Link to this post

    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

     

  7. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 02 Sep Link to this post

    Hello 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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Stefan
    Stefan avatar
    8 posts
    Member since:
    May 2014

    Posted 02 Sep in reply to Martin Link to this post

    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:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 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>

  9. Stefan
    Stefan avatar
    8 posts
    Member since:
    May 2014

    Posted 05 Sep in reply to Stefan Link to this post

    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

  10. Stefan
    Stefan avatar
    8 posts
    Member since:
    May 2014

    Posted 05 Sep in reply to Stefan Link to this post

    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

  11. Stefan
    Stefan avatar
    8 posts
    Member since:
    May 2014

    Posted 07 Sep Link to this post

    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

  12. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 09 Sep Link to this post

    Hello 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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  13. Stefan
    Stefan avatar
    8 posts
    Member since:
    May 2014

    Posted 15 Sep Link to this post

    Hello Martin,

    thanks for your help - Drag'n Drop works perfect!

    best regards, Stefan

Back to Top
UI for WPF is Visual Studio 2017 Ready