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

Message ListMessage List     Post MessagePost Message

  LineLayer shadow effect
Posted by Erwin Paglinawan on Mar-28-2010 10:04
Hi Peter,

First of all I would like to thank you for the great support that you are giving to this forum. We are very impressed by it. As a matter of fact, we will be purchasing a number of licenses for ChartDirector this coming week.

However, there's just one more thing that I would like to know if possible - creating shadow effects for LineLayers. The thing is, when I showed my prototypes to our VP for R&D, the first thing he asked was if it was possible to add shadows to the lines (using LineLayer). He has seen this effect in action in pChart, and would really like to see it now.

Is this possible? Or is there any workaround (that will, of course, look good) to achieve the same effect?

Thanks,
Erwin Paglinawan

  Re: LineLayer shadow effect
Posted by Peter Kwan on Mar-29-2010 13:58
Attachments:
Hi Erwin,

The only known method is to create a chart object with a transparent background, set the "external background color" to the real background color you would like to use with BaseChart.setRoundedFrame, then apply the drop shadow using BaseChart.setDropShadow. In this case, the drop shadow will be applied to everything in the chart.

In fact, the drop shadow always applies to everything on the chart, including the background of the chart, and the shadow is cast on the surface behind the background (the "external background"). If you look at the drop shadow sample code in ChartDirector (like the "Uneven Data Points" sample code), you can see the drop shadow appears to be behind the background.

If you set the background of the chart to transparent, you can see the shadow of everything in the "external background".

I have attached an example based on the "Uneven Data Points" sample code for your reference. You can see almost everything (including the lines, the labels, the legend icons, etc) has a drop shadow.

However, I have intentionally configure the chart title without the drop shadow. To do this, the method is to create two charts, one with Transparent background, and one with a non-Transparent background. Everything in the former chart will have a drop shadow, while things in the latter chart will have no drop shadow (but the overall rounded frame can have a drop shadow). You can then merge the two charts together to create a chart in which only something has a drop shadow.

Hope this can help.

Regards
Peter Kwan
unevenpoints.png
unevenpoints.php
<?php
require_once("../lib/phpchartdir.php");

# Data points which more unevenly spaced in time
$data0Y = array(62, 69, 53, 58, 84, 76, 49, 61, 64, 77, 79);
$data0X = array(chartTime(2007, 1, 1), chartTime(2007, 1, 2), chartTime(2007, 1, 5),
    chartTime(2007, 1, 7), chartTime(2007, 1, 10), chartTime(2007, 1, 14), chartTime(
    2007, 1, 17), chartTime(2007, 1, 18), chartTime(2007, 1, 19), chartTime(2007, 1,
    20), chartTime(2007, 1, 21));

# Data points which are evenly spaced in a certain time range
$data1Y = array(36, 25, 28, 38, 20, 30, 27, 35, 65, 60, 40, 73, 62, 90, 75, 72);
$data1Start = chartTime(2007, 1, 1);
$data1End = chartTime(2007, 1, 16);

# Data points which are evenly spaced in another time range, in which the spacing is
# different from the above series
$data2Y = array(25, 15, 30, 23, 32, 55, 45);
$data2Start = chartTime(2007, 1, 9);
$data2End = chartTime(2007, 1, 21);

# Create a XYChart object of size 600 x 400 pixels. Use a vertical gradient color
# from light blue (99ccff) to white (ffffff) spanning the top 100 pixels as
# background. Set border to grey (888888). Use rounded corners. Enable soft drop
# shadow.
$c = new XYChart(600, 400, Transparent);
$c->setRoundedFrame(Transparent);
$c->setDropShadow();

$plotArea = $c->setPlotArea(60, 80, 510, 275, -1, -1, Transparent, $c->dashLineColor(
    0x444444, 0x000101), -1);

# Add a legend box where the top-center is anchored to the horizontal center of the
# plot area at y = 45. Use horizontal layout and 10 points Arial Bold font, and
# transparent background and border.
$legendBox = $c->addLegend($plotArea->getLeftX() + $plotArea->getWidth() / 2, 45,
    false, "arialbd.ttf", 10);
$legendBox->setAlignment(TopCenter);
$legendBox->setBackground(Transparent, Transparent);

# Set x-axis tick density to 75 pixels and y-axis tick density to 30 pixels.
# ChartDirector auto-scaling will use this as the guidelines when putting ticks on
# the x-axis and y-axis.
$c->yAxis->setTickDensity(30);
$c->xAxis->setTickDensity(75);

# Set all axes to transparent
$c->xAxis->setColors(Transparent);
$c->yAxis->setColors(Transparent);

# Set the x-axis margins to 15 pixels, so that the horizontal grid lines can extend
# beyond the leftmost and rightmost vertical grid lines
$c->xAxis->setMargin(15, 15);

# Set axis label style to 8pts Arial Bold
$c->xAxis->setLabelStyle("arialbd.ttf", 8);
$c->yAxis->setLabelStyle("arialbd.ttf", 8);
$c->yAxis2->setLabelStyle("arialbd.ttf", 8);

# Add axis title using 10pts Arial Bold Italic font
$c->yAxis->setTitle("Backlog in USD millions", "arialbi.ttf", 10);

# Add the first data series
$layer0 = $c->addLineLayer2();
$dataSetObj = $layer0->addDataSet($data0Y, 0xff0000, "Quantum Computer");
$dataSetObj->setDataSymbol(GlassSphere2Shape, 11);
$layer0->setXData($data0X);
$layer0->setLineWidth(3);

# Add the second data series
$layer1 = $c->addLineLayer2();
$dataSetObj = $layer1->addDataSet($data1Y, 0x00ff00, "Atom Synthesizer");
$dataSetObj->setDataSymbol(GlassSphere2Shape, 11);
$layer1->setXData2($data1Start, $data1End);
$layer1->setLineWidth(3);

# Add the third data series
$layer2 = $c->addLineLayer2();
$dataSetObj = $layer2->addDataSet($data2Y, 0xff6600, "Proton Cannon");
$dataSetObj->setDataSymbol(GlassSphere2Shape, 11);
$layer2->setXData2($data2Start, $data2End);
$layer2->setLineWidth(3);

$c2 = new XYChart(600, 400);
$c2->setBackground($c2->linearGradientColor(0, 0, 0, 100, 0x99ccff, 0xffffff), 0x888888);
$c2->setRoundedFrame();
$c2->setDropShadow();

# Add a title using 18 pts Times New Roman Bold Italic font. #Set top margin to 16
# pixels.
$textBoxObj = $c2->addTitle("Product Line Order Backlog", "timesbi.ttf", 18);
$textBoxObj->setMargin2(0, 0, 16, 0);

$d = $c2->makeChart3();
$d->merge($c->makeChart3(), 0, 0, TopLeft, 0);

# Output the chart
header("Content-type: image/png");
print($c2->makeChart2(PNG));
?>