Adding a movable line on a chart

[Barry]

I have a candlestick chart which users use to view and correct financial data (pls see attached jpg). The Marks on the chart show where there are corporate actions 'C' or name changes 'N'. I currently use cross hairs and allow users to click and drag a rectangle to zoom into the chart to see the candle bars in more detail and then when a candle is clicked on using the OnClickSeries event I display the candle data for a user to edit.

What the users are asking for is when they click on a candle for a vertical line to be drawn on the chart so they can easily see where they have clicked. They also want this line to move when they click on another candle - all this needs to happen without losing any of the existing functionality.

I have read the various posts and tried a number of different things and none of these seem to display a vertical line and I wondered if you could help.

The final question from the users is its quite tricky to actually click on a candle so can they click anywhere on the chart and pickup the candle above or below where they click.

Many thanks

Barry

[Yeray]

Hi Barry,

I have a candlestick chart which users use to view and correct financial data (pls see attached jpg). The Marks on the chart show where there are corporate actions 'C' or name changes 'N'. I currently use cross hairs and allow users to click and drag a rectangle to zoom into the chart to see the candle bars in more detail and then when a candle is clicked on using the OnClickSeries event I display the candle data for a user to edit.

What the users are asking for is when they click on a candle for a vertical line to be drawn on the chart so they can easily see where they have clicked. They also want this line to move when they click on another candle - all this needs to happen without losing any of the existing functionality.

I have read the various posts and tried a number of different things and none of these seem to display a vertical line and I wondered if you could help.

You can add a ColorLine Tool and use the series OnCLick event to show it. Here you have a simple example:

Code: Select all

uses CandleCh, TeeTools;

procedure TForm1.FormCreate(Sender: TObject);
begin
  Chart1.View3D:=false;
  Chart1.Legend.Visible:=false;

  with Chart1.Tools.Add(TColorLineTool) as TColorLineTool do
  begin
    Axis:=Chart1.Axes.Bottom;
    AllowDrag:=false;
    Active:=false;
  end;

  with Chart1.AddSeries(TCandleSeries) as TCandleSeries do
  begin
    FillSampleValues;
    OnClick:=CandleClick;
  end;
end;

procedure TForm1.CandleClick(Sender:TChartSeries; ValueIndex:Integer; Button:TMouseButton;
                             Shift: TShiftState; X, Y: Integer);
begin
  with Chart1.Tools[0] as TColorLineTool do
  begin
    Value:=Sender.XValue[ValueIndex];
    Active:=true;
  end;
end;

The final question from the users is its quite tricky to actually click on a candle so can they click anywhere on the chart and pickup the candle above or below where they click.

Here the difficult part is to find what Candle is the nearest to the point clicked. But luckily we have TNearestTool.GetNearestPoint public function to retrieve the nearest point between a series and a given point. Here you have an example of how you could use it:

Code: Select all

uses CandleCh, TeeTools;

procedure TForm1.FormCreate(Sender: TObject);
begin
  Chart1.View3D:=false;
  Chart1.Legend.Visible:=false;

  with Chart1.Tools.Add(TColorLineTool) as TColorLineTool do
  begin
    Axis:=Chart1.Axes.Bottom;
    AllowDrag:=false;
    Active:=false;
  end;

  Chart1.AddSeries(TCandleSeries).FillSampleValues;

  Chart1.OnMouseDown:=Chart1MouseDown;
end;

procedure TForm1.Chart1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
var ValueIndex: Integer;
begin
  ValueIndex:=Chart1[0].Clicked(X,Y);
  if ValueIndex>-1 then
    SetColorLine(true, Chart1[0].XValue[ValueIndex])
  else
  begin
    if Chart1.Tools[0].Active then
      SetColorLine(false)
    else
    begin
      ValueIndex:=TNearestTool.GetNearestPoint(Chart1[0], X, Y);
      if ValueIndex>-1 then
        SetColorLine(true, Chart1[0].XValue[ValueIndex]);
    end;
  end;
end;

procedure TForm1.SetColorLine(AActive: boolean; AValue: Double=-1);
begin
  with Chart1.Tools[0] as TColorLineTool do
  begin
    Active:=AActive;
    if AValue>-1then
      Value:=AValue;
  end;
end;

[Barry]

Hi, A few points in the 1st answer you gave me re adding a colour line

1. I assume you meant

with Chart1.Tools.Add(TColorLineTool) as TColorLineTool do
begin
Axis:=Chart1.Axes.Bottom;
AllowDrag:=true;
Active:=true;
end;

not setting them to false as per your example.

