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

Message ListMessage List     Post MessagePost Message

  some Financial Chart question
Posted by Owen Cheng on Jul-19-2012 01:17
| Reply | Monitor
Attachments:
Hi Peter,

i have some questions about Financial Chart.
I am trying to draw a zooming and scrolling Financial Chart.
some roughly c# code below :

* * * * * * * * * * * * * * * * * * * * * * * * *
FinanceChart c = new FinanceChart(800);

c.setDateLabelFormat("{value|yyyy}", "{value|yyyy/mm}", "{value|mm}",
"{value|yyyy/mm}", " ", " ", " ");

c.setData(viewPortTimeStamps, viewPortHighData, viewPortLowData, viewPortOpenData,
viewPortCloseData, viewPortVolData, extraDays);

XYChart priceChart = c.addMainChart(300);

Layer layer = priceChart.addCandleStickLayer(viewPortHighData, viewPortLowData,
viewPortOpenData, viewPortCloseData);

priceChart.getPlotArea().setGridColor(priceChart.dashLineColor(color_grid, Chart.DotLine),
priceChart.dashLineColor(color_grid, Chart.DotLine));

priceChart.yAxis().setLabelFormat("{value|P3}");

XYChart volChart = c.addVolIndicator(100, color_up, color_down, color_flat);
Layer layerVol = volChart.addBarLayer(viewPortVolData);

volChart.xAxis().setLabelStyle("Verdana Bold", 10, color_xAxis, 0);
......
* * * * * * * * * * * * * * * * * * * * * * * * * *

result like the attachments Chart.A & Chart.B
My questions are :

Q1. (see Chart.A) how to hide the Labels in yellow circles? They are just the first and
last labels on yAxis.

Q2. (Chart.A & B) i want to set the xAxis labels and ticks like ChartA. Only major tick by
month and  the first month shows in "yyyy/mm". But while i zoom in like ChartB. The ticks
and labels are all changed. how to set the xAxis to fixed?

Q3.(Chart.B) sometime the first left label is blocked. how to offset this label to right?


Thank you !!!

Best Regards,
Owen Cheng
ChartA.jpg
ChartB.jpg

  Re: some Financial Chart question
Posted by Peter Kwan on Jul-19-2012 08:38
| Reply | Monitor
Hi Owen,

Q1. By default, in a FinanceChart, the top y-axis label should be at around the bottom of the legend box, not the top of the plot area. In this way, the top label will not overlap with the bottom label of the chart above. You can see some examples in our gallery:

http://www.advsofteng.com/gallery_finance.html

For your case, I suspect you have a line of code that uses setYAxisStyle to set the y-axis label margin to 0, so the top y-axis label moves to the top edge of the plot area. This can also cause some of the chart contents to overlap with the legend region. (If you look at the volume bars in "ChartB.jpg", you can see that the 4th bar overlaps with the legend region.)

In my opinion, removing the top and bottom labels are not a good method. First, it does not solve the problem that the chart contents can overlap with the legend region. Also, for some data, it may be possible the y-axis to have only 3 or even 2 labels (especially for some indicator charts). If you remove the top and bottom labels, the y-axis can have one or no label at all.

Instead, I suggest you may set the y-axis margin back to its default value of 14 pixels.

I see that your candlestick chart is drawn without a legend region. If you do not want the y-axis margin for the main price chart, you can use Axis.setMargin to disable the axis margin for just the main price chart, like:

priceChart.yAxis().setMargin(0, 0);

Q2. ChartDirector will automatically determine the label density based on the actual data. If you force the labels to be one label per month, it is possible for the chart to have one or even no x-axis labels at all (say if your chart is only 5 days in duration). So for zoomable charts, it is normal and common that the x-axis labeling method will change if you zoom in or out.

In your ChartB, because there are a small number of days, ChartDirector has probably decided to use daily labels. In your setDateLabelFormat configuration, the first available day of a month format is configured to be "yyyy/mm", and the other days are configured to be " ". So you can only see the "yyyy/mm" labels and not other labels (but you can still see the ticks and grid lines).

