Graph Y-axis scaling not correct

2 posts, 1 answers
  1. Shivam
    Shivam avatar
    5 posts
    Member since:
    Oct 2011

    Posted 14 Nov 2011 Link to this post

    Hi,
    With reference to your example:
    http://demos.telerik.com/silverlight/#Chart/ZoomScroll

    I have made a similar chart in my application which accepts unsampled data and also the number for data points returned from database query are uncertain (varies between 10-5000).

    The Issue here is If the Y-Value from my returned Collection from DB is greater than 1000 and the value is not changing much over time the labels on the Y-axis all display the same value.
    e.g My Database returns 1000 data points all having y-value :1800 and different x values(Timestamps).
    All The y-axis labels shows the same value i.e. its not at all scaled and also the graph should show a single straight line as all the y values are 1800 but It looks something Like:



    The requirement is for these type of situation the scale should start from a lower value say 1500 and end ata a higher value e.g 2000.
    as It behave in Data points lesser than 1000:


    my Code:

    xaml:

    <telerikChart:RadChart  Margin="0 2 0 2" Grid.Row="2" x:Name="RadChart" ItemsSource="{Binding ChartsCollection}" UseDefaultLayout="False" BorderBrush="Transparent" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition />
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <telerikCharting:ChartArea Grid.Row="0" Grid.RowSpan="2"  Margin="0 0 5 0"
                                           x:Name="chartArea1"
                                           EnableAnimations="False"
                                           Padding="5,10,20,10" NoDataControlStyle="{StaticResource NoDataControlStyle}" NoDataString="{Binding NoDataString}" Background="White" >
                            <telerikCharting:ChartArea.ZoomScrollSettingsX>
                                <telerikCharting:ZoomScrollSettings ScrollMode="ScrollAndZoom" MinZoomRange="0.005"/>
                            </telerikCharting:ChartArea.ZoomScrollSettingsX>
                            <telerikCharting:ChartArea.AxisY>
                                <telerikCharting:AxisY AutoRange="True"/>
                            </telerikCharting:ChartArea.AxisY>
                            <telerikCharting:ChartArea.AxisX>
                                <telerikCharting:AxisX DefaultLabelFormat="MM-dd-yy&#x0a;H:mm:ss" LabelRotationAngle="0" />
                            </telerikCharting:ChartArea.AxisX>
                        </telerikCharting:ChartArea>

                        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" Margin="0,10,15,5">
                            <telerik:RadButton Command="{Binding ZoomInCommand}" Margin="5,0" Content="+" Width="20" FontWeight="Bold"/>
                            <telerik:RadButton Command="{Binding ZoomOutCommand}" Margin="5,0" Content="-" Width="20" FontWeight="Bold"/>
                        </StackPanel>
                    </Grid>

                    <telerikChart:RadChart.SortDescriptors>
                        <telerikCharting:ChartSortDescriptor Member="XBinding" SortDirection="Ascending" />
                    </telerikChart:RadChart.SortDescriptors>
                    <telerikChart:RadChart.SamplingSettings>
                        <telerikCharting:SamplingSettings SamplingThreshold="400" SamplingFunction="Average" />
                    </telerikChart:RadChart.SamplingSettings>
                    <telerikChart:RadChart.SeriesMappings>
                        <telerikCharting:SeriesMapping  ChartAreaName="chartArea1">
                            
                            <telerikCharting:SeriesMapping.SeriesDefinition>
                                <telerikCharting:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" >
                                    <telerikCharting:LineSeriesDefinition.Appearance>
                                        <telerikCharting:SeriesAppearanceSettings Stroke="RoyalBlue"/>
                                    </telerikCharting:LineSeriesDefinition.Appearance>
                                </telerikCharting:LineSeriesDefinition>
                            </telerikCharting:SeriesMapping.SeriesDefinition>

                            <telerikCharting:SeriesMapping.ItemMappings>
                                <telerikCharting:ItemMapping FieldName="XBinding" DataPointMember="XValue" />
                                <telerikCharting:ItemMapping FieldName="YBinding" DataPointMember="YValue" />
                            </telerikCharting:SeriesMapping.ItemMappings>
                        </telerikCharting:SeriesMapping>

                    </telerikChart:RadChart.SeriesMappings>
                </telerikChart:RadChart>

    There is One More Issue: Sometimes if I Zoom In Lot of time Everything Disappear from My Graph.

    Please Help me solve these issue and also Note that here I am using Strict MVVM approach.

    Regards

    Shivam


  2. Answer
    Nikolay
    Admin
    Nikolay avatar
    397 posts

    Posted 16 Nov 2011 Link to this post

    Hello Shivam,

    The Y-axis has multiple identically looking labels because of the ChartArea's LabelFormatBehavior, which by default is set to 'HumanReadable' and is applied for values higher than 1 000 for a better readability. Obviously it is not as accurate in scenarios like this one, as you would have the labels being , for example, 1 801, 1 802, 1 803, etc, with the Line having a values of 1 801, 1 803 and so on, however, all of the labels would be denoted as '1.8 K' by the default label format behavior.

    In case you need more accuracy you may simply set the LabelFormatBehavior to None :
    RadChart1.DefaultView.ChartArea.LabelFormatBehavior = LabelFormatBehavior.None;
    <telerikCharting:ChartArea LabelFormatBehavior="None">

    You can find more information on the topic in this help topic.

    Another possibility would be to set a manual range runtime by subscribing to an event in case you can define the point at which you would need the custom Y axis range to be set and when to have the chart auto range.

    Hope this helps.

    Best wishes,
    Nikolay
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top