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

Message ListMessage List     Post MessagePost Message

  bubble chart + background image
Posted by Marco on Dec-21-2015 22:30
Attachments:
Hi!

I need make a similar chart like attached image.

The background image is a jpg/png format but, there is no standard size.
I need controll a resize/zoom.

Thanks
Marco
scatter-background.png

  Re: bubble chart + background image
Posted by Peter Kwan on Dec-22-2015 05:23
Hi Marco,

(a) Set the image as the background image of the plot area. You can either configure the
plot area to the same pixel size as the image, or ask ChartDirector to resize the image to
the same size as the plot area.

(b) Configure the x-axis and y-axis to a scale of 0 to 100.

(c) Based on this scale, provide the coordinates of the scatter points and plot the
scatter symbols.

For (a), to resize the image to the plot area, it is like:

$leftX = $c->getPlotArea()->getLeftX();
$topY = $c->getPlotArea()->getTopY();
$imgWidth = $c->getPlotArea()->getWidth();
$imgHeight = $c->getPlotArea()->getHeight();
$img = "<*img=/path/to/my/image.png,width=$imgWidth,height=$imgHeight*>";
$c->addText($leftX, $topY, $img);

For (b), to configure the axis scale, it is like:

$c->xAxis->setLinearScale(0, 100, 10);
$c->yAxis->setLinearScale(0, 100, 10);

For (c), you can use XYChart.addScatterLayer to add the symbols.

By default, the grid lines, axis scales, etc, will be visible. They can help trouble-shooting
during development. After you have successfully plotted the chart, you can set their
colors to transparent, so you will only see your image and the scatter symbols.

Hope this can help.

Regards
Peter Kwan

  Re: bubble chart + background image
Posted by Marco on Dec-23-2015 02:55
Hi Peter!

Thanks! I liked your code but, i tried it your way, but the image does not appear.
I'm using the chart Director 6 for php 32bit.

but i did so:

$c = new XYChart(800, 470);


$plotArea = $c->setPlotArea(0, 20, 788, 440, -1, -1, Transparent, Transparent,
Transparent);

$title = $c->addTitle("AUDITORIA DA PLANTA", "bold", 12, 0x9a4a3a,
0xcfcfcf);
$title->setBackground(silverColor(0xff9999), -1, glassEffect(2, 1, 5));

$c->xAxis->setWidth(0);
$c->yAxis->setWidth(0);
$c->xAxis->setLinearScale(0, ceil(max($coorX)), 0, 0);
$c->yAxis->setLinearScale(0, ceil(max($coorY)), 0, 0);

$scatterLayerObj = $c->addScatterLayer($coorX, $coorY, "", CircleSymbol, 9,
0x80ff3333, 0x80ff3333);
$scatterLayerObj->setSymbolScale($tamanho);

$c->setSearchPath(dirname(__FILE__));
$plotArea->setBackground2($planta, 1);

thanks

  Re: bubble chart + background image
Posted by Peter Kwan on Dec-24-2015 03:39
Hi Marco,

By "the image does not appear", I assume you mean the chart appears normally, but the
background image $planta does not appear inside the chart. If this is not case, please
clarify what is the symptoms.

The code you attached should be correct. I have tried it by inserting the last two lines of
your code in the ChartDirector sample code, and it works normally.

For your case, please check the followings:

(a) Please use the hard coded filename "marble3.png" instead of a variable $planta. Copy
the "marble3.png" from the ChartDirector sample code directory (in
"ChartDirector/phpdemo") to the same directory as your script. Please check if this
works.

(b) If even "marble3.png" does not work, please check if "marble3.png" is set to be
readable by "everyone". The web server runs as the "anonymous user", so it may not be
able to read certain files unless the files can be read by the "anonymous user".

(c) If "marble3.png" works, please modify the code to hard code your actual filename,
and making sure your file is in the same directory as your script and is readable by
everyone.

(d) If the hard coded filename works, please check your code to confirm that $planta is
equivalent to the hard code filename. After you use PlotArea.setBackground2, add
another line of code:

$c->addTitle($planta);

Now you can see the filename in the chart title. Please verify if this is what you expect.

Please kindly let me know what is the result.

Regards
Peter Kwan