Tooltips for each point in RadChart

[Subrato]

Hello -- I am trying to duplicate what you see in the following link.

http://www.google.com/finance?client=ob&q=NASDAQ:GOOG


I would like to do a mouse over all the point and show the data someplace say in the corner of the silverlight control and of course as tooltip. 

I would also like to make it faster as the time taken right now to do a mouse over and then seeing the tooltip is not immediate.

Is there a way to handle this situation.

Thanks,

Subrato

Is someone from Telerik answer this question as I am in real urgent need to resolve this issue.

Also I need to add a label that will display more information on mouse over as seen from the link above. I need it show Volume, Price & Date in the label as I move over the mouse for each point in the chart.

[Evgenia]

Hi Subrato,

To see the values of all those properties on mouse over I suggest that you use our Tooltips where you can you can construct more complex tooltips combining several properties using the #DATAITEM token as described in our help topic. However you are not able to change the default position of the Tooltip Label.

Regards,
Evgenia
the Telerik team

[Subrato]

Hello Evgenia -- I had seen that article before. What I am trying to achieve here is showing the tooltip info (along with other info) in a label that is placed inside Silverlight control but not in the map. So lets say I place a label outside the chart control, I would like to display the information in that label as I move from point to point in the chart.

Subrato

[Evgenia]

Hello Subrato,

You can handle the ItemToolTipOpening event of the ChartArea and set your Label's Content to the Tooltip's content. To get the X and Y values of the cursor's current position for example - the ConvertPhysicalUnitsToData method is used as it converts the physical units in axes coordinates:

Copy Code

void ItemToolTipOpening(ItemToolTip2D tooltip, ItemToolTipEventArgs e)

{
ChartArea chartArea = RadChart1.DefaultView.ChartArea;

Point physical = e.MouseData.GetPosition(RadChart1.DefaultView.ChartArea.ChildrenOfType<ClipPanel>()[0] as Panel);

double x = chartArea.AxisX.ConvertPhysicalUnitsToData(physical.X);

double y = chartArea.AxisY.ConvertPhysicalUnitsToData(physical.Y);

tooltip.Content = string.Format("X: {0:0.0} Y={1:0.0}", x, y);
label1.Content = tooltip.Content;
}

For more information about the ItemTooltipOpening event - refer to our help topic.

Best wishes, Evgenia
the Telerik team

[Caleb]

Subrato,

I have found away to implement the functionality you described and thought I would share the solution. Originally I was using the built in mouse- over tooltips, but if your RadChart contains more than a few points, those tooltips destroy performance, so I decided to implement the way you describe.To start, we will first need to get the mouse location here is a helpful link for obtaining mouse position in PlotArea of Chart:

http://www.telerik.com/help/silverlight/radchart-howto-create-location-crosshair-for-radchart.html

This shows how the position of the mouse can be obtained within the ChartArea, and more specifically, the PlotArea, and converted to it's corresponding X and Y Axis values. This can be done directly in the code behind by setting the MouseMove event property of the ChartArea, or using the MVVM pattern by including this interaction request in the chart area:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseMove">
        <ei:CallMethodAction MethodName="OnChartAreaMouseMove" TargetObject="{Binding}" />
    </i:EventTrigger>
</i:Interaction.Triggers>

(be sure to include these namespaces)
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

The next step is your mouse move event handling method (called OnChartAreaMouseMove in my example, or PlotArea_MouseMove in the example from the above link). The idea of this method is to get the  X and Y values of the current mouse position within the PlotArea the correspond to the physical pixel location of the cursor.

Note: Make sure the functionality of this step in the example works correctly.

var plotAreaPanel = RadChart1.DefaultView.ChartArea.ChildrenOfType<ClipPanel>().FirstOrDefault();

The approach is a little different for MVVM pattern, but the main point is to ensure that the position is relative to the actual PlotArea (a ClipPanel) and not to the ChartArea itself, otherwise the coordinates can be skewed by things like Axis titles and label formats. In order to achieve this functionality in MVVM, my OnChartAreaMouseMove in my ViewModel looks like this:

using Telerik.Windows.Controls.Charting;

public void OnChartAreaMouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
    // Sender object is the ChartArea itself
    var area = sender as ChartArea;

    // Make sure PlotArea exists
    if (area.ChildrenOfType<ClipPanel>().Count > 0)
    {
        // We need to get the plot area panel from the ChartArea for accurate location
        var plotAreaPanel = area.ChildrenOfType<ClipPanel>()[0] as ClipPanel;
        var position = e.GetPosition(plotAreaPanel);

        var currentXAxisValue = area.AxisX.ConvertPhysicalUnitsToData(position.X);

        .....................................

There are a couple of options available now that you have the corresponding axes values. In my situation, I only needed the X axis value. I used this value as the key for the dictionary that held the values the Chart's ItemsSource was bound to. With the corresponding value obtained from the dictionary, I was able to add a tool bar over the chart containing a series text blocks. I then bound the Text property of those text blocks to be whatever properties from the value object obtained from the dictionary. So the idea behind the code, using the Google chart example you posted, in semi-pseduo C# code:

---Type of object chart is displaying

class DataObject
{
    public double Price {get;set;}
    public double Volume {get;set;}
    etc..
}

---ViewModel has a collection like these...

Dictionary<DateTime, DataObject> _exampleDictionary;
List<DataObject> _chartData;

---And a property like this
public DataObject CurrentDataObject
{
    get
    {
        return _currentDataObject;
    }
    set
    {
        _currentDataObject = value;
        OnPropertyChanged("CurrentDataObject");
    }
}

---Also within the View model the chart's data, as a list, observable collection, or whatever you fancy, this list is the same as the Dictionary's values

public List<DataObject> ChartData
{
    get
    {
        return _chartData;
    }
    set
    {
        _chartData= value;
        OnPropertyChanged("ChartData");
    }
}

---When OnChartAreaMouseMove() is called and the X axis value is obtained (currentXAxisValue), get the corresponding DataObject value from the dictionary:

DataObject d;
if( _exampleDictionary.TryGetValue( currentXAxisValue) ) // you may need to cast this variable depending on where you do this
{
    CurrentDataObject = d;
}

---Chart definition in View

<telerik:RadChart x:Name="ExampleChart"  ItemsSource="{Binding ChartData}" />

-Then somewhere in View you have controls like:
<TextBlock Text="Volume:" />
<TextBlock Text="{Binding CurrentDataObject.Volume}" />
etc....

Should be enough to get the basic idea across. Just make sure dictionary values match up with the values in the ChartData list<> the Chart's ItemsSource is bound to. The solution could vary depending on your represantion of data in your ViewModel and type of collection, as well as the values being plotted for the X Axis. One important note that comes into play if your X axis values are Dates or DateTime.... RadChart uses OLE time to represent Dates/Times for Axis values, so make sure you do approriate DateTime.FromOADate(value), or similar to obtain the correct date, otherwise you will obtain seemingly random numbers.


Hope this helps as it seems to be a recurring problem. Let me know if there are any questions.

Caleb Cartwright