line Series ToolTips

Hey Jason,

Currently struggling with Tool Tips. I am trying to have a tool tip per point and having the X and Y value on them when I hover over them.

I am using DateTimeDouble and the values are not coming through, just the object name i.e. blah.blah.DateTimeDouble.

I have tried to using chart symbols to but I can't seem to get it working.

Any input it greatly appreciated.

Cheers.

Hey Jason,

Still struggling with this one. Would you have an example of tooltip binding to a list of DateTimeDoubles? I see the tracking element in the samples project but this is not what I am looking for. I will try again today and hopefully figure out where I am messing up.

Cheers,

Hi,

It sounds like you're getting close with the object name being displayed. You should just need to add a custom converter to your binding that displays the DateTimeDouble object in the way that you want. Let me know how that goes. If you need further help, please send me the code of how you're currently setting the tooltip.

-Jason Fauchelle

Hi Jason,

Finally got it working. I have a question about area/stacked area series.

I've attached two screenshots for you. The first(88) is fine, although I can seem to get the opacity to work on the background or the area series. The second(89) screen shot is where the trouble lies.

If a add another item to the source of the area series, it seems to remove the background. I've tried this with stacked area series too. Is there any way to prevent this from happening? I will continue to work on it.

Also, is there any way to write some text on an area series? See screenshot 90 for my example.

Thanks.

Hi,

I'm not sure I fully understand the first issue. Are the rectangular areas behind the line chart produced by an Area series? At a guess, you may be having a problem if the point you're adding to the area series is not in the correct index in the collection. The series renders the points in order within the collection, so when you add a point to the collection, make sure it's inserted into the collection based on its X value, so that the collection is in order of X values. Let me know if this is not the problem.

To display text in the chart, you'll want to add a control to the ForegroundElements collection of the chart. We provide a control that might help called StripeLine. You can set the content property to display text, and set various properties to hide the line, and customize the look of the text. If this control is not flexible enough for what you need, then you can implement a custom control to display text. Such custom controls can extend Canvas and then render anything you want on them. Methods on the Chart and ChartAxis can help you convert between logical and physical (pixel) positions. The TrackingElement source code in the SampleExplorer is a good place to start implementing your own chart element controls.

Hope that helps! let me know how it goes.

-Jason Fauchelle

Apologies, I will try make it clearer what I am trying to say. So let's say I have a source of 3 items in a list for an area or stacked area series. Let's say item one goes from 1 to 20, item two goes from 5 -10 and item three goes to 12-16, this is on the x axis as they are all set to the same height on the y axis. The background colour for two and three won't be there and it will look like the screenshot I have attached. The two big 'missing' spots are supposed to be the same colour as, what looks like, three smaller areas. It's like overlapping is an issue. I have order the list every which way I can think of with not joy.

Thanks, I understand now.

You're right, the Area series does not handle overlapping. The result you're seeing is just how WPF fills the geometry shape that has been created from the data.

You could probably still use an area series, if you reorder the points along the XAxis. So 1, 5, 10, 12, 16, 20 should work. If this is not so good, you'll probably be better off by adding a StripeLine instance to the BackgroundElements of the Chart for each block area you need. Or you could create a custom element if you need more flexibility.

Let me know if you have any questions about the approach you'd like to take.

-Jason Fauchelle

Hey Jason,

I've tried everything here but creating my own element. Do you have anything I need to know or tips before I create this element?

Cheers.

Hi Klogue,

To help making a custom chart element, I would recommend taking a look at the TrackingElement source code in the SampleExplorer app. This class can be found at Demos/Charts/Features/TrackingElement.cs

The element extends Canvas which allows you to add and position any visuals you want on it easily. In the loaded event, the element walks the visual tree and obtains the Chart object that it has been added to. From the chart, you can get one or more series which has a ConvertLogicalToPhysicalPoint method which will help you to convert a logical plotting position in to the coordinates of where that point is on the Canvas.

Hope that helps. Let me know if you have questions about this.

-Jason Fauchelle

Hi Jason,

Modifying the TrackingElement worked perfectly for me. Thanks.

