Show current point after mouce hover

[Rinno]

I have RadChartView that receive real time data and i want to add the option after the mouse is over specific point to see it's value so i added this property:

radChartView1.ShowTrackBall = true;

And now i can see an empty rectangle with no text (see my attach file).
Another thing that i have notice is now after right click on my chart i have an new option called Palette that change my series color and in this case i can see the point value inside the rectangle.

Now i have 3 questions:

1. What is this new option ?
2. how can i see my point value without change this color ?
3. is it possible to add some text inside this rectangle ?

Thanks !

[Dess | Tech Support Engineer, Principal]

Hello Rinno,

Thank you for writing.

I am not sure how exactly you re-populate the RadChartView with data. However, please refer to the following code snippet, demonstrating a sample approach. The chart data is refreshed at each second and the track ball displays the respective value in a specific format defined in the ChartTrackballController.TextNeeded event:

public Form1()
{
    InitializeComponent();

    PopulateChart();
    this.timer1.Start();
}

Random rand = new Random();

private void PopulateChart()
{
    this.radChartView1.Series.Clear();
    this.radChartView1.Axes.Clear();
    LineSeries lineSeries = new LineSeries();
    lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(0, 30), "Jan"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(0, 30), "Apr"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(0, 30), "Jul"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(0, 30), "Oct"));
    this.radChartView1.Series.Add(lineSeries);

    LineSeries lineSeries2 = new LineSeries();
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(rand.Next(0, 30), "Jan"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(rand.Next(0, 30), "Apr"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(rand.Next(0, 30), "Jul"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(rand.Next(0, 30), "Oct"));
    this.radChartView1.Series.Add(lineSeries2);
}

private void timer1_Tick(object sender, EventArgs e)
{
    UnwireEvents();

    this.radChartView1.ShowTrackBall = false;

    PopulateChart();

    this.radChartView1.ShowTrackBall = true;
    WireEvents();
}

private void WireEvents()
{
    ChartTrackballController trackBall;
    foreach (var c in this.radChartView1.Controllers)
    {
        trackBall = c as ChartTrackballController;
        if (trackBall != null)
        {
            trackBall.TextNeeded += trackBall_TextNeeded;
            break;
        }
    }
}

private void UnwireEvents()
{
    ChartTrackballController trackBall;
    foreach (var c in this.radChartView1.Controllers)
    {
        trackBall = c as ChartTrackballController;
        if (trackBall != null)
        {
            trackBall.TextNeeded -= trackBall_TextNeeded;
            break;
        }
    }
}

private void trackBall_TextNeeded(object sender, TextNeededEventArgs e)
{
    StringBuilder sb = new StringBuilder();
    foreach (DataPointInfo p in e.Points)
    {
        CategoricalDataPoint cdp = p.DataPoint as CategoricalDataPoint;
        if (cdp != null)
        {
            sb.AppendLine("Value:" + cdp.Value + "");
        }
    }
    e.Text = sb.ToString();
}

As to the "Palette" option, please refer to our Palettes help article which is quite useful on this topic.

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

 

 

[Rinno]

I am populate the points using Timer:

List<double> chartPoints = new List<double>();
AreaSeries series = new AreaSeries();
radChartView1.Series.Add(series);
ChartTrackballController trackball = new ChartTrackballController();
 radChartView1.Controllers.Add(trackball);
 radChartView1.AreaType = ChartAreaType.Cartesian;
 radChartView1.ShowTrackBall = true;


        private void timerStatistics_Tick(object sender, EventArgs e)
        {
            chartPoints.Add(MyValue);
            series.DataPoints.Add(MyValue));
            if (series.DataPoints.Count > 300)
            {
                series.DataPoints.RemoveAt(0);
                chartPoints.RemoveAt(0);
            }
            linearAxis.Minimum = -50;
        }

[Dess | Tech Support Engineer, Principal]

Hello Rinno,

Thank you for writing back.

Similar to my code snippet, you are using the RadChartView in unbound mode. On timer tick the RadChartView is repopulated. Note that before adding/removing data points it is necessary to set the ShowTrackBall property to false and after the populate process is completed you should set the ShowTrackBall property back to true. Thus, you will avoid unexpected behavior when the track ball is referring to a point that is already removed from the RadChartView.

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Desislava
Telerik