StepLine and Cartesian MarkedZone Annotation issue

[Sivakumar]

<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>

[Martin Ivanov]

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

[Sivakumar]

Great it is working as expected ..

Thanks Martin for your quick response

[Sivakumar]

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">

 

[Martin Ivanov]

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

[Sivakumar]

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

[Sivakumar]

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

[Martin Ivanov]

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

[Sivakumar]

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
    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"/>

[Martin Ivanov]

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