I have come across two issues you may have some better knowledge on.

As recommended by you before, I made styles for my StripeLines. Below is an example.

<Style x:Key="StripeLightBlue" TargetType="Rectangle"> <Setter Property="Fill" Value="LightBlue"/> <Setter Property="Opacity" Value="0.3"/> <Setter Property="Stroke" Value="Transparent"/> <Setter Property="StrokeThickness" Value="0"/> </Style>

This works great, however, when I bind the start and end values it throws an exception saying "Rectangle TargetType does not match element of Line". Can you shed any light on this?

My other issue is with the line chart. My chart has an average of 90,000 points to be plotted. This loads great when the sampler value is low, around 2000-5000, but the max value will not show until you zoom in. See images below for example. Screen(98) no max, Screen(99) has max. Max is around 8. The max value will show when I set the sampler to a high number like 20,000. Unfortunately this slows down the chart way to much. Is there a way to keep the sampler low but have the max show up without zooming?

Thanks fr your help.

Hi Klogue,

I looked into the style issue for you. The StripeLine element will generate a Line object to render stripes that have no thickness/range (StartValue and EndValue are the same, or Range is 0), or will generate a Rectangle element if it does cover a range. To work with this, simply change the TargetType of your Style to Shape which will support all cases.

For the data display, I recommend trying to set the IsMinMaxSamplingEnabled property on the series to true. This will still use your sampler options to determine the number of points to render, but the points that are rendered will be min and max points within the sampling ranges. This does affect the performance a bit as it needs to check more values, but the result is a line that better matches the 'shape' of the data. You can lower the sampling value to improve the performance and see if the chart still looks fine (Although it sounds undesirable to reduce the sample value, I'd recommend trying it out if you need to balance the performance).

Hope that helps.

-Jason Fauchelle

Hi Jason,

Both worked perfectly.

Thanks again.

Hi Klogue,

How did you add tool tips for line series without adding the symbols? We also have same problem and did not figure it out yet. Do you mind sharing some of your ideas?

Thanks a lot, Gordon

Hi Gordon,

For my line series tool tips I have ToolTipBinding="{Binding}" and symbol stlye as SymbolStyle="{StaticResource ToolTip}" then in my app.xaml I have this

<Style x:Key="ToolTip" TargetType="ms:ChartSymbol">
        <Setter Property="Margin" Value="-3,-3,3,3" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border Width="5" Height="5" CornerRadius="3" Background="Transparent" 
                            ToolTip="{Binding Converter={StaticResource DateTimeDoubleConverter}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Depending on what object you are trying to convert you will need to write a converter for it. Here's a simple DateTimeDoubleConverter.

public class DateTimeDoubleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter,
    System.Globalization.CultureInfo culture)
    {
            return ToolTip(value);
    }

    public object ConvertBack(object value, Type targetType, object parameter,
    System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }

    private string ToolTip(object value)
    {
        string toolTip = string.Empty;
        try
        {
            DateTimeDouble dtd = (DateTimeDouble)value;
            toolTip = string.Format("{0}{1}{2}{3}{4}", "Time: ", dtd.DateTime.ToString("HH:mm:ss"), "\n----------\n", "Speed: ", Math.Round(dtd.Double, 2).ToString());
            return toolTip;
        }
        catch (Exception){ }
        return toolTip;
    }
}

Hope this helps.

Hi Klogue,

Thanks a lot for posting the code.

Your way is more straight forward than mine. What I did is similar, but I treated the symbol and line as two different dataseries, i.e. scatterseries and lineseries. With the scatterseries transparent and just show the tooltips, and the line series just show line.

In your code, you only need one dataseries. Great job and thanks a lot!

I wish mindscape has this implemented for the line series without needs to use the symbol. Since we have a lot of line series in one chart (at least hundred lines), adding the symbol will make it extremely slow.

But thanks again and have a great day!!!

Gordon

Hi Gordon,

Glad to help. I do agree as I have a lot of line series on my chart too but I haven't seen that much of a performance hit yet. Maybe as my chart evolves I might.

Have a good one.