Chart, DataSeries ToolTips, Selecting and Styling

Hi,

I have a few questions regarding Charting Data Series. I have combined them in a single thread.

1.  I have created a chart with several data series, for each dataseries I have set the DataSeries.ToolTip property, however the tooltip does not display when the mouse is placed over the data series in the chart? Do I need to need to manually create the tooltip using a ChartEvent, e.g. ChartMouseMove create a tooltip?
2. I would like to be able to select a data series on the chart and have it change style, e.g. for a line series I would like to increase the line thinkness. Is this functionality currently supported? I can see that you can select data points on a line series, however cannot select a series by itself.
3. I can find the default styles for the data series (looking in Themes\Charting.Generic.xaml or elsewhere). If I wanted to customize the styles for any of the data series, e.g. like the BarSeries in the samples, where do I start from? I attempted to extract the default style using Expression Blend, however the option was not available.

If you could answer the above it would much appreciated.

Dennis Roche
Senior Programmer
Ninja Theory

Hello Dennis

1. Yes the ToolTip property is not used by the DataSeries class. The DataSeries.ToolTip property is inherited because DataSeries extends the Control class. The easiest way to put a tool tip on a data series is to create a custom style for part of a data series. For example, say you want to have a tool tip on the line of a LineSeries. You can create a Path style and set it's ToolTip property using a setter. Then set the LineSeries.LineStyle property to be that PathStyle.

2. Unfortunatly we only support data point selection at the moment. Clicking on a line to select the whole series is planned for the future though. I have attached a sample that demonstrates a very simple way that you can implement it yourself for now. It involves creating a custom line style and using an EventSetter to attach an event handler to the MouseDown event. In the code behind we keep a boolean field to state whether the line is currently selected. In the event handler we toggle the boolean field and then change the thickness of the line based on if it is selected or not. I have also put a tool tip on the line. To run the sample, make sure to include a reference to your copy of the Mindscape.WpfElements.dll.

3. You can find useful samples for styling different parts of a chart in the ChartingGallery and ChartingSampleExplorer projects. The ChartingGallery has lots of examples for styling the different types of data series. The CustomBarPage has different examples for styling a bar series. The ChartingSampleExplorer has a page called CustomChartStyle which demonstrates how to customize the legend, title and chart axes.

Let us know how it goes
 - Jason 

Thanks Jason. I will try your suggestions today and let you know how it goes.

Hi Jason,

I was able to implement the above using your attached example as a guide. To make it work with my application where I need to dynamically generate the chart I had to make significant changes to the library.

Summary

1. Move SymbolStyle to the base class DataSeries. 
2. Added a SeriesStyle to DataSeries and commented-out the individual AreaStyle, LineStyle, BarStyle.
3. Added two abstract methods to DataSeries: CreateDefaultSeriesStyle that is called by the DataSeries constructor; and SeriesStyleChanged that is called when the SeriesStyle is changes so that you can handle anything specific, e.g. apply changes to existing elements / caches etc.
4. Added IsSelected property and SelectionChanged events to DataSeries.
5. When setting the Style for the Path objects (when building the series), set the Tag property to be the DataSeries so that I can reference properties within the style e.g. ToolTip and IsSelected etc.

Other changes to Chart

1. Added an ItemsSource dependency property that populates the Series. (I cannot think why this wasn't part of the original design?)
2. Removed AlternativeYAxes, replaced with an XAxes and YAxes observable collection. Not 100% certain that I need multiple XAxes however I implemented thinking that I could use it a second set of data labels independent of the time (e.g. think of a game where you have play time and checkpoints that want to mark).
3. Fixed several possible crashes with uninitialized variables (NullReferences) however this could have been caused by my other changes.

With your knowledge of the original design of the controls, is there any possible errors or pitfalls that my changes would introduce/cause?

Hi Dennis,

They're some great enhancements that you're looking at making and we think most of them would be great to add to the product itself. It's important to note that if you modifying the source and use it in production that we cannot provide support for your purchase as it would be too time consuming to investigate custom source code. Due to that our preference is normally to take feedback like this and look at incorporating it into our own nightly builds which provides the best outcome for everyone:

• You get the features you need
• You continue to get support from us
• Other customers get the benefit of these new capabilities
• You don't run into upgrade issues in the future (we make no promises that we won't completely change the source code which could be a real pain if you're patching in your own changes).

With that in mind, Jason is going to look into supporting most of the features you're looking at here (he has a bunch of questions first which I will leave him to ask!). Even if after working with you we do not elect to make all changes, it will still make your life easier if you're not having to make significant changes.

Hopefully we can work together to get you what you need.

Kind regards,

John-Daniel Trask

Hello Dennis

As John-Daniel mentioned, we can implement some of these features for you such as alternate X axes and full-series selection mode. This would mean that if you needed further support from us, it would be easier for us to add more feature requests and such.

1. Could you please explain what senarios you need the SymbolStyle property to be in DataSeries.

2. One thing to be aware of here is that series such as AreaSeries uses both AreaStyle and LineStyle properties. So these should not be combined into a single SeriesStyle property.

4. We can implement the full-series selection mode for you.

5. For setting the tooltips on the line, we could include support for the built in tooltip property which would allow you to still set up bindings. For creating a slected state for lines etc, we could provide a SelectedLineStyle property where you can set the style you want for the line to be selected which would then be applied to the line when the series is selected.

--

1. A single Chart control can have multiple series, and each series has it's own items source. Are you wanting an ItemsSource property on the Chart control?

2. What does your YAxes collection do? does it contain alternate Y axes as well as the standard Y axis? or is it simply the same functionality as the AlternateYAxes collection? If you do end up needing alternate X axes, then we could add this for you.

Let us know what you think.
 - Jason 

Hi Jason,

Apologies for the slow reply.

First up, as have been continuing work on my application I have rolled back some of the changes that I've made.

--

Now to answer your questions.

1. Moved the SymbolStyle to the base class as it clean/easier to use in a Factory.

public DataSeries CreateChartingSeries(ChartSeriesType type, Color color, string name)
{
	DataSeries series;
	
	if (type == ChartSeriesType.Area)
		series = new AreaSeries();
	else if (type == ChartSeriesType.Bar)
		series = new BarSeries();
	else if (type == ChartSeriesType.Spline)
		series = new SplineSeries();
	else if (type == ChartSeriesType.Scatter)
		series = new ScatterSeries();
	
	series.SeriesBrush = ColorToSolidColorBrushConverter.ToSolidColorBrush(color);
	series.Title = name;
	series.Visibility = Visibility.Visible;
	series.ToolTip = name;
	series.ItemsSource = GraphDataSet.EmptyData;
	series.Tag = type;

	var r = MasterResourceDictionary.Instance;
	series.SeriesStyle = r.TryFindResource<Style>(String.Format("MindscapeDataSeries_{0}_Style", Enum.GetName(typeof(ChartSeriesType), type)));            
	series.SymbolStyle = r.TryFindResource<Style>("MindscapeRoundChartSymbolStyle");
				
	return series;
}        

By having it on the base class I can simply set SymbolStyle and then let implementation of the series (i.e. LineSeries, AreaSeries) decide whether it wants to use it. 
This was the same reason why I created a common SeriesStyle in the base class.

2. I did notice that AreaSeries had both Line and Area styles. I have not tested this myself, however they are both Paths couldn't they use the same style? The line only needs the stroke properties (Stroke, StrokeThickness, Dash Array etc) and the Area only needs the Fill properties. 

3. If you could implement the full-series selection mode that would be great. It will be one less change that I will need to merge when updating. 

4. The selected line style can be implemented in the SeriesStyle using a trigger on the IsSelected property. I would prefer this method verse having another property to set.

5. I found that binding to the DataSeries collection caused issues, so I added an ItemsSource property that manipulates the DataSeries collection. I will relook at this change and see if it was unnecessary.

6. I reverted to using AlternateYAxis, removing the XAxes and YAxes observable collection that I added. This also means that I no longer have a requirement for more than one X axis.


Dennis Roche
Senior Programmer
Ninja Theory

Gah. The formatting of that last post is awry. Is there an edit button so I can fix it?

Hello Dennis

Thanks for these answers.

1 & 2. I can see how these changes make it easier to use in a factory. We don't plan to make these changes at our end though.

3. We will let you know when this becomes available.

4. I'll put this into consideration.

 - Jason

Hello Dennis

The whole-series selection feature will be available for download through the nightly builds from tomorrow the 23rd of September.

All data series will now have an IsSelected property. This is currently supported by: LineSeries, AreaSeries, SplineSeries, SplineAreaSeries, StackedLineSeries, StackedAreaSeries, StackedSplineSeries and StackedSplineAreaSeries.

Clicking on a line or area will toggle the IsSelected property. In the style, you can use a DataTrigger with Binding="{Binding IsSelected}" to change the visual of the selection state.

Let us know if there is any more functionality you require here.
 - Jason 

Thanks Jason. I do have a further questions, however I will create a new thread.