Highlight series when mouse is over item in legend

[TestAlways]

Occasionally my app users will have a large number of bar-series in a chart, I've seen something in the order of 20. (While I would run the illustrations differently, I'm not in the business of telling them how to run their business--for some of them, this is "critical").

In any case, I would like to be able to highlight a series when the mouse moves over the name in the legend. Is anything like that possible?

Thank you,
Ed Dressel

[Yeray]

Hi Ed,

You could use OnMouseMove event doing something as following (or OnClickLegend):

Code: Select all

uses series;

var AntClickedIndex: Integer;

procedure TForm1.FormCreate(Sender: TObject);
var i: Integer;
begin
  Chart1.View3D:=false;

  for i:=0 to 19 do
    with Chart1.AddSeries(TBarSeries.Create(self)) do
    begin
      FillSampleValues();
      Marks.Visible:=false;
      Color:=OperaPalette[i mod 12];
    end;

  AntClickedIndex:=-1;
end;

procedure TForm1.Chart1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
var ClickedIndex: Integer;
begin
  ClickedIndex:=Chart1.Legend.Clicked(X,Y);

  if (ClickedIndex > -1) then
  begin
    if (AntClickedIndex <> ClickedIndex) then
    begin
      if (AntClickedIndex > -1) then
      begin
        Chart1[AntClickedIndex].Pen.Width:=1;
        Chart1[AntClickedIndex].Pen.Color:=clBlack;
      end;
      Chart1[ClickedIndex].Pen.Width:=2;
      Chart1[ClickedIndex].Pen.Color:=clYellow;
      AntClickedIndex:=ClickedIndex;
    end;
  end
  else
  begin
    if (AntClickedIndex > -1) then
    begin
      Chart1[AntClickedIndex].Pen.Width:=1;
      Chart1[AntClickedIndex].Pen.Color:=clBlack;
    end;
    AntClickedIndex:=-1;
  end;
end;

[TestAlways]

This is very cool. I didn't ask the question for a long time because I didn't think it was close to possible. Thank you!

You have the following LOC in your demo:

Code: Select all

    Chart1.View3D:=false;

Is this an indication that it is not supported in 3D? (I can get it to work in a demo, but it looks like changing the pen in my app with 3D on causes other series lines to be drawn with the highlighting).

Ed Dressel

[Yeray]

Hi Ed,

It works too in 3D, simply remove that sentence and you'll see it.
Excuse me if I confused you, it's only that I use to check the things first in 2D...

[TestAlways]

Huh... in a demo I created, it works fine. I put it in my application, and strange things occur. Here is an example of the chart in my software with only one series with the pen visible and set to yellow:



You can see that more than one series is highlighted with yellow, but only Social Security should be.

My code is a little different, but not much:

Code: Select all

procedure TMyUnit.chrtIncomeSourcesMouseMove(Sender: TObject;
  Shift: TShiftState; X, Y: Integer);
var
  lClickedIdx: Integer;
  lSeries: TChartSeries;
begin
  lClickedIdx:= chrtIncomeSources.Legend.Clicked(X,Y);

  if (FYearIdx = -1) and
    (lClickedIdx > -1) then
  begin
    if (FAntClickedIndex <> lClickedIdx) then
    begin
      ClearHighlightedSeries;

      lSeries := chrtIncomeSources[lClickedIdx];
      lSeries.Pen.Width := 2;
      lSeries.Pen.Color:= HIGHLIGHT_COLOR;
      lSeries.Pen.Visible := True;

      FAntClickedIndex := lClickedIdx;
    end;
  end
  else
  if (FAntClickedIndex > -1) then
    ClearHighlightedSeries;
end;

procedure TMyUnit.ClearHighlightedSeries;
var
  lSeries: TChartSeries;
  {$ifopt C+}
  I: integer;
  {$endif}
begin
  if InRange(FAntClickedIndex, 0, chrtIncomeSources.SeriesCount-1) then
  begin
    lSeries := chrtIncomeSources[FAntClickedIndex];
    lSeries.Pen.Color := DEFAULT_PEN_COLOR;
    lSeries.Pen.Width := 1;
    lSeries.Pen.Visible := false;
  end;

  {$ifopt C+}
  for I := 0 to chrtIncomeSources.SeriesCount - 1 do
    if not SameText(chrtIncomeSources[I].Title, 'Income Needed') then
     Assert(not chrtIncomeSources[I].Pen.Visible, 'Pen visible for ' + chrtIncomeSources[I].Title);
  {$endif}
end;

I added the assert to check if multiple series have visible pens. But the assert is never fired (and it is called).

Am I doing something wrong? (I have a bit more code in my app to configure the TChart that I did not put in the demo that does work fine).

Ed Dressel

[Yeray]

Hi Ed,

