Keep the char readable by increasing minHeight items

9 posts, 0 answers
  1. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 21 Sep 2011 Link to this post

    Hi,
    I've a bar graph which can contain from only one value to a hundred values and the bars and the axis labels are too small to be readable. So i've modified my xaml to use a scrollviewer but tha's not enough : the scrollbars appears too late; the axis label are still too small.
    How can i change the threshold making the scrollbars visible ?
    Sample
    Thanks

    - Cedric -

    <telerik:RadChart x:Name="RadChart1" ItemsSource="{Binding Data}" UseDefaultLayout="False">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
      
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding ElementName=chartArea, Path=ActualWidth, StringFormat=AreaWidth \{0\}}"/>
                        <TextBlock Text="{Binding ElementName=chartArea, Path=ActualHeight, StringFormat=AreaHeight \{0\}}"
                                   Grid.Column="1" />
      
                        <TextBlock Text="{Binding ElementName=RadChart1, Path=ActualWidth, StringFormat=WWidth \{0\}}"
                                   Grid.Row="1" />
                        <TextBlock Text="{Binding ElementName=RadChart1, Path=ActualHeight, StringFormat=WHeight \{0\}}"
                                   Grid.Row="1"
                                   Grid.Column="1" />
      
                        <telerik:ChartLegend x:Name="legend"
                                             Grid.Column="2" Grid.RowSpan="2"
                                             ItemsPanelOrientation="Horizontal"
                                             BorderThickness="0"
                                             Padding="5,0"
                                             Header="" />
                    </Grid>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                                  VerticalScrollBarVisibility="Auto">
                        <telerik:ChartArea Grid.Row="0"
                                           x:Name="chartArea"
                                           Legend="{Binding ElementName=legend}"
                                           EnableAnimations="False"
                                           Padding="5,10,20,10">
                            <telerik:ChartArea.AxisX>
                                <telerik:AxisX  />
                            </telerik:ChartArea.AxisX>
                        </telerik:ChartArea>
                    </ScrollViewer>
                </Grid>
                      
                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping LegendLabel="Close"
                                           ChartAreaName="chartArea">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:HorizontalBarSeriesDefinition ShowItemLabels="True" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping FieldName="Name"
                                                 DataPointMember="XCategory" />
                            <telerik:ItemMapping FieldName="Value"
                                                 DataPointMember="YValue" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>
            </telerik:RadChart>
  2. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 23 Sep 2011 Link to this post

    Hello Cedric,

    May I suggest you using our ZoomingAndScrolling feature in order to achieve the desired result.
    For example:
    <telerikCharting:ChartDefaultView.ChartArea>
             <telerikCharting:ChartArea EnableAnimations="False" LegendName="Legend1">
                 <telerikCharting:ChartArea.ZoomScrollSettingsX>
                     <telerikCharting:ZoomScrollSettings ScrollMode="ScrollOnly" RangeStart="0" RangeEnd="0.3" SliderSelectionStart="0" SliderSelectionEnd="0.3"/>
                 </telerikCharting:ChartArea.ZoomScrollSettingsX>
               </telerikCharting:ChartArea>
           </telerikCharting:ChartDefaultView.ChartArea>

    Setting the ScrollMode to ScrollOnly will leave only the scroll viewer, so no zooming will be available.

    You can find more about Zooming and Scrolling here.

    Hope that helps.

    Greetings,
    Peshito
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 23 Sep 2011 Link to this post

    Hi Peshito,
    I've already tried that and it renders very bad.
    This don't prevent the graph to be too small on a smaller screen or if the windows is rezized and i don't want to have to manage the range & Slider in my viewmodel by hands because i will never know which values to compute. 
    I just want to be sure that the bar will never be smaller than 25. 

    I don't know if i am clear enough so i made some drawing :)

    Wrong rendering with ZoomScrollSettings


    Approximate Wanted behaviour

    Thanks

    - Cedric -


  5. Nikolay
    Admin
    Nikolay avatar
    385 posts

    Posted 28 Sep 2011 Link to this post

    Hello Cedric,

    The reason why the rendering hasn't been correct when using ScrollOnly mode, is because of a bug in the version you are using ( I assume it is 2011.Q2 ). It has been fixed for the Service Pack ( version 2011.2.920 ). Please, have a look at the attached sample application, which we have prepared to simulate a scenario similar to yours. The chart is within a ScrollViewer and zoom/scroll settings are used on the X-Axis in a ScrollOnly mode with set RangeStart and RangeEnd properties. This way each bar would have the desired width/height, depending on the initial range you would want to observe and the size of the chart window, making the axis labels readable as well.

    Please let us know if this solution is applicable for you.

    Best wishes,
    Nikolay
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  6. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 28 Sep 2011 Link to this post

    Thanks nikolay,

    I made a try as soon as possible.

    - Cedric -
  7. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 30 Sep 2011 Link to this post

    Sorry but i don't see any change.
    Is there a way to set a minimum size for the item without to have to compute a RangeStart or RangeEnd ? 
    What means these properties ?

    In your sample the SliderSelection is also setted, what for ?

    The documentation is useless :
    Range Gets the difference between RangeEnd and RangeStart.
    RangeEnd Gets or sets the range end.
    RangeStart Gets or sets the range start.

    Great !

    - Cedric -
  8. Nikolay
    Admin
    Nikolay avatar
    385 posts

    Posted 03 Oct 2011 Link to this post

    Hi Cedric,

    Let me elaborate a bit more on the properties used. In the example test application there are 100 horizontal bars. Setting the RangeStart and RangeEnd properties to 0.2 and 0.4 means that the initial range you would observe would be from 20 to 40 ( as 100 bars would represent a range of 1 ) and SliderSelectionStart/SliderSelectionEnd would define the range of the slider within the already defined one by the RangeStart and RangeEnd (as displayed in the attached screenshot). Setting these properties in a manner that would best suit the specific scenario and expected data would result in defining a width/height of the bars that would be appropriate for the data and labels to be clearly readable.

    Unfortunately the current version of the control does not support a functionality that would allow for setting a minimum height or width of each item, however, there are a few other properties that would allow you to control the desired size, described in this help topic.

    Kind regards,
    Nikolay
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  9. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 13 Oct 2011 Link to this post

    I've a problem : The value binded to RangEnd is never used
    <telerik:RadChart Name="chartTechnicalItemsMax"
                          Background="Transparent"
                          BorderThickness="0"
                          IsTabStop="False"
                          UseDefaultLayout="False"
                          ToolTip="Display matching technical items by libraries"
                          DataContext="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadFluidContentControl, Mode=FindAncestor},  Path=DataContext}"
                          ItemsSource="{Binding StatusGroup}"
                          PaletteBrushes="{Binding BrushPalette}"
                          x:Uid="chartTechnicalitems">
            <telerik:RadChart.SeriesMappings>
            ...
            </telerik:RadChart.SeriesMappings>
            <Grid x:Uid="Grid_8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Uid="ColumnDefinition_15"
                                      Width="*" />
                    <ColumnDefinition x:Uid="ColumnDefinition_16"
                                      Width="Auto" />
                </Grid.ColumnDefinitions>
                  
                <telerik:ChartArea x:Uid="ItemArea"
                                    x:Name="ItemArea"
                                   Background="Pink"
                                    NoDataString="Not available">
                    <telerik:ChartArea.AnimationSettings>
                        <telerik:AnimationSettings x:Uid="telerik:AnimationSettings_1" 
                                                   ItemAnimationDuration="0:0:0.1"
                                                   TotalSeriesAnimationDuration="0:0:3" />
                    </telerik:ChartArea.AnimationSettings>
                    <telerik:ChartArea.ZoomScrollSettingsX>
                        <telerik:ZoomScrollSettings x:Uid="telerik:ZoomScrollSettings_1" 
                                                    ScrollMode="ScrollOnly"
                                                    RangeStart="0"
                                                    SliderSelectionStart="0"
                                                    RangeEnd="{Binding RangeEnd}"
                                                    SliderSelectionEnd="{Binding RangeEnd}"
                                                    MinZoomRange="5" />
                    </telerik:ChartArea.ZoomScrollSettingsX>
                </telerik:ChartArea>
                <telerik:ChartLegend x:Uid="telerik:ChartLegend_2"
                                     Grid.Column="1"
                                     Style="{StaticResource ClassificationLegendStyle}" />
            </Grid>
        </telerik:RadChart>
    </DataTemplate>

    Let me guess :
    "Back to your question, currently there is a know issue RadChart properties not to be set properly when set in a DataTemplate. "

    It' the same bug ?

    - Cedric -
  10. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 18 Oct 2011 Link to this post

    Hi Cedric,

    It is very likely that the problem that you are experiencing is caused by the chart being in a DataTemplate. It is logged in our PITS system here. You can try wrapping your chart inside a UserControl and using this UserControl inside the DataTemplate.

    Kind regards,
    Yavor
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
UI for WPF is Visual Studio 2017 Ready