[FlexJS] Optimized Charts

[Peter Ent <pe...@adobe.com>]

Hi,

I've just committed code that enables charts to be drawn a little more efficiently. Right now each chart itemRenderer creates an element in the display list (or HTML DOM). The optimized version uses the FlexJS core.graphics.GraphicsContainer as a canvas and each itemRenderer draws its shape into that. A regular bar chart might create 50 display list elements and the optimized version would only create 50 shapes (or <svg><Rect>).

I will create an example to illustrate the difference.

At this point we could use some feedback and advice. I have only created simple graphics for the chart axes and use UILabel for the labels on the tick marks. I am wondering if the display list/DOM structure of chart should be changed to allow better use of CSS to style the elements. At this point CSS has little effect; I wanted to get the functionality done first.

Today's basic Chart structure looks like this (these are not actual MXML or HTML element names, just pseudo elements for illustration).

<chart element>
     <svg> <!-- the chart graphics canvas -->
           <rect> <!-- or path, one per itemRenderer -->
          ...
    </svg>
    <svg>  <!-- horizontal axis graphics -->
    <svg>   <!-- vertical axis graphics -->
    <span>tick mark label</span>
    .... <!-- all of the tick mark labels for each axis -->
</chart element>

Note that everything is pretty much a sibling and are children of the main chart element.

First off, does anyone know if SVG text elements can be styled with CSS? If so, I could convert the UILabel's to SVG on the JavaScript side.

Secondly, would it be helpful to have more structure? For instance,  <chart element>.<horizontal axis>.<tick label>, so that CSS could be used to target specific elements?

Thanks,

Peter Ent
Adobe Systems

Re: [FlexJS] Optimized Charts

[Peter Ent <pe...@adobe.com>]

Thanks for links. I will consider moving the labels of the charts' axis to
SVG.
--peter

On 10/25/14 4:11 PM, "Harbs" <ha...@gmail.com> wrote:

>I believe so:
>
>http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties
>
>Here¹s an example:
>http://css-tricks.com/svg-text-typographic-designs/
>
>On Oct 24, 2014, at 10:57 PM, Peter Ent <pe...@adobe.com> wrote:
>
>> First off, does anyone know if SVG text elements can be styled with
>>CSS? If so, I could convert the UILabel's to SVG on the JavaScript side.
>

Re: [FlexJS] Optimized Charts

[Harbs <ha...@gmail.com>]

I believe so:

http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties

Here’s an example:
http://css-tricks.com/svg-text-typographic-designs/

On Oct 24, 2014, at 10:57 PM, Peter Ent <pe...@adobe.com> wrote:

> First off, does anyone know if SVG text elements can be styled with CSS? If so, I could convert the UILabel's to SVG on the JavaScript side.