The other issue is I wanted a vertical line, to start with I get a horizontal line (which does not move) however when I drag and zoom and then zoom out it all starts to work. Which does lead to 3 more questions

1. do you know why this is ??
2. How to I change the size,shape and colour of the line
3. The line disappears when its actually being moved, can I make it stay visible

Thanks

Barry

[Barry]

Sorry a quick followup question.

How do I get the values of the candle under the line, as the line moves I want to see the values reflected in a table. I do this today by clicking on a point, but users want something more dynamic

Thanks

Barry

[Barry]

Please see attached sample which doesn't seem to work

thanks

Barry

[Yeray]

Hello Barry,

1. I assume you meant

with Chart1.Tools.Add(TColorLineTool) as TColorLineTool do
begin
Axis:=Chart1.Axes.Bottom;
AllowDrag:=true;
Active:=true;
end;

not setting them to false as per your example.

No, I intentionally initialized it to false to make it not visible at the startup. I make it active (to make it visible) at the candle OnClick event.
I see in the example you attached later you also initialize the color line as I did, so I guess this explanation is unnecessary.

How do I get the values of the candle under the line, as the line moves I want to see the values reflected in a table. I do this today by clicking on a point, but users want something more dynamic

There are several solutions for this. One of them could be to have a TStringGrid and show the values you want in it through the candle OnClick event.

Please see attached sample which doesn't seem to work

I see you have created a Candle series at design time, but note you are also creating a second one when you do this:

Code: Select all

  with Chart1.AddSeries(TCandleSeries) as TCandleSeries do
  begin
    OnClick:=CandleClick;
  end;

In that code, you are creating a new TCandleSeries, adding it to the Chart and making its OnClick event to execute your CandleClick method.
However, as said before, you already have a TCandleSeries created at designtime, Series1, and this is the series you are populating. So you should use this series OnClick event, not a new one:

Code: Select all

  Series1.OnClick:=CandleClick;

I've also added a TStringGrid to the form (and using it as described in the point above) and a button to show an editor (just for testing purposes):

Test Colour line.zip

(3.92 KiB) Downloaded 473 times

[Barry]

Sorry - I clearly have not made a very good job of explaining what I am after, but the demo you sent me is very helpful as it allows me to explain better.

If you run your demo and then select Editor then

Tools -> Color line - > Options and click "allow Drag" (I also made mine Red so I could see it better)

Now you can drag it left and right, what I want is the values in the string grid to change as I drag the color line over them - as it stands I still have to click on the Candle - This is already build into my code and I know how to do this, pls see the better screenshot

Also the

Tools -> Color line - > Options and click "allow Drag"

Is not available at design time, is there any reason for this please ?

Many thanks - especially for the demo code which allows me to explain the issue much better

Barry

[Yeray]

Hi Barry,

If you run your demo and then select Editor then

Tools -> Color line - > Options and click "allow Drag" (I also made mine Red so I could see it better)

In my first attempt, I created it with AllowDrag=false because here:

The final question from the users is its quite tricky to actually click on a candle so can they click anywhere on the chart and pickup the candle above or below where they click.

I understood you didn't want the tool to be dragged. I understood it should be moved only when the user clicks on the chart or a candle.
Anyway, I modified testing app by code. Now at FormCreate I create the TColorLine like this:

Code: Select all

  ColorLine1:=Chart1.Tools.Add(TColorLineTool) as TColorLineTool;
  with ColorLine1 do
  begin
    Axis:=Chart1.Axes.Bottom;
    AllowDrag:=true;
    Active:=false;
    Pen.Color:=clRed;
  end;

I'll attach the new version of the testing project below.

Now you can drag it left and right, what I want is the values in the string grid to change as I drag the color line over them - as it stands I still have to click on the Candle - This is already build into my code and I know how to do this, pls see the better screenshot

Have you tried to implement the second example I showed you here? I don't see it in your test project. I've implemented it adapting it so the color line now gets the position of the candle when you click over a candle, or to the nearest candle if you click on the chart or while you drag the colorline. It's like a snap-to-nearest feature.
I'll modify the testing project to have random values, so the changes can be seen clearly in the StringGrid.
I've also changed the Marks to show the index instead of using your event, just for testing what the StringGrid shows is the index of the nearest point to the line.

Test Colour line.zip

(4.17 KiB) Downloaded 492 times

Also the

Tools -> Color line - > Options and click "allow Drag"

Is not available at design time, is there any reason for this please ?

I've created the color line at runtime, by code, because here in the forums it's easier to share code than options set at design time.
If I create the color line at designtime I see the same options in its editor than at runtime, don't you?

Many thanks - especially for the demo code which allows me to explain the issue much better

You're welcome! I'm glad to be helpful.