The most significant difference I can see between your picture and the demo I made is that your bars are stacked but with adding it and even using your code, I don't reproduce the "all-selected" problem. Here is the complete code I'm using that seems to work fine here:

Code: Select all

uses series;

var FAntClickedIndex: Integer;

procedure TForm1.FormCreate(Sender: TObject);
var i, j: Integer;
begin
  for i:=0 to 8 do
    with Chart1.AddSeries(TBarSeries.Create(self)) as TBarSeries do
    begin
      for j:=0 to 30 do Add(random*100+100);
      Marks.Visible:=false;
      Color:=OperaPalette[i mod 12];
      MultiBar:=mbStacked;
    end;

  Chart1.AddSeries(TLineSeries.Create(self));
  Chart1[Chart1.SeriesCount-1].FillSampleValues();

  FAntClickedIndex:=-1;
end;

procedure TForm1.Chart1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);

  procedure ClearHighlightedSeries;
  var lSeries: TChartSeries;
  begin
    if (FAntClickedIndex >= 0) and (FAntClickedIndex < Chart1.SeriesCount) then
    begin
      lSeries := Chart1[FAntClickedIndex];
      lSeries.Pen.Color := clBlack;
      lSeries.Pen.Width := 1;
    end;
  end;

var
  lClickedIdx: Integer;
  lSeries: TChartSeries;
begin
  lClickedIdx:= Chart1.Legend.Clicked(X,Y);

  if (lClickedIdx > -1) then
  begin
    if (FAntClickedIndex <> lClickedIdx) then
    begin
      ClearHighlightedSeries;

      lSeries := Chart1[lClickedIdx];
      lSeries.Pen.Width := 2;
      lSeries.Pen.Color:= clYellow;
      lSeries.Pen.Visible := True;

      FAntClickedIndex := lClickedIdx;
    end;
  end
  else
  if (FAntClickedIndex > -1) then
    ClearHighlightedSeries;
end;

And here is the result I get with TeeChart v8.06:

selected_stacked_bars.png (37.12 KiB) Viewed 19786 times

Is the code above giving the same result than me?
What TeeChart version are you using?

[TestAlways]

8.04

Thanks. Your demo works fine. I'm trying to figure out the difference. I do some configuration of the chart and series in my app, but moving that into the demo has not reproduced the problem. I am a bit tight on time, but will look at this again in a few days.

[TestAlways]

I found some old ode in my app that seems to cause the problem--aChart is passed in a a paramter:

Code: Select all

var
  lHandle: Integer;
begin
  lHandle := aChart.Handle;
  SetWindowLong(lHandle, GWL_EXSTYLE, GetWindowLong(lHandle, GWL_EXSTYLE)
    and not WS_EX_CONTROLPARENT);
end;

AFAICR Peter Below gave me the code in a Delphi new group, but that is going to be a lot of years ago now. I did not document what it was for. Any ideas what this might do?

Thanks,
Ed Dressel

[Yeray]

Hi Ed,

I've seen that Peter Below has already answered you here
If you still have problems with it, please don't hesitate to let us know.

[TestAlways]

Well, I spoke to quick. The problem is still there and I am still trying to reproduce it in a demo.

[TestAlways]

Finally got it. Had to copy the chart from the other version to this one. It is in the attached demo--I included the source code (from D2007, TChart Pro 8.04).

If you move your mouse over the "Series #5" caption in the legend, more than one series highlights.



What is causing this?

Ed Dressel

[Yeray]

Hi TestAlways,

I don't find the demo you mention. If you sent it through the upload page, could you please tell us the domain of the mail address you sent the files with?

[TestAlways]

Oops... here is a link to the demo:

http://www.tbinc.com/misc/LegendHighlightSeries2.zip

[Yeray]

Hi TestAlways,

I've seen in the exe you've sent that moving the mouse over "Series #5" all the series seem to be selected. I've also seen that if you move the mouse over the other series in the legend, the series selected in the chart are more correct as more series you've been selected, and finally when you've selected all the series, all them work fine, even for "Series #5".
The problem could be in the index returned by the Chart1.Legend.Clicked(X,Y) call in the OnMouseMove event.

Then I compiled the project with the actual v8.06 and couldn't reproduce the problem. So the first I'd recommend would be to update the component to the latest maintenance release, if possible.

Another thing you could check would be adding the following statement in your OnMouseMove event, after the clicked call, to check the if the value returned is correct at any time:

Code: Select all

  Chart1.Title.Text.Text:=IntToStr(lClickedIdx);

[TestAlways]

I upgraded to 8.06 and the problem is still there., but I found it... It is the anti-alias tool that is causing the problem.

I reproduced the problem after removing all of the configuration, but the problem goes away if I disable the anti alias tool. Here is a sample project:

http://www.tbinc.com/misc/LegendHighlightSeries2.zip