StepLine and Cartesian MarkedZone Annotation issue

8 posts, 0 answers
  1. Sivakumar
    Sivakumar avatar
    27 posts
    Member since:
    Dec 2015

    Posted 19 Aug Link to this post

    <teler
    Hi Telerik,
     
    I am using stepline series with compination of Marked Zone to higlight certain horizontal/vertical area.The problem i am facing is marking on stepline not exactly sitting on specific category of stepline.As per below sample It starting from half 1 and ending 2 but in the result appear as starting from 0.5 to 1.5.Please see attached for accurate view.
    Pelase help me on this.
    ik:RadCartesianChart
    x:Name="chart1" Grid.Row="2" Grid.Column="1"  >
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis/>
                </telerik:RadCartesianChart.VerticalAxis>
     
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:CategoricalAxis IsInverse="False"  VerticalLocation="Top"    />
                </telerik:RadCartesianChart.HorizontalAxis>
     
                <!--<telerik:RangeBarSeries>
                    <telerik:RangeBarSeries.DataPoints>
                        <telerik:RangeDataPoint Category="1"  High="2.1" Low="2.0"/>
                        <telerik:RangeDataPoint Category="2" High="0" Low="0"/>
                        <telerik:RangeDataPoint Category="3" High="2.1" Low="2.0"/>
                        <telerik:RangeDataPoint Category="4" High="0" Low="0"/>
                    </telerik:RangeBarSeries.DataPoints>
                </telerik:RangeBarSeries>-->
                <telerik:StepLineSeries>
                    <telerik:StepLineSeries.DataPoints>
                        <telerik:CategoricalDataPoint Category="1" Value="2.0" />
                        <telerik:CategoricalDataPoint Category="2" Value="2.1" />
                        <telerik:CategoricalDataPoint Category="3" Value="2.0" />
                        <telerik:CategoricalDataPoint Category="4" Value="2.1" />
                    </telerik:StepLineSeries.DataPoints>
                </telerik:StepLineSeries>
          
                <telerik:RadCartesianChart.Annotations>
                    <telerik:CartesianMarkedZoneAnnotation VerticalFrom="2.0" VerticalTo="2.1"
                                                          HorizontalFrom="1" HorizontalTo="2" Fill="Red"/>
                </telerik:RadCartesianChart.Annotations>
     
                <!--<telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="XY"/>
                </telerik:RadCartesianChart.Grid>-->
            </telerik:RadCartesianChart>
  2. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 19 Aug Link to this post

    Hi Sivakumar,

    This behavior appears because an annotation will always start rendering from the center of the category. So, the marked zone annotations start drawing at the center of  "1" to the center of  "2". To achieve your requirement you can set the annotation's Margin property to offset it to the left.
    <telerik:CartesianMarkedZoneAnnotation Margin="-20 0 0 0" />
    Using this approach you will need to calculate the margin at run time every time the chart's UI is updated, because the category slots size will be changed on different occasions as chart size changing or adding/removing new categories. 

    Here is a possible implementation:
    chart1.UIUpdated += chart1_UIUpdated;
    .....
    void chart1_UIUpdated(object sender, EventArgs e)
    {
        if (this.annotation != null)
        {
            int categoriesCount = this.horizontalAxis.Categories.Count();
            var categorySlotSize = this.chart1.PlotAreaClip.Width / categoriesCount;               
            annotation.Margin = new Thickness(-(categorySlotSize / 2), 0, 0, 0);
        }
    }

    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. Sivakumar
    Sivakumar avatar
    27 posts
    Member since:
    Dec 2015

    Posted 19 Aug in reply to Martin Link to this post

    Great it is working as expected ..

    Thanks Martin for your quick response

  5. Sivakumar
    Sivakumar avatar
    27 posts
    Member since:
    Dec 2015

    Posted 19 Aug Link to this post

    Hi Martin,

    One more thing...How to achieve same for dynamic series / annotations .. especially please hep on updating chart with margin for dynamic annotation's.

    <telerik:RadCartesianChart.AnnotationsProvider>
                  <telerik:ChartAnnotationsProvider Source="{Binding AnnotationModelsCollection,Mode=TwoWay}" AnnotationCreated="ChartAnnotationsProvider_AnnotationCreated" >
                      <telerik:ChartAnnotationsProvider.AnnotationDescriptorSelector>
                          <local:MyAnnotationsDescriptorSelector>
                              <local:MyAnnotationsDescriptorSelector.MarkedZoneAnnotationDescriptor>
                                  <telerik:ChartAnnotationDescriptor >
                                      <telerik:ChartAnnotationDescriptor.Style>
                                          <Style TargetType="telerik:CartesianMarkedZoneAnnotation">

     

  6. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 19 Aug Link to this post

    Hello Sivakumar,

    To achieve this in a scenario with dynamic number of annotations you can use several approaches. 
    • Since the category slot width will be the same for all categories you can try to calculate its value on UIUpdated store it in a static property and set this property in the style of the annotation descriptor.
    • Subscribe globally for the CartesianMarkedZoneAnntation SizeChanged event using the EventManager.RegisterClassHandler() method and in the event handler update the annotation's Margin.
    • Use the AnnotationCreated event of the annotation provider and in the event handler subscribe for the SizeChanged. Then on size changed of the annotation update the Margin.

    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.
  7. Sivakumar
    Sivakumar avatar
    27 posts
    Member since:
    Dec 2015

    Posted 21 Aug in reply to Martin Link to this post

    HI Martin,

    I am using first approach to achieve margin setting dynamically with below code

    void chart_UIUpdated(object sender, EventArgs e)
           {
                
                   int categoriesCount = this.horizontalAxis1.Categories.Count();
                   var categorySlotSize = this.chart.PlotAreaClip.Width / categoriesCount;
                 // ((MainViewModel)this.DataContext).MarkedZoneAnnotationMargin = new Thickness(-(categorySlotSize / 2), 0, 0, 0);
                   this.chart.Annotations.ToList().ForEach(m =>
                   {
                       CartesianMarkedZoneAnnotation annotation = m as CartesianMarkedZoneAnnotation;
                        if (annotation != null)
                        {
                            annotation.Margin = new Thickness(-(categorySlotSize / 2), 0, 0, 0);
                        }
                   });
                
           }

    This is working fine until performing zoom/pan on the chart.Once chart zooming done and UI updated then marking of annotation started behaving wrongly.I think we need to recalculate margin based on chart pan offset changed.Please help to provide solution for this

  8. Sivakumar
    Sivakumar avatar
    27 posts
    Member since:
    Dec 2015

    Posted 21 Aug in reply to Sivakumar Link to this post

    Hi Martin,

    I noticed that Ploatarea width not updating after chart zooming has done this causing the annoatation not drawing correctly. 

    this.chart.PlotAreaClip.Width

    But when Ploatarea width updating properly when we do minimize/maximize the screen..Please help to find the way to get updated ploatarea width while or after zomm/pan done

  9. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 22 Aug Link to this post

    Hi Sivakumar,

    This is expected behavior. The plot area is the visible area where the data points are plotted. So its size doesn't change on zoom in/out. To calculate the correct margin you will need to take into account also the current applied Zoom or PanOffset.

    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready