I need to retrace my steps. I should have looked to see how GraphicsContainer was implemented in JavaScript before proceeding.
GraphicsContainer is a <svg> element, essentially, and to add <Rect>, <Line>, and so forth, you use functions on GraphicsContainer to do that, rather than creating a core.graphics.Rect and adding it as an element to GraphicsContainer. This model really won't work that well for charts. Charts could be made to do this, but in the spirit of each bar or wedge being an itemRenderer, I think it best to continue as-is, even though it may introduce a bit of extra overhead on the JavaScript side. We can address this further down the road. Peter Ent Adobe Systems On 9/15/14 2:39 PM, "Peter Ent" <p...@adobe.com> wrote: >I've converted ChartDataGroup on the ActionScript side so that it uses a >GraphicsContainer. ChartDataGroup extends UIBase and so the elements being >added to it are its children. The modification inserts a GraphicsContainer >into ChartDataGroup as its only child and then overrides addElement to >place the itemRenderer children into the GraphicsContainer. > >This works well in ActionScript because GraphicsContainer also extends >UIBase. But this is failing on the JavaScript side because neither >GraphicsContainer nor GraphicsShape implement IUIBase. This is something >to determine if the graphic elements should conform to IUIBase or be >something else. > >I could imagine that ChartDataGroup might have addElement for normal >IUIBase components (e.g., adding a Label to a chart) and a new function, >like addGraphicElement() that would added charting graphics. > >At the moment, the chart package works great, it just produces a lot of >extra <div> and <svg> tags on the JS side. > >Peter Ent >Adobe Systems > >On 9/12/14 6:40 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote: > >>On Fri, Sep 12, 2014 at 12:40 PM, Peter Ent <p...@adobe.com> wrote: >> >>> I have modified the chart code so that the JS side does not have >>>borders >>> and scrollbars. >>> >> >>I just tried it. Looks fantastic! I can't even tell the difference >>between the Flash version and the HTML5 version. The only difference I >>can >>see is in the text. >> >>This is only going to get better :-) >> >> >>> >>> While looking at the HTML generated this morning, not only did I see >>>the >>> extra <div>s and <svg>s, but I also saw that extra itemRenderers were >>> being generated. I pushed code that addresses that as well. >>> >>> Now if we could get a GraphicContainer or something like it, we should >>>be >>> able to have the itemRenderers just add a graphic element (e.g., Rect) >>>as >>> they do now, except it would be parented by the ChartDataGroup (aka, >>> <svg>). >>> >> >>I just checked in the GraphicsContainer component for AS and JS. The >>usage >>example can be seen in examples/FlexJSTest_SVG/GraphicsView.mxml >> >>Thanks, >>Om >> >> >>> >>> Peter Ent >>> Adobe Systems >>> >>> On 9/11/14 6:40 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote: >>> >>> >Peter, >>> > >>> >I just tested out the ChartExample app. It looks awesome! Thanks >>>for >>> >making this work end to end. Nice to see validation that using SVG >>>lets >>> >us >>> >do great visualizations that work exactly same in Flash and HTML5! >>> > >>> >A couple of things I noticed: >>> > >>> >1. I see unnecessary horizontal and vertical scrollbars. It seems >>>that >>> >the the chart elements do not fit inside the div's width and height. >>> >2. I am looking at the HTML for the chart, for example:Gist here: >>> >https://gist.github.com/bigosmallm/ae510538df51b8356d7d >>> > >>> >I see that we are creating a whole bunch of unnecessary divs and svg >>> >elements. Would it be better if we created on SVG drawing canvas and >>>drew >>> >all the graphics inside it? It would make for a cleaner >>>implementation >>> >and >>> >better runtime performance. >>> > >>> >I am thinking that we will create a GraphicsContainer class which >>>would >>> >extend off of UIBase. Inside it would be one SVG element where you >>>can >>> >draw all the graphic elements in one co-ordinate space. >>> > >>> >Let me know what you think. >>> > >>> >Thanks, >>> >Om >>> >>> >
