Keep the char readable by increasing minHeight items

[Cedric]

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>

[Peshito]

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

[Cedric]

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 -

[Nikolay]

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

[Cedric]

Thanks nikolay,

I made a try as soon as possible.

- Cedric -

[Cedric]

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 -

[Nikolay]

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

[Cedric]

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 -

[Yavor]

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