<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"  
    xmlns:zet="org.openzet.controls.*" layout="horizontal" creationComplete="initApp();" xmlns:dataGridClasses="org.openzet.controls.dataGridClasses.*">
    <mx:Script>
        <![CDATA[
            import mx.charts.series.LineSeries;
            import mx.events.AdvancedDataGridEvent;
            import mx.events.DataGridEvent;
            import mx.charts.series.ColumnSeries;
            import mx.charts.chartClasses.Series;
            import mx.core.UIComponent;
            import mx.managers.DragManager;
            import mx.events.DragEvent;
            import mx.collections.ArrayCollection;
            import flash.utils.*;
            import mx.charts.series.ColumnSeries;
            import org.openzet.controls.dataGridClasses.ICellSelectable;
            
            private function initApp():void {
                var arr:ArrayCollection = new ArrayCollection();
                var len:Number = 30 + Math.round(Math.random()*50);
                for (var i:int=0; i<len;i++) {
                    arr.addItem({});
                    arr[i].A= Math.random()*1000;
                    arr[i].B= Math.random()*1000;
                    arr[i].C= Math.random()*1000;
                    arr[i].D= Math.random()*1000;
                }
                dg.dataProvider = arr;
                dg2.dataProvider = arr;
                
            }
            private function dragEnterHandler(event:DragEvent):void {
                DragManager.acceptDragDrop(event.currentTarget as UIComponent);
                
            }
            private function dropHandler(event:DragEvent):void {
                var arr:ArrayCollection = ICellSelectable(event.dragInitiator).dragSelectionData as ArrayCollection;
                var fields:Array = cloneFields(arr);
                var series:Array=[];
                for (var i:int=0; i<fields.length;i++) {
                    var ser:ColumnSeries= new ColumnSeries();
                    ser.yField=fields[i];
                    ser.displayName = fields[i];
                    series.push(ser);
                } 
                chart.dataProvider=arr;
                chart.series=series; 
            }
            
            private function cloneFields(value:ArrayCollection):Array {
                var item:Object;
                var fields:Array;
                if (value && value.length >0) {
                    item = value[0];
                    fields = [];
                    for (var prop:String in item) {
                        fields.push(prop);
                    }
                }
                return fields;
            }
        ]]>
    </mx:Script>
    <mx:Panel width="100%" height="100%">
        <zet:AdvancedZetDataGrid rowHeight="30" enableDragSelection="true" seriesType="LineSeries"  id="dg" width="100%" height="100%">
            <zet:columns>
                <mx:AdvancedDataGridColumn dataField="A" textAlign="right" />
                <mx:AdvancedDataGridColumn dataField="B" textAlign="right" />
                <mx:AdvancedDataGridColumn dataField="C" textAlign="right" />
                <mx:AdvancedDataGridColumn dataField="D" textAlign="right" />
            </zet:columns>
        </zet:AdvancedZetDataGrid>
        <zet:ZetDataGrid  seriesType="BarSeries" enableDragSelection="true"   id="dg2" width="100%" height="100%">
            <zet:columns>
                <dataGridClasses:ZetDataGridColumn enableMerge="true" dataField="A" textAlign="right" />
                <dataGridClasses:ZetDataGridColumn enableMerge="true" dataField="B" textAlign="right" />
                <dataGridClasses:ZetDataGridColumn enableMerge="true" dataField="C" textAlign="right" />
                <dataGridClasses:ZetDataGridColumn enableMerge="true" dataField="D" textAlign="right" />
            </zet:columns>
        </zet:ZetDataGrid>
    </mx:Panel>
        <mx:ColumnChart id="chart" dragEnter="dragEnterHandler(event);" dragDrop="dropHandler(event);" width="100%" height="100%">
        </mx:ColumnChart>
</mx:Application>