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

Customize the TrackBall popup menu

5 Answers 452 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 12 Jan 2013, 02:21 PM
Hi,

I'd like to be able to customize the data in the TrackBall popup.  I see there's an example of how to customize the header (http://www.telerik.com/help/silverlight/radchartview-features-trackball.html), but I'd like to be able to customize the Value label to say Counts and Category to say Energy.  Also I'd like to do use a converter, or some math on the values for the Value and Category.  How can this be done?

Thanks!

5 Answers, 1 is accepted

Sort by
0
Petar Kirov
Telerik team
answered on 16 Jan 2013, 03:26 PM
Hi David,

The chart series expose a TrackBallInfoTemplate through which you can customize the series specific information in the Track ball information panel. Here is an example: 
<telerik:RadCartesianChart>           
  <telerik:RadCartesianChart.Resources>
    <sys:String x:Key="categoryFormat">Category: {0}</sys:String>
    <sys:String x:Key="valueFormat">Value: {0}</sys:String>
     
    <DataTemplate x:Key="seriesTrackBallInfoTemplate">
      <StackPanel Orientation="Vertical">
        <TextBlock Text="{Binding Path=DataPoint.Category,
                StringFormat={StaticResource categoryFormat}}"/>
        <TextBlock Text="{Binding Path=DataPoint.Value,
                StringFormat={StaticResource valueFormat}}"/>
      </StackPanel>
    </DataTemplate>
  </telerik:RadCartesianChart.Resources>
           
  <telerik:RadCartesianChart.Series>
    <telerik:LineSeries
TrackBallInfoTemplate="{StaticResource seriesTrackBallInfoTemplate}"/>
  </telerik:RadCartesianChart.Series>

I hope this helps.
 
Best regards,
Petar Kirov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Gaurav
Top achievements
Rank 1
answered on 23 May 2013, 11:10 AM
 What i am doing i am dynamically creating multiple area series for a group of location on specific date range.Now as multiple stacked area series has formed, now i have to show some customize collection from data base on track ball on each date instead of the default value and category property...Architecture we are using is MVVM and front end is WPF.
Please can u suggests how to add customize data template in area series TrackBallInfoTemplate property on code behind.My sample code that i have written in view model:-


 private static void OnSeriesTypeChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            RadCartesianChart chart = sender as RadCartesianChart;

            if (chart == null)
                return;

            chart.Series.Clear();
            QueryableCollectionView qcv = new QueryableCollectionView(DetailsModel.lstItems);
            qcv.GroupDescriptors.Add(new GroupDescriptor() { Member = "LocationCode" });

            foreach (var group in qcv.Groups)
            {
                var AreaSeries = new AreaSeries();
                AreaSeries.ValueBinding = new PropertyNameDataPointBinding("Qunatity");
                AreaSeries.CategoryBinding = new PropertyNameDataPointBinding("TransactionDate");
                AreaSeries.SetBinding(CategoricalSeries.ShowLabelsProperty, new Binding("ShowLabels"));
                AreaSeries.ItemsSource = group as IEnumerable;
                AreaSeries.CombineMode = ChartSeriesCombineMode.Stack;
                AreaSeries.LegendSettings = new SeriesLegendSettings();
                //AreaSeries.TrackBallInfoTemplate ???please sugget how to set this

                AreaSeries.LegendSettings.SetValue(SeriesLegendSettings.TitleProperty, Convert.ToString((((Telerik.Windows.Data.QueryableCollectionViewGroup)(group))).Key));
                chart.Series.Add(AreaSeries);
            }
            chart.HorizontalAxis.Title = "TransactionDate";
            chart.VerticalAxis.Title = "Quantity";

            CategoricalAxis categoricalAxis = chart.HorizontalAxis as CategoricalAxis;

            if (categoricalAxis != null)
            {
                AxisPlotMode plotMode = AxisPlotMode.BetweenTicks;
                plotMode = AxisPlotMode.OnTicks;
                categoricalAxis.PlotMode = plotMode;
            }
        }
0
Evgenia
Telerik team
answered on 28 May 2013, 11:01 AM
Hello Gaurav,

  You can either have your track ball template declared in the user control's resources and find them from code behind so you can set them to the series:

var tbiTemplate = this.Resources["TrackBallInfoTemplate"as DataTemplate;
this.cartesianChart.Series[0].TrackBallInfoTemplate = tbiTemplate;


Contrary you can have the data template parsed in C# code:

string dataTemplateString = @"     
    <DataTemplate x:Key="seriesTrackBallInfoTemplate">
      <StackPanel Orientation="Vertical">
        <TextBlock Text="{Binding Path=DataPoint.Category, 
                StringFormat='{}{0} Category}"/>
        <TextBlock Text="{Binding Path=DataPoint.Value, 
                StringFormat='{}{0} Value}">
      </StackPanel>
    </DataTemplate>";
   
var tbiTemplate = System.Windows.Markup.XamlReader.Load(dataTemplateString) as DataTemplate;

Regards,

Evgenia
Telerik

 

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Gaurav
Top achievements
Rank 1
answered on 29 May 2013, 02:52 AM
Thanks for the previous reply...Done with the same ..But now the customized track ball info i am showing contains lot of data and the same over lap with he chart.Instead of showing this trackball info template at the top of the chat is there any way to show the same at bottom of the chart.In summary can we change the location from track ball info from top t bottom???
0
Evgenia
Telerik team
answered on 31 May 2013, 07:54 AM
Hi Gaurav,

 I believe that the following approach will meet your requirements - the trackball position might follow the mouse cursor. Whenever you move the mouse upward or downward, the trackball will move accordingly so that it does not hide your series. 

You may find attached a sample that demonstrates what I mean. Let me know how it works.

Regards,
Evgenia
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
ChartView
Asked by
David
Top achievements
Rank 1
Answers by
Petar Kirov
Telerik team
Gaurav
Top achievements
Rank 1
Evgenia
Telerik team
Share this question
or