ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  FinanceChart addLine by User
Posted by chagawo on Oct-17-2025 15:56
Hello.

I want to allow users to draw lines with the mouse on a financial chart.

Since the user will be drawing the lines freely, they need to use mouse down, mouse move, and mouse up.

If I draw a small diagonal line, it should move left and right with the scroll.

The x-axis represents date, and the y-axis represents price.

Are there any reference materials?


And are there any benefits to using the paid charts?

  Re: FinanceChart addLine by User
Posted by Peter Kwan on Oct-18-2025 01:09
Hi Chagawo,

There are several ChartDirector examples that draw track cursors. I am not sure which programming language edition of ChartDirector you are using or the programming framework you are using. The following is one of the track cursor sample code in the .NET Windows Forms or WPF framework:

https://www.advsofteng.com/doc/cdnet.htm#trackfinance.htm

The track cursor is drawn on a "dynamic layer" over the FinanceChart. I think you line can be drawn in a similar way.

Basically, you can use the mouse events of your programming framework to determine the end points of your line, and draw it on the dynamic layer. In the mouse events, normally it will provide the pixel coordinates, and you can convert them to data values. When you draw the line, you can convert the data values back to pixel coordinates to draw the line. In this way, when the chart is scrolled, the line will scroll with the chart.

The APIs to convert from pixel coordinate to data values are XYChart.getXValue and XYChart.getYValue. The reverse conversions are XYChart.getXCoor and XYChart.getYCoor.

https://www.advsofteng.com/doc/cdnetdoc/XYChart.getXValue.htm
https://www.advsofteng.com/doc/cdnetdoc/XYChart.getYValue.htm
https://www.advsofteng.com/doc/cdnetdoc/XYChart.getXCoor.htm
https://www.advsofteng.com/doc/cdnetdoc/XYChart.getYCoor.htm

Note that in a FinanceChart, the x-value is the array index in your timeStamps array, minus the leading points that are not drawn (the extraPoints argument in FinanceChart.setData).

https://www.advsofteng.com/doc/cdpydoc/FinanceChart.setData.htm

The x-value can be a fractional number if the position is in between two timestamps. For example, if the user clicks on the 10th candlestick, the x-value will be 9 (the first candlestick is 0). If the user clicks in between the 14th and 15th candlestick, the x-value will be 13.5.

The free trial version of ChartDirector will draw a yellow bar at the bottom of the charts to mark them as produced by the trial version. Also, the legal license terms do not permit usage in a product that is not free of charge. The licensed version will not have such restrictions.

Best Regards
Peter Kwan

  Re: FinanceChart addLine by User
Posted by chagawo on Oct-19-2025 01:25
Thanks to you, I've implemented drawing lines using addLine().
I tested it to see if I could also draw lines using addLineLayer(), but it didn't work.
In the code below, lineData1 is drawn, but lineData2 isn't.
When using addLineLayer, does the valid data have to be right next to each other?

public void createChart(WinChartViewer viewer)
            {
                int noOfDays = 5;
                int extraDays = 0;
                RanTable rantable = new RanTable(9, 6, noOfDays + extraDays);
                rantable.setDateCol(0, new DateTime(2002, 9, 4), 86400, true);
                rantable.setHLOCCols(1, 100, -5, 5);
                rantable.setCol(5, 50000000, 250000000);

                double[] timeStamps = rantable.getCol(0);
                double[] highData = rantable.getCol(1);
                double[] lowData = rantable.getCol(2);
                double[] openData = rantable.getCol(3);
                double[] closeData = rantable.getCol(4);
                double[] volData = rantable.getCol(5);

                FinanceChart c = new FinanceChart(1000);
                c.setData(timeStamps, highData, lowData, openData, closeData, volData, extraDays);
                XYChart mainChart = c.addMainChart(240);
                c.addCandleStick(0x00ff00, 0xff0000);

                double[] lineData1 = new double[]
                {
                    Chart.NoValue, 120, 250, Chart.NoValue, Chart.NoValue
                };

                double[] lineData2 = new double[]
                {
                    Chart.NoValue, 120, Chart.NoValue, 250, Chart.NoValue
                };

                mainChart.addLineLayer(lineData1);
                mainChart.addLineLayer(lineData2);

                viewer.Chart = c;
            }

  Re: FinanceChart addLine by User
Posted by Peter Kwan on Oct-19-2025 18:15
Hi chagawo,

By default, a Chart.NoValue point will leave a gap on the line. You can use LineLayer.setGapColor to join through the gap using the same line style or a different line style. The following is an example illustration LineLayer.setGapColor:

https://www.advsofteng.com/doc/cdnet.htm#missingpoints.htm
https://www.advsofteng.com/doc/cdnet.htm#LineLayer.setGapColor.htm

For your case, you can use:

LineLayer layer2 = mainChart.addLineLayer(lineData2);
layer2.setGapColor(Chart.SameAsMainColor);

Best Regards
Peter Kwan