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

Message ListMessage List     Post MessagePost Message

  A few questions about polar charts
Posted by Eric de Ruiter on Jul-04-2008 22:12
| Reply | Monitor
Attachments:
Hi,

I'm trying to convert our current charts (jpgraph) to chartdirector charts. This is progressing nicely, all xy-chart where no problem. But when I tried to mimic our old behaviour of the radargraphs with the new chartdirector chart I hit a few problems.

What I currently have in chartdirector can be seen in chart number 3 (no it doesn't look pretty yet ..)
What I would like is:
- get rid of the outer radial border
- radial ticks on all angular axis lines (on both sides of the axis)
- extend the angular axis lines beyond the border
This all to mimic chart number 2.

To mimic chart number 1 I guess I need to start like the "Simple Rose Chart" example, but what is the most easy way to achieve this? Can I combine 2 PolarCharts on 1 plot (much like the "Concentric Donut Chart" example), one for the outer group ring and one for the inner ring? And then add some custom lines for the outer connectors.

I'm using chartdirector 4.1 on php (5.1) (currently unregistered, but planning to purchase a redistribute license)

Kind regards,

  Eric de Ruiter
  Amplixs Interaction Management
graph2.png
graph3.png
graph.png

  Re: A few questions about polar charts
Posted by Peter Kwan on Jul-05-2008 03:54
| Reply | Monitor
Hi Eric,

(a) Get rid of the outer radial border

By default, Chartdirector polar chart should not have outer border at all. The border may be there because there is a line of code setPlotArea, which configures a border color. Make sure your setPlotArea line only has 3 arguments:

(b) Extend the angular axis lines beyond the border

This can be by adding an "extension" region for auto-scaling using setAutoScale:

#ensure the top side of the axis has at least 30% extra scale
$c->radialAxis->setAutoScale(0.3, 0.1, 0.8);

or you may add a non-scaling margin to the radial axis

#add 30 pixels margin
$c->radialAxis->setMargin(0, 30);

If you have a scale you want to use, you may ask ChartDirector to use that scale using setLinearScale:

$c->radialAxis->setLinearScale(0, 10, 2);

(c) For the ticks, you may add the ticks at the main radial axis and put the labels on the right side of the ticks using:

$t = $c->radialAxis->setLabelStyle("arial.ttf", 8);
$t->setBackground(Transparent, Transparent);
$c->radialAxis->setLabelGap(1);

(d) To put ticks on both side of all spokes, you would need to draw it with your own code using custom lines. It is not difficult. The code is like:

..... draw polar chart as usual .......

#layout the chart and auto-scale the axis, so we can know the axis scale
$c->layout();

#get the tick positions chosen by ChartDirector auto-scaling
$ticks = $c->radialAxis->getTicks();

#for each tick on each spoke
for ($i = 1; $i < count($ticks); ++$i)
{
    for ($j = 0; $j < couint($labels) ; ++$j)
    {
        #the center point of the tick
        $x = $c->getXCoor($ticks[$i], $j);
        $y = $c->getYCoor($ticks[$i], $j);

        #the direction of the tick stroke (assume length = 4)
        $angle = 3.1416 * 2 * $j / couint($labels);
        $dx = 4 * cos($angle);
        $dy = 4 * sin($angle);

        #draw the tick on either side of the center point.
        $c->addLine($x - $dx, $y - $dy, $x + $dx, $y + $dy, 0x000000);
    }
}

(e) For the chart in (1), I think you can start with a rose chart. For the labels, you may consider to use custom labels BaseChart.addText. For example, for the "A, B, C, D, E" labels, the code is:

#layout the chart and auto-scale the axis, so we can know the axis scale
$c->layout();

for ($i = 0; $i < count($labels); ++$i)
{
    #add label at the maximum scale position of the radial axis in between the spokes
    $x = $c->getXCoor($c->radialAxis->getMaxValue(), $i + 0.5);
    $y = $c->getYCoor($c->radialAxis->getMaxValue(), $i + 0.5);
    $c->addText($x, $y, $labels[$i], "arialbd.ttf", 12, 0x000000, Center);
}

You can use similar methods to add other text.

For the "curved arrows", they are the most difficult part. If your chart layout is static (always 5 spokes and always the same size), you can draw all four arrows in an image, and use it as a background image. Otherwise you may need to draw them with arcs and polygons (DrawArea.arc and DrawArea.polygon).

Hope this can help.

Regards
Peter Kwan

  Re: A few questions about polar charts
Posted by Eric de Ruiter on Jul-05-2008 06:38
| Reply | Monitor
Hi Peter,

First of all thanks for the fast reply!

a) Ah, this was an error my phpchardir.php. I updated that file to be more php5 friendly (uses __construct/__destruct and class constants, no more globals) (ps: I can post it here if someone is interested) but I forgot to update the default values of the function parameters. Now the border is gone.

b) Yup tried that already, but it didn't seem to work due to the border being present, without the border it works great

c) Works! thanks

d) Works great! thanks

e) Thanks I'll try that shortly.

Regards,

  Eric

  Re: A few questions about polar charts
Posted by Eric de Ruiter on Jul-07-2008 06:55
| Reply | Monitor
Attachments:
Hi,

I just wanted to let you know that the result turned out great! Thanks for the help!

Regards,

  Eric
graph.png

  Re: A few questions about polar charts
Posted by Fernando Esp?ndola on Feb-23-2012 22:37
| Reply | Monitor
Hello All,

How can I align the labels (Innovation Planning, Productiviteit and Externe Steun) like in the
above chart ?

  Re: A few questions about polar charts
Posted by Peter Kwan on Feb-24-2012 02:39
| Reply | Monitor
Hi Fernando,

May be you can try something similar to the followings:

.... create and enter data to the chart as usual ....

#auto-scale axis based on the data
$c->layout();

#add additional labels
$radius = $c->radialAxis->getMaxValue() * 1.1;
$labels = array("XXX", "YYY", "ZZZ", "PPP");
$pos = array(1, 2.5, 3.5, 4.5);

for ($i = 0; $i < count($labels); ++$i)
{
    #add label at the maximum scale position of the radial axis in between the spokes
    $x = $c->getXCoor($radius, $pos[$i]);
    $y = $c->getYCoor($radius, $pos[$i]);
    $angle = 360 - $pos[$i] / 5 * 360;
    if (($angle > 90) && ($angle < 270))
     $angle = $angle + 180;
    $t = $c->addText($x, $y, $labels[$i], "arialbd.ttf", 12, 0x000000, Center, $angle);
}

Hope this can help.

Regards
Peter Kwan

  Re: A few questions about polar charts
Posted by Fernando Esp?ndola on Feb-27-2012 09:50
| Reply | Monitor
Peter,

Works great.

Thanks.