[Solved] Put x-value into tooltip

[John Davis]

How can we display the x value in a tooltip? 

We followed this telerik example to integrate the silverlight chart into an asp.net application: 
http://www.telerik.com/ClientsFiles/123547_chartintegrationapplication.zip
We are using a web service as the data source. the web service calls a stored procedure that delivers the graph data. 

We want a tooltip for each portion of the bar in a stacked bar chart
that will display the x value (We would rather not display the x values on the x axis because it clutters the chart).

The y-value displays OK.  But the x-value displays "0" when we use the following code:

 private void ChartItemToolTipOpening(ItemToolTip2D tooltip, ItemToolTipEventArgs args)
    {
        //tooltip.Content = args.DataPoint.YValue.ToString("{0:C}");
        tooltip.Content = tooltip.Content + "," + args.DataPoint.XValue.ToString();
    }

[Vladimir Milev]

Hello John Davis,

This is the correct approach indeed. The problem is that in this example the DataPoint does not have an XValue since it is not databound. If you databind your datapoint's XValues you will be able to display them in the above fashion.

All the best,
Vladimir Milev

[John Davis]

Vladimir:
1. Can you refer me to an example of this data binding?  Right now we get the x-axis values as follows:

 

private void proxy_GetChartList_forDisplayCompleted(object sender, GetChartList_forDisplayCompletedEventArgs e)

 

{

 

 

var result = e.Result;

 

chartReport.ItemsSource = e.Result;

 

 

var proxy = e.UserState as ChartDataWebServiceSoapClient;

 

 

 

if (proxy == null) return;

 

proxy.CloseCompleted += proxy_CloseCompleted;

proxy.CloseAsync();

 

 

for (int i = 0; i < result.Count; i++)

 

{

 

 

chartReport.DefaultView.ChartArea.AxisX.TickPoints[i].Label = result[i].SKU;

 

 

}

 

}

2. How can we display x-axis labels vertically?  Or, is there another way to solve the problem that there is not enough space under bars in a bar chart to display the labels?

3. How can we solve this problem:  The value of the tooltip displays correctly for bars having positive value, but it displays as 0 for bars having a negative value.

 

 

private void ChartItemToolTipOpening(ItemToolTip2D tooltip, ItemToolTipEventArgs args)

 

{

 

tooltip.Content = args.DataPoint.YValue.ToString(); //displays "0" for bars having negative values

 

 

//tooltip.Content = args.DataPoint.XValue.ToString() + "," + tooltip.Content;  // this is what we want but it displays "0" for all x values

 

 

 

 

 

}

 

[Vladimir Milev]

Hello John Davis,

1) I have attached a project which shows how to display both XValue and YValue in the item tooltip. If you are using RadChart Q1 ServicePack1 there is an even better way to do it. You can simply set the tooltip format:

barSeries.Definition.ToolTipFormat = "YValue: #Y XValue: #X";

2) Unfortunately this is not possible to do right now :(. Our dev team is aware of this problem and are working on a solution for Q2.

3) We cannot reproduce this problem. Please, change the code in our sample to assign negative values to the DataPoint and you can see that it displays them correctly. Can you provide an example where this is not working?

Greetings,
Vladimir Milev

[John Davis]

Vladmir:

Thank you for this Visual Studio project. Tool tips work OK in this project.  Later I will try in a
Silverlight project I am developing and will report whether tooltips work there.

But now I have different questions about your example project.  When I modify the code as shown below:

1. How can we get x-axis to display 0,1,2,3 ... as we have in the dataPoints in the code?
2. How can we get bars having positive values to start at y value zero and go upward?
3. How can we get bars having negative values to start at y value zero and go downward?

Steve

        public Page()
        {
            InitializeComponent();
            RadChart1.DefaultView.ChartArea.ItemToolTipOpening += new ItemToolTipEventHandler(ChartArea_ItemToolTipOpening);

            DataSeries barSeries = new DataSeries();
            barSeries.Definition = new BarSeriesDefinition();
            barSeries.Definition.ShowItemToolTips = true;

            DataPoint dataPoint;
            for (int i = 0; i < 5; i++)
            {
                dataPoint = new DataPoint();
                dataPoint.XValue = i;
                dataPoint.YValue = i * 5;

                barSeries.Add(dataPoint);
            }
            for (int i = 6; i < 11; i++)
            {
                dataPoint = new DataPoint();
                dataPoint.XValue = i;
                dataPoint.YValue = -i * 5;

                barSeries.Add(dataPoint);
            }

            RadChart1.DefaultView.ChartArea.DataSeries.Add(barSeries);
        }

[Giuseppe]

Hi John,

Onto your questions:

• The current version of the control does not support what we call "strict mode" for the XAxis (i.e. the control will not respect the XValues passed to it as data but will merely increment the previous axis item value by one in order to calculate the value for the next axis item). If you would like to display some custom axis labels with the current version, you will need to modify the actual axis tick point labels (and not the underlying XValues) like this:

DataSeries barSeries = new DataSeries();
barSeries.Definition = new BarSeriesDefinition();
barSeries.Definition.ShowItemToolTips = true;

DataPoint dataPoint;
for (int i = 0; i < 5; i++)
{
    dataPoint = new DataPoint();
    dataPoint.XValue = i;
    dataPoint.YValue = i * 5;

    barSeries.Add(dataPoint);
}
for (int i = 6; i < 11; i++)
{
    dataPoint = new DataPoint();
    dataPoint.XValue = i;
    dataPoint.YValue = -i * 5;

    barSeries.Add(dataPoint);
}

RadChart1.DefaultView.ChartArea.DataSeries.Add(barSeries);

foreach (TickPoint tickPoint in RadChart1.DefaultView.ChartArea.AxisX.TickPoints)
{
    tickPoint.Label = "CustomText";
}

We will do our best to address this limitation for the Q2 release in July.

• Unfortunately due to the limited support for negative values, when you are mixing positive and negative values as in your scenario, you cannot achieve the desired appearance for the positive bars to go upward from the origin as well.We will be able to support this scenario properly once we add support for negative bars going downward as discussed below.
• This functionality is not supported at the moment but we are considering it for one of the future releases this year (most likely Q3).

Best wishes,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[John Davis]

Manuel,
Thank you for your helpful reply.

You said the following features for stacked bar may be in a future release:
Bars having positive values start at y value zero and go upward, but bars having negative values start at y value zero and go downward.

I need this for an inventory chart, where negative values indicate back order. For example I have OnHand, OnOrder, WorkInProcess.  The OnHand is always the first series.  It can have positive or negative values.  All other bars have positive values only.  So the display always shows the OnHand bar at the bottom of the stacked bars.  It would be best that this OnHand bar,when negative, starts at y-value zero and extends downward. This is not possible with the current chart version, but can you think of another good way to indicate to the user that this value is negative?  It would not be OK to display this bar as positive, even if we displayed a "-" for it, because it would cause the total height of the bars to be misleading.  e.g. if OnHand= - 5, OnOrder=8, WorkinProcess=7, then the top of the stacked bars should be at 10. Whereas if we displayed the OnHand as if it were positive, the top of the stacked bars would be 20.

Steve

For now, can you think of another way to indicate that one

[Vladimir Milev]

Hello John Davis,

You migh want to consider something like our MVVM demo. The basic premise there is that you can govern the color of the bar item according to the data passed. You can create your own criteria in a similar way and color bars below 0 in a different color for example. 

Kind regards,
Vladimir Milev