Oxyplot : Using Datagrid for tooltip

Oxyplot uses Tracker Controls for displaying tooltip. You could extend the display by Customizing the Default Tracker control. In this article, we will look deeper into that Tracker Control and aim to display a Grid in the Tracker Control.

For sake of example, let us assume a Fruit Seller, who wants to plot his sales per day on a Line Series. To begin with, let us create some random data to emulate the sales.

private enum eFruits
{
Apple,
Banana,
Mango,
Jackfruit
}
public IEnumerable<Fruit> Generate()
{
var random = new Random();
return Enumerable.Range(1, 10)
.SelectMany(x =>
{
return ((eFruits[])Enum.GetValues(typeof(eFruits))).Select(f =>
new Fruit
{
Name = f.ToString(),
ItemsSold = random.Next(0, 100),
Date = DateTime.Now.AddDays(x)
});
});
}

In his first attempt, he plots the Line Series, grouping the data by Date on which items where sold.

private void CreatePlotModel(IEnumerable<Fruit> totalSalesDetails)
{
var salesGrouping = totalSalesDetails.GroupBy(x => x.Date);
var yAxis = new LinearAxis
{
Position = AxisPosition.Left
};
var xAxis = new DateTimeAxis
{
Position = AxisPosition.Bottom,
Minimum = DateTimeAxis.ToDouble(salesGrouping.Min(x => x.Key)),
Maximum = DateTimeAxis.ToDouble(salesGrouping.Max(x => x.Key)),
};
DataPlotModel.Axes.Add(yAxis);
DataPlotModel.Axes.Add(xAxis);

var lineSeries = new LineSeries
{
MarkerFill = OxyColors.Blue,
MarkerType = MarkerType.Circle,
TrackerFormatString = "{0}\n{1}: {2:dd.MM.yy}\n{3}: {4:0.###}"
};
lineSeries.Points.AddRange(salesGrouping.Select(x => new DataPoint(DateTimeAxis.ToDouble(x.Key), x.Sum(c => c.ItemsSold))));
DataPlotModel.Series.Add(lineSeries);
}

XAML Part

<oxy:PlotView Model="{Binding DataPlotModel}"/>

This gave him his desired out as the following.

Initial Design

However, this left a lot to be desired. Currently the tooltip would display total sales per day. He knew he could decifer that from the chart itself and hence wanted to make use of tooltip for something more useful. He decided to display the details of sales, ie, number of each fruit sold during the day in the tooltip. This would give him a better insight into the sales.

Grid inside the Tooltip

While he knew the Oxyplot’s default Tracker control could be customized, he soon realized this wasn’t as straightward as he assumed it to be. As always, the problem lies in the details.

<oxy:PlotView Model="{Binding DataPlotModel}">
<oxy:PlotView.DefaultTrackerTemplate>
<ControlTemplate>
<oxy:TrackerControl>
<DataGrid ItemsSource="{Binding}"/>
</oxy:TrackerControl>
</ControlTemplate>
</oxy:PlotView.DefaultTrackerTemplate>
</oxy:PlotView>

The TrackerControl accepted a TrackerHitResult as its DataContext, displaying the TrackerHitResult.Text as tooltip, and there seemed no direct way for him to bind a collection of items to the TrackerControl if he was to customize it to include a DataGrid.

A bit of googling and with a tip from his mentor, he soon realized that there was a way instead. What if he can write a Converter that reads the required information from TrackerHitResult and returns a collection for DataGrid to bind to.

For this, he needs to extend the DataPoint so that it would contain the sub-collection information. This would ensure that the same would be available in the DataContext (TrackerHitResult)

public class ExtendedDataPoint : IDataPointProvider
{
public DateTime Date { get; set; }
public IEnumerable<Fruit> ItemsSold { get; set; }

public DataPoint GetDataPoint()
{
return new DataPoint(DateTimeAxis.ToDouble(Date), ItemsSold.Sum(x=>x.ItemsSold));
}
}

He can now rewrite his CreatePlotModel method to use the ExtendedDataPoint for adding points to the Line Series.

var lineSeries = new LineSeries
{
MarkerFill = OxyColors.Blue,
MarkerType = MarkerType.Circle,
};

lineSeries.ItemsSource = salesGrouping.Select(x => new ExtendedDataPoint
{
Date = x.Key.Date,
ItemsSold = x.ToList()
});

