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

Message ListMessage List     Post MessagePost Message

  SVG "Area" rendering problems
Posted by Stephan on Aug-14-2014 21:32
| Reply | Monitor
Attachments:
Hello,

we are using ChartDirector to generate an area (addAreaLayer) chart, which we output in
SVG format. The SVG then gets embedded in a PDF document. When viewing the PDF
document in Google Chrome or Adobe Acrobat the "filling" of the area is poorly rendered.
(See first image in attachment.)

The reason seems to be, that instead of the area being one filled SVG element, it is
actually made up of a lot of small "bars" (svg:path Elements) placed next to each other.
(Marked red, yellow and blue in the second image of the attachment.)

Is there any way to solve this?

Thanks,

Stephan
pdf-svg.png

  Re: SVG "Area" rendering problems
Posted by Peter Kwan on Aug-15-2014 04:49
| Reply | Monitor
Hi Stephan,

You are correct that in the current version of ChartDirector, the area is rendered as many
strips that are accurately packed together, so that there is no gap in between.

We are aware that many SVG or PDF viewers cannot draw accurately packed shapes
correctly. It is because of the anti-alias method used in those viewers, which can create
random and very thin lines at the shape boundaries. These lines can appear and disappear
randomly when you zoom in and out of the graphics. Also, no matter how much you zoom
in, the lines are always "very thin" (normally, if you zoom in, the line with become thicker).
This proves that the lines are not actually in the SVG or PDF, but are caused by the
imperfect rendering of those viewers.

To solve the problem, instead of an area chart, you may consider to use a LineLayer for the
line, and an "InterLineLayer" to fill the region between the line and the x-axis. This should
be equivalent to a 2D area chart.

An example in C#/Java is like:

LineLayer layer = c.addLineLayer(myData, lineColor);
c.addInterLineLayer(layer.getLine(), c.xAxis().addMark(-9999. -1).getLine(), fillColor);

Hope this can help.

Regards
Peter Kwan

  Re: SVG "Area" rendering problems
Posted by Stephan on Aug-18-2014 19:10
| Reply | Monitor
Awesome. Thank you very much, Peter.