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

[Solved] how to centralize the bars when anybar is not visible ?

3 Answers 164 Views

Chart

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

This question is locked. New answers and comments are not allowed.

Saravanan asked on 14 Jul 2011, 11:36 AM

rearrangethebars-in-cental-and-change-the-background-colour-of-legend.JPG

wnt-to-change-background-colour-of-chartlegend-and-rearrange-the-bars.PNG

Hi,

i have radchat with 4 bars if any bar has zero value then bar will not be visible,,its ok ,

but i want to rearrange the all bars in central..how should i do this ?

also,how to change background color of legend area please let me know here i have attached screen for your reference..

her is my code,

In Xaml File..

< <Style x:Key="MyBarStyle" TargetType="chart:Bar">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="chart:Bar">

<Canvas Opacity="0"

x:Name="PART_MainContainer">

<Rectangle

x:Name="PART_DefiningGeometry"

Height="{TemplateBinding ItemActualHeight}"

Width="{TemplateBinding ItemActualWidth}"

Style="{TemplateBinding ItemStyle}" />

<Rectangle

Height="{TemplateBinding ItemActualHeight}"

Width="{TemplateBinding ItemActualWidth}"

Fill="{StaticResource BarMaskBrush}" />

<Rectangle

x:Name="PART_SelectedState"

Height="{TemplateBinding ItemActualHeight}"

Width="{TemplateBinding ItemActualWidth}" />

<Canvas.RenderTransform>

<ScaleTransform

x:Name="PART_AnimationTransform"

ScaleY="0" />

</Canvas.RenderTransform>

</Canvas>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

<telerik:RadChart x:Name="RadChart1"

BorderThickness="0"

PaletteBrushesRepeat="True" Width="200">

<telerik:RadChart.PaletteBrushes>

<SolidColorBrush Color="#FF01a0db" />

<SolidColorBrush Color=" #FF619d3a" />

<SolidColorBrush Color="#FFc2ae30" />

<SolidColorBrush Color="#FFbf2e29" />

</telerik:RadChart.PaletteBrushes>

</telerik:RadChart>

</Grid>

In Code behind file

in page load

RadChart1.ItemsSource = new double[] { 0, 4, 5, 9 };

Thanks,

Saravanan

3 Answers, 1 is accepted

answered on 19 Jul 2011, 09:20 AM

Hello Saravanan,

Thanks for contacting us.

Here is how you can change you chart's legend background color in:
Code behind:
RadChart1.DefaultView.ChartLegend.Background = new SolidColorBrush(Colors.Brown);

Declaratively:
<telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView>
                    <telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartLegend Background="#FF0086B8" />
                    </telerik:ChartDefaultView.ChartLegend>
                </telerik:ChartDefaultView>
</telerik:RadChart.DefaultView>

In order to rearrange your bars and hide the empty value bar, you could use this approach in:
Code behind:
ChartFilterDescriptor descriptor = new ChartFilterDescriptor();
            descriptor.Operator = FilterOperator.IsGreaterThan;
            descriptor.Value = 0;
            this.RadChart1.FilterDescriptors.Add(descriptor);

Declaratively:
<telerikChart:RadChart.FilterDescriptors>
       <telerikCharting:ChartFilterDescriptor
                                              Operator="IsGreaterThan"
                                              Value="0" />
   </telerikChart:RadChart.FilterDescriptors>

More information about descriptors can be found here.

Changing the legend's position can be achieved like this in:
Code behind:
RadChart1.DefaultView.ChartLegendPosition = Dock.Left;

Declaratively:
<telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView ChartLegendPosition="Left">
                    <telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartLegend Background="#FF0086B8" />
                    </telerik:ChartDefaultView.ChartLegend>
                </telerik:ChartDefaultView>
</telerik:RadChart.DefaultView>

You are also able to change the chart's direction like this:
Code behind:
RadChart1.FlowDirection = System.Windows.FlowDirection.RightToLeft;

Declaratively:
<telerik:RadChart x:Name="RadChart1" FlowDirection="RightToLeft">

Hope that helps.

Regards,
Peshito
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

answered on 19 Jul 2011, 11:37 AM

here-is-the-output.JPG

I-want-to-do-this.JPG

Thank you very much sir for your answer Sir,but the colour of Each bar is vary,

i have to show 4 different bars with 4 different colour(blue,green,yellow,red),i acheived this by applying by

<telerik:RadChart x:Name="RadChart1" BorderThickness="0"

PaletteBrushesRepeat="True" Background="#FF1E212A"

AxisElementBrush="#FF1E212A" AxisForeground="#FF1E212A"

BorderBrush="#FF1E212A">

<telerik:RadChart.FilterDescriptors>

<chart:ChartFilterDescriptor Operator="IsGreaterThan" Value="0"></chart:ChartFilterDescriptor>

</telerik:RadChart.FilterDescriptors>

<telerik:RadChart.DefaultView>

<chart:ChartDefaultView>

<chart:ChartDefaultView.ChartLegend>

<chart:ChartLegend Background="SandyBrown"></chart:ChartLegend>

</chart:ChartDefaultView.ChartLegend>

<chart:ChartDefaultView.ChartArea>

<chart:ChartArea PaletteBrushesRepeat="False">

<chart:ChartArea.PaletteBrushes>

<SolidColorBrush Color="Blue" />

<SolidColorBrush Color="Green" />

<SolidColorBrush Color="Yellow" />

<SolidColorBrush Color="Red" />

</chart:ChartArea.PaletteBrushes>

</chart:ChartArea>

</chart:ChartDefaultView.ChartArea>

</chart:ChartDefaultView>

</telerik:RadChart.DefaultView>

</telerik:RadChart>

In My Code Behind..

RadChart1.ItemsSource = new double[] { 0, 4, 6, 8 }; //0-is blue,4- is green,6-yellow,8-red

//here i can see the blue colour bar,but i cant' see the red colour red bar,i have to hide the blue colour

because the value of blue colour is zero

here i have attached screen for your reference.i want to do like this can u please give me some idea

Thanking you,

Saravanan

answered on 21 Jul 2011, 12:46 PM

Hello Saravanan,

The red color is not displayed because when the zero bar is hidden, the colors are arranged based on the bars available. Using filter descriptor in order to center the bars and hide the zero value ones, draws only those bars who has values greater than zero.Therefore you have three bar items using the first three colors(blue, green, yellow) and there is no bar for the red one.

According to your requirements and the code you've provided, you could try changing the order of your PalleteBrushes items to:
<telerik:ChartArea.PaletteBrushes>
                                <SolidColorBrush Color="Green" />
                                <SolidColorBrush Color="Yellow" />
                                <SolidColorBrush Color="Red" />
                                <SolidColorBrush Color="Blue" />
</telerik:ChartArea.PaletteBrushes>

Regards,
Peshito
the Telerik team