RadCartesianBarChart show series when click on legend

[Arun]

Hi,

I am using radcartesianbarchart to show multiple bar series. For example if i have category1, category2, and total these are the series collection.

If i click on legent of category1, need to show the category1 series. same for category2. If i click on total it should show all series. How we can achieve this.

Using hover property we can show fadeout of other series. But i need to draw when click on the legend only. Also please advise how to do animation for the chart series.

Thanks,

Arun

[Ivan]

Hello Arun,

You can take a look at the Live Data demo. Note that the example is in Silverlight but it share its code with the WPF version.

Is this going to suit your needs?

Regards,
Ivan
Telerik

[Arun]

Hi,

 Can you specify the example project name, so that i can identify it.

[Ivan]

Hi Arun,

Excuse me for the mistake, the name of the demo is Large Data. You can find it in the Performance section of the ChartView control demos inside the UI for WPF examples. This location applies for both demo applications - WPF and SL.

If you have further questions about this let us know.

Regards,
Ivan
Telerik

[Arun]

Hi,

 The mentioned example is not relevant to me. 

 The requirement is have to show the chart dataitems when we click on corresponding legend. Please find the attached screenshot and below details.

In the attached screenshot we can able to see 4 items(Q1, Q2, Q3, and Q4) with the series of values. Now the chart showing all 4 items in chart area. Our requirement is we need to show Q1 data items when i click on Q1 legend. Corresponding for all other legend items also.

 

How we can implement this, I hope we can write a template for legend to click and how to get the corresponding chart items and how to disable/collapse other items. 

 Please attach a example.

 

[Ivan]

Hello Arun,

We are not sure that we completely understand your case. However, we prepared a sample project for you. Can you take a look at it and let us know if this is what you are looking for?

The series are initially hidden. When you click on some of the legend items, the series bound to the legend item is being shown.

Let me know if this works for you.

Regards,
Ivan
Telerik

[Arun]

Yes. This is the expected one. Thanks lot. 

 

Also i need to hide the other legend items and show the corresponding legend item alone when we click.

[Arun]

Like highlight the current legend and disable the other legends

[Ivan]

Hello Arun,

Can you please clarify further what do you mean by setting the other legend items hidden or disabled? This way the user will be able to select a legend item and it's corresponding series only one time.

Is this the behavior that you are looking for?

If this is the case, in the project we've sent you, you can pass the legend control itself as a command parameter. Then, inside the static command handler you can extract  all the buttons from the legend template and set their Visibility property to Collapsed. Finally, you can set the Visibility property to Visible only on the button that has been clicked .

Regards,
Ivan
Telerik

[Arun]

"you can pass the legend control itself as a command parameter. Then, inside the static command handler you can extract  all the buttons from the legend template and set their Visibility property to Collapsed. Finally, you can set the Visibility property to Visible only on the button that has been clicked ."

 

Can you please provide the code snippet for this. 

[Ivan]

Hi Arun,

In xaml you can pass the legend as a CommandParameter in the following way:

<telerik:RadLegend x:Name="legend">
<telerik:RadLegend.ItemTemplate>

  <DataTemplate>

      <telerik:RadButton Content="{Binding Title}"

            Command="{x:Static local:MyCommands.HideShowCommand}"

            CommandParameter="{Binding ElementName=legend}"

            Background="{Binding MarkerFill}"

            Tag="LegendItemButton"/>

    </DataTemplate>

</telerik:RadLegend.ItemTemplate>
</telerik:RadLegend>


In the CommandExecuteHandler handler in the code behind you can introduce these changes:

private static void CommandExecuteHandler(object sender, ExecutedRoutedEventArgs e)

{
var legend = e.Parameter as RadLegend;

 var buttons = legend.ChildrenOfType<RadButton>().Where(x => x.Tag.ToString() == "LegendItemButton");

 

 RadButton button = (RadButton)sender;

 LegendItem item = button.DataContext as LegendItem;

 BarSeries series = item.Presenter as BarSeries;

 RadCartesianChart chart = series.Chart as RadCartesianChart;

 var items = chart.LegendItems;

 

 foreach (BarSeries s in chart.Series)

 {

   s.Visibility = Visibility.Collapsed;

 }

 foreach (var btn in buttons)

 {

  btn.Opacity= 0.5;

 }

 

 series.Visibility = Visibility.Visible;

 button.Opacity = 1;

}

This way when the user clicks on a legend button, the relevant series item will be highlighted and all the other legend buttons will fade.

Regards,
Ivan
Telerik

[Arun]

Thanks lot