How to correctly calculate the MajorStep and chart zoom

5 posts, 0 answers
  1. Alex
    Alex avatar
    6 posts
    Member since:
    Jun 2011

    Posted 07 Jul 2014 Link to this post

       Hi,
       Could somebody help me with calculation of the MajorStep and chart zoom? I have the following XAML layout

          <chart:RadCartesianChart Grid.Row="0" Zoom="{Binding ChartZoom}" SizeChanged="Chart_SizeChanged">
             <chart:RadCartesianChart.Behaviors>
                <chart:ChartPanAndZoomBehavior ZoomMode="None" PanMode="Horizontal" />
             </chart:RadCartesianChart.Behaviors>
             <chart:RadCartesianChart.HorizontalAxis>
                <chart:DateTimeContinuousAxis FontSize="{StaticResource SubTinyFontSize}" LabelFitMode="Rotate" LabelRotationAngle="-60" MajorStepUnit="Minute" MajorStep="{Binding MajorDateTimeStep}" LabelFormat="MMM dd&#13;&#10;HH:mm" />
             </chart:RadCartesianChart.HorizontalAxis>
             <chart:RadCartesianChart.VerticalAxis>
                <chart:LinearAxis FontSize="{StaticResource TinyFontSize}" Minimum="0" Maximum="{Binding PaddedMaxDisplayValue}" MajorStep="{Binding MajorDisplayValueStep}" LabelFormat="0.0" Title="minutes" />
             </chart:RadCartesianChart.VerticalAxis>
             <chart:RadCartesianChart.Grid>
                <chart:CartesianChartGrid MajorLinesVisibility="Y" MajorYLineDashArray="6,6" />
             </chart:RadCartesianChart.Grid>
             <chart:RadCartesianChart.Series>
                <chart:BarSeries ItemsSource="{Binding ChartItemList}" CategoryBinding="DisplayStarted" ValueBinding="DisplayValue">
                   <chart:BarSeries.PointTemplate>
                      <DataTemplate>
                         <Rectangle Fill="{Binding DataItem.Brush}"/>
                      </DataTemplate>
                   </chart:BarSeries.PointTemplate>
                </chart:BarSeries>
             </chart:RadCartesianChart.Series>
          </chart:RadCartesianChart>

       My data is visualized as a series of bars. The DateTime horizontal axis is 120 days (120.00:17:12.3100000) so far but can be a number of years. What I'm trying to do is to calculate a good MajorStep value so that all bars look good, no major overlaps, no too huge gaps in between. For 120 days my calculation gives me 2887 minutes for the MajorStep and horizontal zoom 6.08. Thus, I basically expect to see horizontal ticks every 2887 / 60 = 48.11 hours (or almost 2 days), however the ticks are rendered with an interval of approximately 1 day.

       I run a number of tests and just for the sake of a test set extreme numbers to the MajorStep like 46000 which resulted in a correct tick step of approximately 32 days if I don't zoom but if I zoom 12 the ticks are rendered approximately every 2 days which actually looks like 32 /12 = 2 2 in other words zoom affected the MajorStep but it didn't work in other test.

       I'm completely lost. What and how I have to setup on the axis so that the tick interval is 2887 minutes (about 2 days) when the chart is zoomed 6 times.

    Thank you,
    Alex

  2. Alex
    Alex avatar
    6 posts
    Member since:
    Jun 2011

    Posted 08 Jul 2014 in reply to Alex Link to this post

    Any ideas?

    I looked at the source and it seems to me that the root cause of the problem is this method

            private decimal CalculateTickZoomFactor()
            {
                decimal zoomFactor = (decimal)this.layoutStrategy.GetZoom();

                // minimum delta is the maximum available zoom
                if (this.tickInterval.Ticks / zoomFactor < this.minDelta.Ticks)
                {
                    zoomFactor = this.tickInterval.Ticks / this.minDelta.Ticks;
                }
                else
                {
                    zoomFactor -= zoomFactor % 2;
                }

                return Math.Max(1, zoomFactor);
            }

    which calculates and sets

                this.tickZoomFactor = this.CalculateTickZoomFactor();

    which in its turn is used in the GenerateTicks in the following method

                    decimal nextTicks = this.GetNextTicks(this.plotInfo.Min, this.tickZoomFactor);

    If I'm right, it seems like something that cannot be efficiently controlled. In my case, I guess the tickZoomFactor should always be 1 but I didn't find a way to override it.

    Could somebody from Telerik team comment on this?

    Thank you,
    Alex

  3. DevCraft banner
  4. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    550 posts

    Posted 10 Jul 2014 Link to this post

    Hi Alex,

    Thank you for contacting us.

    Please, note that the BarSeries are usually used to visualize categorical data. Each category is visualized in a separate axis slot and thus the bars never overlap. When categorical axis is set, the bars could be clustered or stacked depending on the value of the series CombineMode property.

    If you have continuous data, you may consider using another type of series that is better suited for such scenario. If your data could be categorized, you could try the DateTimeCategoricalAxis, and specify its DateTimeComponent property depending on the chart Zoom.

    If no properties are specified, the DateTimeContinuousAxis automatically calculates its major step in such way that the ticks look good. But since the data is continuous, nothing can stop the bars from overlapping. You may try to control the width of the bars with the axis GapLength property that sets the width of the bars based on the width of the tick step.

    I hope this gives you some ideas of how the chart works.

    Regards,
    Rosy Topchiyska
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Alex
    Alex avatar
    6 posts
    Member since:
    Jun 2011

    Posted 10 Jul 2014 in reply to Rosy Topchiyska Link to this post

       Thank you for the suggestions. I will think over the existing approach and maybe find something that needs to be changed.
       Nevertheless, I believe there is a bug in your code. I found a way to fix it but it cannot be done outside of your code. It should be within. The problem is that you call CalculateTickZoomFactor method even when MajorStep is explicitly set. It seems that CalculateTickZoomFactor is indeed necessary when you completely handle the tick steps calculations but if I, for example, know what step I want to have your code anyway interfere and changes that step which I think shouldn't happen. These notes are for you to think about and hopefully you'll decide to fix this situation in upcoming releases.

    Regards,
    Alex
  6. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    550 posts

    Posted 16 Jul 2014 Link to this post

    Hello Alex,

    Thank you for the feedback. Your scenario is valid and we will consider your suggestion. We will think of a way to provide the user with more control over how the axis ticks are generated for the future versions of the control.

    Regards,
    Rosy Topchiyska
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner