This is a migrated thread and some comments may be shown as answers.

Keep the char readable by increasing minHeight items

8 Answers 112 Views

Chart

This is a migrated thread and some comments may be shown as answers.

Cedric asked on 21 Sep 2011, 11:12 AM

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

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

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

8 Answers, 1 is accepted

answered on 23 Sep 2011, 11:34 AM

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

answered on 28 Sep 2011, 08:29 AM

HorizontalBars-Scroll.zip

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

answered on 03 Oct 2011, 08:26 AM

Selected-Range.png

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

answered on 13 Oct 2011, 01:04 PM

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 -