[FLEX / AS3] Charts op TileList m.b.t. ItemRenderer

[Spiral]

Ik heb meerdere lijngrafieken en deze wil ik in een TileList drukken. Alleen de TileList rendered de default instantie van mijn mxml klasse LijnGrafiek met default x-as en y-as waarden. Dus er wordt geen lijn getoond. In het geheel wordt variabele arrdp straks een globale var en dmv Bindable attribuut luisterd het ernaar. Ik heb wel een andere werkende oplossing met een normale container, maar ik wil het graag in een TileList zodat ik niet hoef te denken aan hoeveel grafieken er naast mekaar kunnen staan.

De vraag is waarom wordt de grafiek niet getoond.

Applicatie.mxml:

Flash ActionScript:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    creationComplete="init();" xmlns:local="*">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var arrdp:ArrayCollection = new ArrayCollection();
            
            private function init():void
            {
                var myChart:LijnGrafiek = new LijnGrafiek();
                myChart.initialize();           
                
                var arr:Array = new Array();
                var ent:Entry = new Entry();
                ent.datum = new Date(2009,11,5);
                ent.waarde = 1000;
                arr.push(ent);
                
                ent = new Entry();
                ent.datum = new Date(2009,11,6);
                ent.waarde = 1100;
                arr.push(ent);
                
                myChart.addSeries(arr, "serie1", "datum", "waarde");
                arrdp.addItem(myChart);         
            }
        ]]>
    </mx:Script>
    <mx:TileList id="myList" dataProvider="arrdp" itemRenderer="LijnGrafiek" width="100%" height="100%" />
</mx:Application>

LijnGrafiek.mxml

Flash ActionScript:

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
    <mx:Script>
        <![CDATA[
            import mx.charts.series.LineSeries;
            import mx.charts.chartClasses.IAxis;
        
            public var lineDrawed:Boolean = false;
            
            private function horizontalLabel(labelValue:Object, previousValue:Object, axis:IAxis):String
            {
                var result:String = "Onbekend";
                if(labelValue is Date)
                    result = dateformatter.format(labelValue);          
                return result;
            }

            public function addSeries(entries:Array, serienaam:String, xAsProperty:String, yAsProperty:String):void
            {
            
                if(entries != null && entries.length > 1)
                {                       
                    var ls:LineSeries = new LineSeries();
                    ls.xField = xAsProperty;
                    ls.yField = yAsProperty;
                    ls.displayName = serienaam;
                    ls.dataProvider = entries;                  
                    lijngrafiek.series.push(ls);
                }
            }           
        ]]>
    </mx:Script>
    <mx:DateFormatter id="dateformatter" formatString="D/M/YY" />
    <mx:LineChart id="lijngrafiek" showDataTips="true">
        <mx:verticalAxis>
            <mx:LinearAxis displayName="Waarde" />
        </mx:verticalAxis>
        <mx:horizontalAxis>
            <mx:DateTimeAxis displayName="Datum" labelFunction="horizontalLabel"/>
        </mx:horizontalAxis>
    </mx:LineChart>
    <mx:Legend dataProvider="{lijngrafiek}" />
</mx:Panel>

ps: Zijn er code-tags aanwezig voor Flex/mxml

[Tsjilp]

Als je de addSeries fucntie vervangd door set data(), en in je array alleen de waardes zet in plaats van de hele grafiek, dan zou het moeten werken

[Verwijderd]

Je TileList maakt gebruik van een itemRenderer, je hoeft deze dus niet zelf aan te maken dat doet het framework voor je. Alleen zul je de nodige dingen moeten doen in de itemRenderer zelf om de Serie zichtbaar te maken:

Applicatie.mxml, alleen dataprovider vullen met Objecten:

code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    creationComplete="init();" xmlns:local="*">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var arrdp:ArrayCollection = new ArrayCollection();
            
            private function init():void
            {
         
                var myDataObj:Object = new Object();                
                var arr:ArrayCollection = new ArrayCollection();
                
                // Vul dataProvider van Grafiek
                var obj:Object = new Object();
                obj.datum = new Date(2009,11,8);
                obj.waarde = 1000;
                arr.addItem(obj);

                obj = new Object();
                obj.datum = new Date(2009,11,9);
                obj.waarde = 1100;
                arr.addItem(obj);
                
                // Object met de nodige waardes die nodig zijn in de itemRenderer
                myDataObj.dataCollection = arr;
                myDataObj.yField = "waarde";
                myDataObj.xField = "datum";
                myDataObj.serieName = "serie1";
                
                // Toevoegen aan dataProvider van de TileList
                arrdp.addItem(myDataObj);
                          
            }
        ]]>
    </mx:Script>
    <mx:TileList id="myList" dataProvider="{arrdp}" itemRenderer="LijnGrafiek" width="100%" height="100%" />
</mx:Application>

Je itemRenderer, LijnGrafiek.mxml:

code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.charts.series.LineSeries;
            import mx.charts.chartClasses.IAxis;
        
            public var lineDrawed:Boolean = false;
            
            private function horizontalLabel(labelValue:Object, previousValue:Object, axis:IAxis):String
            {
                var result:String = "Onbekend";
                 if(labelValue is Date)
                     result = dateformatter.format(labelValue);             
                 return result;
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                    
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                
                // Doe alleen de eerste keer
                if(!lineDrawed)
                {
                    // de data variable bevat de waardes die we nodig hebben.
                    lijngrafiek.dataProvider = data.dataCollection;
                    var ls:LineSeries = new LineSeries();
                    ls.xField = data.xField;
                    ls.yField = data.yField;
                    ls.displayName = data.serieName;
                    var series:Array = lijngrafiek.series;
                    series.push(ls);
                    lijngrafiek.series = series;
                    lineDrawed = true;
                }
            }
         
        ]]>
    </mx:Script>
    <mx:DateFormatter id="dateformatter" formatString="D/M/YY" />
    <mx:LineChart id="lijngrafiek" showDataTips="true" width="100%" height="100%">
        <mx:verticalAxis>
            <mx:LinearAxis displayName="Waarde"/>
        </mx:verticalAxis>
        <mx:horizontalAxis>
            <mx:DateTimeAxis displayName="Datum" labelFunction="horizontalLabel" />
        </mx:horizontalAxis>
    </mx:LineChart>
    <mx:Legend dataProvider="{lijngrafiek}"/>
</mx:Panel>

Succes.

[Tsjilp]

Ik zou je aanraden het tekenen toch in de set data te doen, en niet in de updateDisplayList. Met bovenstaande manier wordt de grafiek maar 1x getekend, als na het tekenen de waardes wijzigen, dan wordt dit niet in de grafiek getoond. (Maar als dat nooit gebeurd, dan kan het prima in de updateDisplayList).