You may consider to set the label format for the "first available day of month" to include the day of month, such as "yyyy/mm/dd". It is because the "first available day of a month" can be 2010-05-26 (if your data starts from 2010-05-26) or any other day. If you just show "yyyy/mm", it will look like "2010/05". Some people may think "2010/05" to mean the start of a month and this may cause confusion.

If you really want to force all labels to be monthly labels, you can use FinanceChart.setDateLabelSpacing to adjust the label spacing based on the number of days shown. For example, you can use a wider label spacing when zoomed in. In this case, ChartDirector cannot put so many labels on the x-axis because of the wide label spacing, and it will prefer to choose monthly labels like ChartA.jpg. Note that if your chart has 60 days or less, ChartDirector may still choose daily labels. It is because if there are only a small number of days, using monthly labels may cause the x-axis to have too few labels (one or zero labels) to be reasonable.

If you want some alternative labelling method, you can use Axis.setLabels to directly set the labels you want to use for the first chart (the priceChart in your case). ChartDirector will then copy the labels down to the volume bar charts and other charts below.

Q3. The easy solution is to leave some empty space at the left side, so that the first label will not flow outside the chart. The other easy method is to shift all labels to the right by a certain amount, so that the labels would look like being left-aligned to the tick. This is simply by adding empty space in setDateLabelFormat. For example, instead of using "{value|yyyy/mm}", you may use "                    {value|yyyy/mm}". But then there may be a risk the the last label will go outside the right edge (you may need to add more margin at the right).

If you just shift the first label without shifting other labels, there is a risk that the first label will overlap with the second label, in case the labels are close together.


In summary, in automatic charting, the code must be designed to handle all possible cases (that the labels can be very close together or far apart, and the date range can be a few days to many years). So the default design of FinanceChart is to adjust the labelling method and to set up margins to that the labels will work in all possible cases (from the duration of a less than 1 day to 100 years).

Regards
Peter Kwan

  Re: some Financial Chart question
Posted by Owen Cheng on Jul-20-2012 01:05
| Reply | Monitor
Hi Peter,

Sincerely thanks for your detailed answers.
Problems solved!

Thank you!!

Regards
Owen Cheng

  Re: some Financial Chart question
Posted by Owen Cheng on Jul-25-2012 22:41
| Reply | Monitor
Hi Peter,

I have another question.
In the Chart.B,the gap in volChart is different from the gap in priceChart.
How to set  the gaps to the same width ?

Thank you~

Best Regards,
Owen Cheng

  Re: some Financial Chart question
Posted by Peter Kwan on Jul-26-2012 04:13
| Reply | Monitor
Hi Owen,

By the "gap", do you mean the gap between the bars, and the gap between the candlesticks?

The gaps for the candlesticks and bars are configured differently because they have different constraints. For instance, the candlesticks must be symmetrical relative to the middle "stick". That means the candlestick must have an odd number of pixels, while the bar does not have this constraint.

Also, for the OHLC symbol, it has two sticks on the left and right sides for the open and close price. Because of these additional structure of the symbol, it needs to be wider to be seen clearly. Although the candlestick is not the same as the OHLC symbol, they are in the same position and have the same function. so they are sized similarly.

If you would like to configure the candlesticks to have the same width as the bar, you may use BaseBoxLayer.setDataGap.

layer.setDataGap(0.75);

Hope this can help.

Regards
Peter Kwan

  Re: some Financial Chart question
Posted by Owen Cheng on Jul-26-2012 09:51
| Reply | Monitor
Hi Peter,

Previously I tried 'BarLayer.setBarGap()'.
The gaps between bars was fixed while I zoom in  or zoom out the chart.
I found i could not get the actual value of the candlestick gaps to set a dynamic value.

The BaseBoxLayer.setDataGap(0.25) is working well finally!

Thank you again~

Best Regards,
Owen Cheng