As you can notice, he has removed the TrackerFormatString as well, as he would not require it any longer. The next step would be to write the Converter required for transforming the TrackerHitResult to IEnumerable<Fruit>.

public class TrackerHitResultConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if(value is TrackerHitResult data)
{
return (data.Item as ExtendedDataPoint).ItemsSold;
}
return null;
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}

Since he had already defined his required sub-collection as a part of ExtendedDataPoint, the role of TrackerHitResultConverter became a lot easier. The last piece in the puzzle was to modify the Xaml to use the Converter.

<oxy:PlotView Model="{Binding DataPlotModel}">
<oxy:PlotView.DefaultTrackerTemplate>
<ControlTemplate>
<oxy:TrackerControl Position="{Binding Position}" Background="Transparent" BorderBrush="Transparent">
<DataGrid HeadersVisibility="None" ItemsSource="{Binding Converter={StaticResource TrackerHitResultConverter}}" AutoGenerateColumns="False" CanUserAddRows="False" CanUserDeleteRows="False">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Date,StringFormat=d}" Header="Date" />
<DataGridTextColumn Binding="{Binding Name}" Header="Fruit"/>
<DataGridTextColumn Binding="{Binding ItemsSold}" Header="Items Sold" />
</DataGrid.Columns>
</DataGrid>
</oxy:TrackerControl>
</ControlTemplate>
</oxy:PlotView.DefaultTrackerTemplate>
</oxy:PlotView>

With that in place, he was ready to Hit F5 and vola, his tooltip was ready.

Final output

Entire source code discussed in this article is available in my Github.

Custom Tooltip in Oxyplot

Working with OxyPlot sometimes throw these interesting problems, mainly due to lack of documentation. One of the recent challenges involved creating a custom tooltip, which at the hindsight, was pretty straightforward – only if the developers had continued their effort in completing the documentation.

 

Alright back to out problem. Oxyplot, by default provides a neat little tooltip for the Data Points in the graph. On most occasions, these are more than enough. On others, you need to tweak the tooltip a bit more to include additional information.

 

If you browse through the Series Class (LineSeries, BarSeries etc), you would notice it has a property named TrackerFormatString. This is the key to unlocking the tooltip. For sake of example, we will examine the LineSeries in this post. By default, following is the format of TrackerFormatString

 

"{0}\n{1}: {2:0.###}\n{3}: {4:0.###}"

 

Where
{0} = Title of Series
{1} = Title of X-Axis
{2} = X Value
{3} = Title of Y-Axis
{4} = Y Value

Some of the basic customization can happen within the TrackerFormatString property itself, say, suppose you want format the values to display only 2 decimal places. This again would be sufficient to cover a lot of cases.

However, at times, you might be interested to display additional information. Unfortunately the DataPoint class has only two properties, which you could use for loading your data. This cripples you desire to add a third value associated with the DataPoint in addition to X & Y, especially if you notice that the DataPoint is a sealed class and Series.Points.Points.AddRange accepts only DataPoints as parameter.

Thankfully, Oxyplot developers has left another door open while closing the DataPoint class. It allows you to assign the Points to Series using the Series.ItemSource Property, which accepts an IEnumerable. The only criteria for your IEnumerable is to the type needs to implement IDataPointProvider.
Let’s go ahead and implement our demo class.

 

public class CustomDataPoint : IDataPointProvider
{
  public double X { get; set; }
  public double Y { get; set; }
  public string Description { get; set; }
  public DataPoint GetDataPoint() => new DataPoint(X, Y);

  public CustomDataPoint(double x,double y,string description)
  {
    X = x;
    Y = y;
    Description = description;
  }
}

var points = new CustomDataPoint[]
{
  new CustomDataPoint(5,12,"Info 1"),
  new CustomDataPoint(6,10,"Info 2"),
  new CustomDataPoint(7,9,"Info 3"),
  new CustomDataPoint(8,13,"Info 4"),
  new CustomDataPoint(9,14,"Info 5"),
  new CustomDataPoint(10,10,"Info 6")
};

And now we will use the ItemSource property to assign the points to Series. We will also use the TrackerFormatString to format our tooltip to display additional information.

var seriesVisible = new OxyPlot.Series.LineSeries();
seriesVisible.ItemsSource = points;
seriesVisible.TrackerFormatString = "X={2},\nY={4},\nAdditionalInfo={Description}";

That’s it and we have our additional information displayed in tooltip. Go and run your application

OxyPlotWithCustomTooltip