StepLine and Cartesian MarkedZone Annotation issue

10 posts, 0 answers
  1. Sivakumar
    Sivakumar avatar
    29 posts
    Member since:
    Dec 2015

    Posted 19 Aug 2016 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 Ivanov
    Admin
    Martin Ivanov avatar
    1359 posts

    Posted 19 Aug 2016 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. Sivakumar
    Sivakumar avatar
    29 posts
    Member since:
    Dec 2015

    Posted 19 Aug 2016 in reply to Martin Ivanov Link to this post

    Great it is working as expected ..

    Thanks Martin for your quick response

  4. Sivakumar
    Sivakumar avatar
    29 posts
    Member since:
    Dec 2015

    Posted 19 Aug 2016 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">

     

  5. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1359 posts

    Posted 19 Aug 2016 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.
  6. Sivakumar
    Sivakumar avatar
    29 posts
    Member since:
    Dec 2015

    Posted 21 Aug 2016 in reply to Martin Ivanov 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

  7. Sivakumar
    Sivakumar avatar
    29 posts
    Member since:
    Dec 2015

    Posted 21 Aug 2016 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

  8. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1359 posts

    Posted 22 Aug 2016 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.
  9. Sivakumar
    Sivakumar avatar
    29 posts
    Member since:
    Dec 2015

    Posted 20 Dec 2016 Link to this post

    Hi Telerik,

    We are facing two issues when we are using Stepline series.

    ISSUE 1 :

    When there is only one category / data point then chart is not drawing . We have such cases  and we need solution or workaround for this case

            <telerik:StepLineSeries>
                <telerik:StepLineSeries.DataPoints>
                    <telerik:CategoricalDataPoint Category="1" Value="1.0" />
                    <!--<telerik:CategoricalDataPoint Category="2" Value=1.1" />
                    <telerik:CategoricalDataPoint Category="3" Value="1.0" />
                    <telerik:CategoricalDataPoint Category="4" Value="1.1" />-->
                </telerik:StepLineSeries.DataPoints>
            </telerik:StepLineSeries>



    ISSUE 2 :
    We are using marked zone but marking falling in between and not from beginning so we used margin workaround from telerik to fix (Please see code from attached xaml.cs file)


    Before Shifting


    After Shifting
    BELOW CODE USED TO ALIGN MARGIN


    int categoriesCount = this.horizontalAxis.Categories.Count();
    double categorySlotSize = this.chart.PlotAreaClip.Width *    this.chart.Zoom.Width / categoriesCount;

                    var margin = new Thickness(-(categorySlotSize / 2), 0, 0, 0);
                    if (!margin.ToString().Contains("Infinity"))
                    {
                        this.chart.Annotations.Where(x => x is CartesianMarkedZoneAnnotation).ToList()
                            .ForEach(m => { m.Margin = margin; });

                    }






    But we are facing issue when we zoom the chart.The marking going out of actual area.Please help to resolve it.


    After Zooming


    ISSUE 3 :

    When we are using marking for last category then the marking done for half way only.Please help to draw until end (Need to support while zooming as well)

            <telerik:StepLineSeries>
                <telerik:StepLineSeries.DataPoints>
                    <telerik:CategoricalDataPoint Category="1" Value="1.0" />
                    <telerik:CategoricalDataPoint Category="2" Value="1.1" />
                    <telerik:CategoricalDataPoint Category="3" Value="1.0" />
                    <telerik:CategoricalDataPoint Category="4" Value="1.1" />
                </telerik:StepLineSeries.DataPoints>
            </telerik:StepLineSeries>



    <telerik:CartesianMarkedZoneAnnotation VerticalFrom="1.0" VerticalTo="1.1" HorizontalFrom="4" Fill="Red"/>

    Hi Telerik,
     
    We are facing two issues when we are using Stepline series.
     
    ISSUE 1 :
     
    When there is only one category / data point then chart is not drawing . We have such cases  and we need solution or workaround for this case
             
            <telerik:StepLineSeries>
                <telerik:StepLineSeries.DataPoints>
                    <telerik:CategoricalDataPoint Category="1" Value="1.0" />
                    <!--<telerik:CategoricalDataPoint Category="2" Value=1.1" />
                    <telerik:CategoricalDataPoint Category="3" Value="1.0" />
                    <telerik:CategoricalDataPoint Category="4" Value="1.1" />-->
                </telerik:StepLineSeries.DataPoints>
            </telerik:StepLineSeries>
     
     
     
    ISSUE 2 :
    We are using marked zone but marking falling in between and not from beginning so we used margin workaround from telerik to fix (Please see code from attached xaml.cs file)
     
    Before Shifting 
    See image
     
    After Shifting 

    See image

        BELOW CODE USED TO ALIGN MARGIN
    int categoriesCount = this.horizontalAxis.Categories.Count();
    double categorySlotSize = this.chart.PlotAreaClip.Width *    this.chart.Zoom.Width / categoriesCount;
     
                    var margin = new Thickness(-(categorySlotSize / 2), 0, 0, 0);
                    if (!margin.ToString().Contains("Infinity"))
                    {
                        this.chart.Annotations.Where(x => x is CartesianMarkedZoneAnnotation).ToList()
                            .ForEach(m => { m.Margin = margin; });
     
                    }
    But we are facing issue when we zoom the chart.The marking going out of actual area.Please help to resolve it.
         
    After Zooming  
    See Image
             
    ISSUE 3 :
     
    When we are using marking for last category then the marking done for half way only.Please help to draw until end (Need to support while zooming as well)
     
                <telerik:StepLineSeries>
                <telerik:StepLineSeries.DataPoints>
                    <telerik:CategoricalDataPoint Category="1" Value="1.0" />
                    <telerik:CategoricalDataPoint Category="2" Value="1.1" />
                    <telerik:CategoricalDataPoint Category="3" Value="1.0" />
                    <telerik:CategoricalDataPoint Category="4" Value="1.1" />
                </telerik:StepLineSeries.DataPoints>
            </telerik:StepLineSeries>
     
    <telerik:CartesianMarkedZoneAnnotation VerticalFrom="1.0" VerticalTo="1.1" HorizontalFrom="4" Fill="Red"/>
                                                          
  10. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1359 posts

    Posted 22 Dec 2016 Link to this post

    Hello Sivakumar,

    This question was already asked and answered in ticket with ID:1080742. I am quoting the answer also here.

    "Let me get straight to your queries.
    • When there is only one category/data point then chart is not drawing.
      This is expected with all line series. You cannot define a line with a single point. In order to draw a line you need at least two points (start and end). 
    • The marked zone annotation is going out of the actual area.
      To avoid the annotations to be drawn outside of the plot area (the actual area), you can set their ClipToPlotArea property to True. If this doesn't help probably the Margin offsets also the default clip, so you can manually caltulate a RectangleGeometry and assign it on the Clip property of the marked zone annotation, when necessary.
    • When we are using marking for last category then the marking done for half way only.
      This is expected. The rest of the annotations have their horizontal range set in between two categories (HorizontalFrom and HorizontalTo). The last one has only one category (HorizontalFrom) and it is half way drawn. In order to resolve this you might need to use different approach for drawing the custom elements in the chart. You can try custom annotations and manually calculate their sizes and positions over the chart."

    Regards,
    Martin
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top