Customize the TrackBall popup menu

6 posts, 0 answers
  1. David
    David avatar
    22 posts
    Member since:
    Oct 2012

    Posted 12 Jan 2013 Link to this post

    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!
  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 16 Jan 2013 Link to this post

    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.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Gaurav
    Gaurav avatar
    2 posts
    Member since:
    May 2013

    Posted 23 May 2013 Link to this post

     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;
                }
            }
  5. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 28 May 2013 Link to this post

    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.

  6. Gaurav
    Gaurav avatar
    2 posts
    Member since:
    May 2013

    Posted 28 May 2013 Link to this post

    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???
  7. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 31 May 2013 Link to this post

    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.

Back to Top
UI for WPF is Visual Studio 2017 Ready