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

Message ListMessage List     Post MessagePost Message

  DrawArea Arc and Sector to support inner radius?
Posted by Naveen Michaud-Agrawal on Jun-18-2013 10:13
| Reply | Monitor
Hi Peter,

Would it be possible to add an inner radius to the DrawArea arc and sector commands? I
noticed you have donut charts, but that doesn't allow for arbitrary sectors, which is needed
to implement sunburst visualizations
(http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/sunburst.png). Thanks!

Naveen Michaud-Agrawal

  Re: DrawArea Arc and Sector to support inner radius?
Posted by Peter Kwan on Jun-19-2013 01:28
| Reply | Monitor
Hi Naveen Michaud-Agrawal,

I can think of a few methods to achieve what you need:

(a) You may use a Polar Chart. In a Polar Chart, you can draw a sector with inner and outer radius. The API is AngularAxis.addZone. You can set all the grid lines and axes to transaparent, so what you see is just the sectors.

(b) You may use a donut chart with concentric donuts. See the "Concentric Donut Chart" sample code. You may set some sectors to transparent to achieve the "sunburst  visualizations" you want.

(c) You may draw using DrawArea.sector, but drawing the outer sectors first, followed by the inner sectors. The inner sectors will then cover the outer sectors, and this achieves the chart you want. (In other words, the sectors should be sorted in descending order based on their radius.)

Hope this can help.

Regards
Peter Kwan

  Re: DrawArea Arc and Sector to support inner radius?
Posted by Naveen Michaud-Agrawal on Aug-26-2013 03:44
| Reply | Monitor
Attachments:
Hi Peter,

I tried the first approach and it worked great (see below). Now I'm trying to add some
interaction support, but it seems that PolarChart doesn't have a way to return the radial
and angular coordinate for a particular X,Y coordinate. I found PolarChart.getXCoor and
PolarChart.getYCoor but nothing for the inverse conversion. Any ideas? Thanks.

Regards,
Naveen Michaud-Agrawal
sunburst.png

  Re: DrawArea Arc and Sector to support inner radius?
Posted by Peter Kwan on Aug-27-2013 00:51
| Reply | Monitor
Hi Naveen,

The angle is simply the arc tangent of the x and y distances from the center. In "psuedo code", it is:

angle = atan2(x - cx, cy - y) * 180 / 3.1415926536

where atan2 is the arc-tangent function available in many programming langauges (see http://en.wikipedia.org/wiki/Atan2), (cx, cy) is the pixel coordinate of the center, and (x, y) is the pixel coordinate of the mouse. The angle above is expressed in degrees.

The radius is simply the distance between the mouse and the center, scaled to the radial scale you are using:

distance = sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) * maxRadiusInDataValue /
maxRadiusInPixels

Hope this can help.

Regards
Peter Kwan

  Re: DrawArea Arc and Sector to support inner radius?
Posted by Naveen Michaud-Agrawal on Aug-27-2013 02:21
| Reply | Monitor
Hi Peter,

Thanks for the quick reply. I had already implemented the reverse calculation in python, but
I was hoping there would be a compiled version in chartdir so that I could avoid the speed
penalty in python (this is for interactive use).

Regards,
Naveen