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

Message ListMessage List     Post MessagePost Message

  ScatterLayer data label appears behind axis
Posted by Dave Pick on Mar-02-2012 22:21
| Reply | Monitor
Hi,

I have a problem with the scatter chart below. The data label is appearing behind (i.e. it is hidden) the axis line, I would like it to rendered in front of the axis. I have tried setting the z order of the data label box but this doesn't have any affect, any ideas?

Many thanks in advance
Dave

final XYChart chart = new XYChart(CHART_WIDTH, CHART_HEIGHT, Chart.Transparent);
final TextBox chartTitle = chart.addTitle("Investment Outcomes After 10 Years",
"Arial Bold", 12, BLACK, Chart.Transparent);
chartTitle.setAlignment(Chart.Left);
chartTitle.setMargin(120, 0, 20, 0);
chart.setPlotArea(120, 50, PLOT_WIDTH, PLOT_HEIGHT, Chart.Transparent, -1, Chart.Transparent, Chart.Transparent, Chart.Transparent);

final Axis yAxis = chart.yAxis();
yAxis.setWidth(2);
yAxis.setColors(BLUE);
yAxis.setLinearScale(0, 25, 25);
yAxis.setMultiFormat(Chart.SelectItemFilter(0), " ", Chart.AllPassFilter(), "{value}%");
yAxis.setLabelStyle("Arial Bold", 10, BLACK);
yAxis.setTickColor(Chart.Transparent);
final TextBox yAxisTitle = yAxis.setTitle("Annual Return (%)", "Arial Bold", 10, BLACK);
yAxisTitle.setMargin(30, 0, 0, 0);
yAxisTitle.setTruncate(100, 2);
yAxisTitle.setFontAngle(0);

final double incomeData[][]= {{0, 8, 12, 15, 18, 21}, {2, 4, 6, 7, 9, 13}};
final Axis xAxis = chart.xAxis();
xAxis.setWidth(2);
xAxis.setColors(BLUE);
xAxis.setLinearScale(0, 25, 25);
xAxis.setTickColor(Chart.Transparent);
xAxis.setMultiFormat(Chart.SelectItemFilter(0), " ", Chart.AllPassFilter(), "{value}%");

xAxis.setLabelStyle("Arial Bold", 10, BLACK);
final TextBox xAxisTitle = xAxis.setTitle("Worst Case Outcome (% loss of original investment)", "Arial Bold", 10, BLACK);
xAxisTitle.setMargin(0, 0, 0, 0);

final ScatterLayer layer = chart.addScatterLayer(incomeData[0], incomeData[1], "", Chart.CircleSymbol, 37, BLUE, BLUE);
layer.addExtraField(labels);
layer.setDataLabelFormat("{field0}");
final TextBox box = layer.setDataLabelStyle("Arial Bold", 12, WHITE);
box.setBackground(BLUE);
box.setAlignment(Chart.Center);
box.setZOrder(Chart.ChartFrontZ);

  Re: ScatterLayer data label appears behind axis
Posted by Peter Kwan on Mar-03-2012 02:31
| Reply | Monitor
Hi Dave,

The setZOrder only works for "free floating" text boxes added using BaseChart.addText. For text boxes acted as data points labels in a layer, they are always drawn with the layers, and the layers are always behind the axis.

For your case, you may consider the following method:

(a) Set the axis stem to transparent, so they do not block the labels and the symbols. Put a free floating line (added using BaseChart.addLine) in the same position of the axis but configured it to be under the layers. For example, instead of using:

yAxis.setColors(BLUE);
yAxis.setTickColor(Chart.Transparent);

please use:

yAxis.setColors(BLUE, BLACK, BLACK, Chart.Transparent);
c.addLine(c.getPlotArea().getLeftX(), c.getPlotArea().getTopY(), c.getPlotArea().getLeftX(), c.getPlotArea().getTopY() + c.getPlotArea().getHeight(), BLUE, 1).setZOrder(Chart.GridLinesZ)

or

(b) Remove the scatter layer entire, and use free floating text boxes for the labels, like:

... draw chart as usual, but with no labels ....

DrawArea d = makeChart3();
for (int i = 0; i < incomeData[0].length; ++i) {
    int xCoor = c.getXCoor(incomeData[0][i]);
    int yCoor = c.getYCoor(incomeData[1][i]);
    d.circle(xCoor, yCoor, 37, 37, BLUE, BLUE);
    c.addText(xCoor, yCoor, labels[i], "Arial Bold", 12, WHITE, Chart.Center).setBackground(BLUE);
}

Hope this can help.

Regards
Peter Kwan

  Re: ScatterLayer data label appears behind axis
Posted by Dave Pick on Mar-03-2012 02:57
| Reply | Monitor
Hi,

Couldn't get option a to work but option b works fine.

Many Thanks
Dave