Sunday, 9 June 2013

Excel export from datagrid in flex

The following code is used to export data from datagrid to excel in flex.

Code:
            private function ExportToExcel(FileName:String)
            {
                try
                {
                    var fields:Array = new Array();
                    var sheet:Sheet;
                   
                    fields = [];
                    sheet = new Sheet();
                   
                    var rowCont:int = gridRpt.dataProvider.source.length;
                    var dataprovd:ArrayCollection = new ArrayCollection(gridRpt.dataProvider.source);
                   
                    sheet.resize(rowCont + 9,gridRpt.columnCount);
                   
                    var Col:Array = gridRpt.columns;
                    var Ex:int = 0;
                    var ExStr:String = TopPanel.title.toString();
                    var CurrentDateTime:Date = new Date();
                    var CurrentDF:DateFormatter = new DateFormatter();
                    CurrentDF.formatString = "LL:NN:SS A"
                    var DateTimeString:String = CurrentDF.format(CurrentDateTime);
                    sheet.setCell(0,0,"ABIS~PRO");
                    sheet.setCell(2,6,ExStr);
                    sheet.setCell(0,12,"Date :");
                    sheet.setCell(0,13,Perd.text);
                    sheet.setCell(1,12,"Time :");
                    sheet.setCell(1,13,DateTimeString);

                        for each(var DGField:DataGridColumn in Col)
                        {
                            fields.push(DGField.dataField.toString());
                            sheet.setCell(8,Ex,DGField.headerText.toString());
                            Ex++;
                        }

                        for(var r:int = 0;r< rowCont;r++)
                        {
                            var Rec:Object = dataprovd.getItemAt(r);
                            var Erow:int = r+1;
                            //insertRecordInSheet(Erow,sheet,Rec);
                            //var ColCount:int = ColsArr.length;
                            var Exc:int = 0;
                            for(var c:int = 0; c<fields.length; c++)
                            {
                                var ExFld:String =fields[c];
                                if(Rec[ExFld] != null)
                                {   
                                    sheet.setCell(Erow+8,Exc,Rec[ExFld].toString());
                                }
                                Exc++;
                            }                   
                        }

                    var Exls:ExcelFile = new ExcelFile();
                    Exls.sheets.addItem(sheet);
                    var Byt:ByteArray = Exls.saveToByteArray();
                    var FileRef:FileReference = new FileReference();
                    FileRef.addEventListener(Event.SELECT,alert);
                    var ExcStr:String = FileName;
                    FileRef.save(Byt,ExcStr);
                }
                catch(ex:Error)
                {
                    Alert.show(ex.toString());
                }
                finally{}
            }

Wednesday, 22 May 2013

Redirect from one mxml to another mxml in Flex

The following code explains how to redirect from one mxml to another mxml.


<mx:ViewStack width="100%" height="100%" id="Stack" width.allCollapsed="1168"        height.allCollapsed="495">
              <local:MXML NAME1 width="250%" height="100%"/>
              <local:
MXML NAME2 width="250%" height="100%"/>
              <local:
MXML NAME3 width="250%" height="150%"/>
              <local:
MXML NAME4 width="250%" height="150%"/>
 </mx:ViewStack>

Tuesday, 21 May 2013

Generate multiple pages in PDF in flex

The following code is used to explain, How to generate multiple pages in PDF in flex.

            private function generatePDF():void
            {
                myPDF = new PDF(Orientation.PORTRAIT, Unit.MM, Size.A4);
                myPDF.setDisplayMode(Display.FULL_PAGE,Layout.SINGLE_PAGE);
                var newPage:Page = new Page(Orientation.PORTRAIT,Unit.MM,Size.A4);
                myPDF.addPage(newPage);
                for(var i:int=0;i<pageCount;i++)
                {                   
                    myPDF.addImage(datagridname,0,0,198,0,"PNG",100,1,"None","Normal",true,"");
                   
datagridname.nextPage();
                    myPDF.addPage();
                }
                var bytes:ByteArray = myPDF.save(Method.LOCAL);
                var f:FileReference = new FileReference();
                f.save(bytes,"test.pdf");
            }

Saturday, 11 May 2013

How to display reports in Flex

The following code generates reports in two tabs.In first tab reports generated in DataGrid and in second tab reports generated in Fusion Charts Using AdvancedDataGrid.

Code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:ProComp="ProComp.*"
               creationComplete="application1_creationCompleteHandler(event)">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script source="\\Common\\CommonScripts.as"/>
    <fx:Style source="\\Common\\ApplicationSkin.css" />
    <fx:Script>
        <![CDATA[
            import COMMON.*;

            import mx.charts.BarChart;
            import mx.charts.events.ChartItemEvent;
            import mx.collections.ArrayCollection;
            import mx.events.AdvancedDataGridEvent;
            import mx.events.FlexEvent;
            import mx.events.ListEvent;

            import com.adobe.fiber.runtime.lib.StringFunc;
            import com.as3xls.xls.ExcelFile;
            import com.as3xls.xls.Sheet;
           
            import mx.events.FlexEvent;
            import mx.utils.UIDUtil;
           
            import org.alivepdf.colors.RGBColor;
            import org.alivepdf.display.Display;
            import org.alivepdf.drawing.Joint;
            import org.alivepdf.fonts.FontFamily;
            import org.alivepdf.fonts.Style;
            import org.alivepdf.images.PNGImage;
            import org.alivepdf.layout.Layout;
            import org.alivepdf.layout.Orientation;
            import org.alivepdf.layout.Size;
            import org.alivepdf.layout.Unit;
            import org.alivepdf.pages.Page;
            import org.alivepdf.pdf.PDF;
            import org.alivepdf.saving.Method;
            import org.osmf.metadata.Metadata;
           
            private var myPDF:PDF;
            private var RowId:String = "";
           
            private var pdfData:ByteArray;
            private var contacts:ArrayCollection;
           
            [Bindable] public var collection:ArrayCollection = new ArrayCollection();

            [Bindable]
            private var AdvGrdArrCol:ArrayCollection= new ArrayCollection
            private var ParentArrCol:ArrayCollection= new ArrayCollection
            private var Sal:int;
            private var BarChartArr:ArrayCollection = new ArrayCollection

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                TbRc.selected = true;
                Act.selected = true;
                Res.selected = true;
            }

            protected function Btn_Prv_clickHandler(event:MouseEvent):void
            {
                var a:int;
                RowId = UIDUtil.createUID().toString();
                var startDS:String = StringFunc.replaceAll(Perd.text,"/","");
                //var sDate:Date = DateField.stringToDate(startDS,"MMDDYYYY");
                var mm:String = StringFunc.left(startDS,2) //StringFunc.substring(sDate.toString(),4,3);
                var year:String = StringFunc.right(startDS,4);
                var FinYr:String = year + mm;
                if (Res.selected = true)
                    a = 0;
                else if (Acts.selected = true)
                    a = 1;
                useWebService("Test_Test", "Report", "", "", FinYr, RowId, a.toString(), "");
                addEventListener("DBExeComp",OnGridLoad)
            }
           
            private function OnGridLoad(evt:Event):void
            {
                removeEventListener("DBExeComp",OnGridLoad)
                collection = RepArrCol[0];
                dynamicColumn();
                gridRpt.dataProvider = RepArrCol[1];
               
                var TmpAct:String = "";
                var TmpActNew:String = "";
                for (var Loop:int=0; Loop<=RepArrCol[2].length-1;Loop++)
                {
                    var obj:Object = new Object();
                    var tmpArrNew:ArrayCollection = new ArrayCollection();
                    var CustArr:ArrayCollection = new ArrayCollection();
                    Sal = 0;
                    if (TmpAct != RepArrCol[2][Loop].ACT)
                    {
                        var objnew:Object = new Object();
                        tmpArrNew = new ArrayCollection();
                        obj['ACT'] = RepArrCol[2][Loop].ACT
                        TmpAct = RepArrCol[2][Loop].ACT
                        for (var i:int=0; i<=RepArrCol[2].length-1;i++)
                        {
                            if (TmpAct == RepArrCol[2][i].ACT)
                            {
                                /* BAR CHART */
                                var barobj:Object = new Object();
                                barobj['CUST'] = RepArrCol[2][i].CUST
                                barobj['VALUE'] = RepArrCol[2][i].VAL
                                tmpArrNew.addItem(barobj)
                            }
                        }
                        //obj['VAL'] = Sal 
                        objnew['detail2'] = tmpArrNew
                        CustArr.addItem(objnew)
                        obj['children'] = CustArr                           
                        ParentArrCol.addItem(obj)
                    }
                }
            }
           
            private function dynamicColumn():void
            {
                this.gridRpt._hideHdnColumn = true;
                this.gridRpt._headerText = StringFunc.replaceAll(collection.source[0].headerText.toString(),"~",",");
                this.gridRpt._columnType = StringFunc.replaceAll(collection.source[0].coltyp.toString(),"~",",");
                this.gridRpt._fontSize = 10;
                this.gridRpt._fontName = "Arial";
                this.gridRpt._columnWidth = StringFunc.replaceAll(collection.source[0].width.toString(),"~",",");
                this.gridRpt._dataField = StringFunc.replaceAll(collection.source[0].dataField.toString(),"~",",");
            }

            protected function cmdExport_clickHandler(event:MouseEvent):void
            {   
                if(gridRpt.dataProvider.source.length != 0 )
                {
                    ExportToExcel("Test.xls");
                }
                else
                {
                    Alert.show("Report is Empty!","Information");
                    return;
                }
            }
           
            private function ExportToExcel(FileName:String)
            {
                try
                {
                    var fields:Array = new Array();
                    var sheet:Sheet;
                   
                    fields = [];
                    sheet = new Sheet();           
                   
                    var rowCont:int = gridRpt.dataProvider.source.length;
                    var dataprovd:ArrayCollection = new ArrayCollection(gridRpt.dataProvider.source);
                   
                    sheet.resize(rowCont + 9,gridRpt.columnCount);
                   
                    var Col:Array = gridRpt.columns;
                    var Ex:int = 0;
                    var ExStr:String = "Test.xls";
                    sheet.setCell(2,1,ExStr);
                    //sheet.setCell(4,0,"Date From: " + dt_From.text + " " + "To: " + dt_To.text);
                   
                    for each(var DGField:DataGridColumn in Col)
                    {
                        fields.push(DGField.dataField.toString());
                        sheet.setCell(8,Ex,DGField.headerText.toString());
                        Ex++;
                    }
                   
                    for(var r:int = 0;r< rowCont;r++)
                    {
                        var Rec:Object = dataprovd.getItemAt(r);
                        var Erow:int = r+1;
                        //insertRecordInSheet(Erow,sheet,Rec);
                        //var ColCount:int = ColsArr.length;
                        var Exc:int = 0;
                        for(var c:int = 0; c<fields.length; c++)
                        {
                            var ExFld:String =fields[c];
                            if(Rec[ExFld] != null)
                            {
                                sheet.setCell(Erow+8,Exc,Rec[ExFld].toString());
                            }
                            Exc++;
                        }
                       
                    }
                    var Exls:ExcelFile = new ExcelFile();
                    Exls.sheets.addItem(sheet);
                    var Byt:ByteArray = Exls.saveToByteArray();
                    var FileRef:FileReference = new FileReference();
                    FileRef.addEventListener(Event.SELECT,alert);
                    var ExcStr:String = FileName;
                    FileRef.save(Byt,ExcStr);
                }
                catch(ex:Error)
                {
                    Alert.show(ex.toString());
                }
                finally{}
            }
           
            private function alert(event:Event):void
            {   
                Alert.show(event.currentTarget.name + " has been exported successfully!","Information");
            }

        ]]>
    </fx:Script>

    <mx:TabNavigator x="38" y="84" width="1108" height="417">
        <s:NavigatorContent label="SegmentwiseCOst" width="100%" height="100%">
            <s:BorderContainer width="1086" height="373" id="brd" depth="1" x="10" y="4">
                <ProComp:DataGridPro id ="gridRpt" depth="1" _showHScroll = "true"
                                     tabIndex="6" showDataTips="true" doubleClickEnabled="true" visible="true"
                                     _filter="true" _headerHeight="50" top="10" left="10" right="10" bottom="10" _lockColumnCount="1"/>
            </s:BorderContainer>
        </s:NavigatorContent>
        <s:NavigatorContent label="Charts" width="100%" height="100%">
            <mx:AdvancedDataGrid id="ChDg"
                                 width="1008" height="346"
                                 variableRowHeight="true" x="40" y="10">
                <mx:dataProvider>
                    <mx:HierarchicalData source="{ParentArrCol}"/>
                </mx:dataProvider>
                <mx:rendererProviders>
                    <mx:AdvancedDataGridRendererProvider
                        dataField="detail2"
                        renderer="BarChartRenderer"
                        />        
                </mx:rendererProviders> 
                <mx:columns>
                    <mx:AdvancedDataGridColumn dataField="ACT" headerText="Act" width="50"/>
                    <!--<mx:AdvancedDataGridColumn dataField="detail2" headerText="Bar" width="150"/>-->
                </mx:columns>      
            </mx:AdvancedDataGrid>
        </s:NavigatorContent>
    </mx:TabNavigator>
    <s:Label x="726" y="6" text="Period"/>
    <s:Label x="73" y="16" text="Report Group"/>
    <s:Label x="322" y="12" text="Account Type"/>
    <s:Label x="491" y="10" text="Report Type"/>
    <s:RadioButton x="172" y="12" label="TbRecon" id="TbRc" groupName="RepGrp"/>
    <s:RadioButton x="172" y="38" label="TbRecon with FgWip" id="TbFg" groupName="RepGrp"/>
    <s:RadioButton x="408" y="12" label="Actual" id="Act" groupName="AccTyp"/>
    <s:RadioButton x="408" y="38" label="Budget" id="Bud" groupName="AccTyp"/>
    <s:RadioButton x="408" y="64" label="Standard" id="Std" groupName="AccTyp"/>
    <s:RadioButton x="573" y="10" label="ResourceWise" id="Res" groupName="RepTyp"/>
    <s:RadioButton x="573" y="38" label="ActivityWise" id="Acts" groupName="RepTyp"/>
    <s:Button x="726" y="43" label="Preview" id="Btn_Prv" click="Btn_Prv_clickHandler(event)"/>
    <s:Button x="808" y="43" label="Export" id="Btn_Exp" click="cmdExport_clickHandler(event)"/>
    <s:Button x="891" y="43" label="Generate PDF" id="Btn_Pdf"/>
    <mx:DateField x="771" y="6" id="Perd"/>
</s:Application>

Output:



Friday, 3 May 2013

Sliding Menu Bar

The following code is used to display the Sliding  Menu Bar.Here Menus can be viewed when needed and hidden when not.......


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               width="100%" height="100%" xmlns:local="*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.events.ListEvent;
           
             [Embed (source="/../Img/Plus.gif")]
            public var Plus:Class;

            [Embed (source="/../Img/Minus.gif")]
            public var Minus:Class;

            [Embed (source="/../Img/bar_arrow_right.png")]
            public var barright:Class;
           
            [Embed (source="/../Img/bar_arrow_left.png")]
            public var barleft:Class;

           
            [Bindable]
            private var ArrCol:ArrayCollection = new ArrayCollection
                ([
                    {item:'Master', children:['AccountCodeGrouping','AdvancedDataGrid']},
                    {item:'Charts', children:'FusionCharts'}
                ]); 
           
            private function showPanel():void
            {
                currentState=(currentState == 'PanelExpanded') ? 'allCollapsed' : 'PanelExpanded';

                if (pin.source == barleft)
                    pin.source = barright;
                else
                    pin.source = barleft;
            }

            protected function pin_clickHandler(event:MouseEvent):void
            {   
                showPanel();
            }
           
            private function load(event:MouseEvent):void
            {
                var a:int;

                if(Tree.selectedItem.toString() == 'AdvancedDataGrid')
                    a = 0;
                else if(Tree.selectedItem.toString() == 'AccountCodeGrouping')
                    a = 1;
                else if(Tree.selectedItem.toString() == 'FusionCharts')
                    a = 2;
                Stack.selectedIndex = a;
            }
           
            private function tree_itemClick(event:ListEvent):void
            {
                var item:Object = (event.currentTarget).selectedItem;
                if(Tree.dataDescriptor.isBranch(item))
                {
                    Tree.expandItem(item, !Tree.isItemOpen(item), true);
                }
            }
                   
        ]]>
    </fx:Script>

    <s:transitions>
        <s:Transition toState="PanelExpanded">
            <s:Parallel >
                <s:Resize target="{leftPanel}" duration="500"/>
                <s:Fade target="{leftPanel}"  duration="500" startDelay="250"/>
            </s:Parallel>
        </s:Transition>
    <s:Transition toState="allCollapsed">
            <s:Parallel>
                <s:Fade target="{leftPanel}" duration="500"/>
                <s:Resize target="{leftPanel}" duration="500" />
            </s:Parallel>
        </s:Transition>
    </s:transitions>

    <s:states>
        <s:State name="allCollapsed"/>
        <s:State name="PanelExpanded"/>
    </s:states>

    <s:VGroup width="100%" height="100%" gap="0" horizontalAlign="center" verticalAlign="middle">   
            <s:Group width="100%" height="100%" depth="2" >
            <s:Group width="100%" height="100%">
                <s:VGroup width="100%" height="100%" top="10" left="25" right="25">
                    <s:HGroup width="100%" height="100%" gap="1">
                        <s:VGroup width="175" height="100%" id="leftPanel" alpha.allCollapsed="0" width.allCollapsed="0"> <!--width.allCollapsed="0"-->
                                    <s:Group  bottom="10" height="100%" width="100%" >
                                        <mx:Tree id="Tree" dataProvider="{ArrCol}" labelField="item" width="200" height="100%" borderSkin="{null}"
                                                 folderClosedIcon="{null}" folderOpenIcon="{null}" click="load(event)" defaultLeafIcon="{null}"
                                                  useHandCursor="true" buttonMode="true" itemClick="tree_itemClick(event);" itemRenderer="ProComp.lblItem">
                                        </mx:Tree>
                                                 <!-- defaultLeafIcon="{Minus}" disclosureOpenIcon="{Minus}" disclosureClosedIcon="{Plus}" labelFunction="{fnTreeLable}" itemRenderer="ProComp.lblItem"-->       
                                    </s:Group>                   
                        </s:VGroup>
                        <s:VGroup width="7" height="100%" verticalAlign="middle" gap="0" horizontalAlign="center">
                            <s:BorderContainer width="2" height="100%" backgroundColor="blue" cornerRadius="0" mouseOut="showPanel()" visible="true" />
                            <mx:Image source="{barright}" click="pin_clickHandler(event)"
                                      id="pin" width.allCollapsed="10" x.allCollapsed="0" useHandCursor="true" buttonMode="true"/>
                            <s:BorderContainer width="2" height="100%" backgroundColor="blue" cornerRadius="0" mouseOut="showPanel()" visible="true"/>
                        </s:VGroup>
                        <s:VGroup width="100%" height="100%" paddingLeft="-1" top="5" bottom="5" right="10" gap="0">
                            <!--<s:HGroup id="HRptLink" width="100%" height="0%" />-->
                            <s:HGroup id="grpDGrid" width="100%" height="100%" width.allCollapsed="1168" height.allCollapsed="493">
                                <mx:ViewStack width="100%" height="100%" id="Stack" width.allCollapsed="1168" height.allCollapsed="495">
                                    <local:AdvanceDataGrid width="250%" height="100%"/>
                                    <local:AccountCodeGrouping width="250%" height="100%"/>
                                    <local:Charts width="250%" height="150%"/>
                                </mx:ViewStack>                           
                            </s:HGroup>
                        </s:VGroup>
                    </s:HGroup>
                </s:VGroup>       
            </s:Group>
        </s:Group>
</s:VGroup>
</s:Application>




Output:


Wednesday, 17 April 2013

True3D Chart

The following XML is used to generate True3D chart and it requires MSCombi3D.swf to generate the output.And the chart can be rotated in any direction.


<!-- 500 x 500 -->
<chart palette='2' caption='Country Comparison' showLabels='1' showvalues='0' decimals='0' numberPrefix='$' clustered='0' exeTime='1.5' showPlotBorder='0' zGapPlot='30' zDepth='90' divLineEffect='emboss' startAngX='10' endAngX='18' startAngY='-10' endAngY='-40'>
    <categories>
        <category label='Austria' />
        <category label='Brazil' />
        <category label='France' />
        <category label='Germany' />
<category label='USA' />
    </categories>
    <dataset seriesName='1998' color='8BBA00' showValues='0'>
        <set value='45000.65' />
        <set value='44835.76' />
        <set value='18722.18' />
        <set value='77557.31' />
        <set value='92633.68' />
    </dataset>
    <dataset seriesName='1997' color='F6BD0F' showValues='0'>
        <set value='57401.85' />
        <set value='41941.19' />
        <set value='45263.37' />
        <set value='117320.16' />
        <set value='114845.27' />
    </dataset>
 <dataset seriesName='1996' color='AFD8F8' showValues='0'>
        <set value='25601.34' />
        <set value='20148.82' />
        <set value='17372.76' />
        <set value='35407.15' />
        <set value='38105.68' />
    </dataset>
    <styles>
        <definition>
            <style name='captionFont' type='font' size='15' />
        </definition>
        <application>
            <apply toObject='caption' styles='captionfont' />
        </application>
    </styles>
</chart>


Output:


Angular Guage Chart

The following XML is used to generate Angular Guage chart and it requires Angularguage.swf to generate the output.

<chart manageResize="1" origW="340" origH="340" bgColor="FFFFFF" upperLimit="100" lowerLimit="0" showLimits="1" baseFontColor="666666"  majorTMNumber="11" majorTMColor="666666"  majorTMHeight="8" minorTMNumber="5" minorTMColor="666666" minorTMHeight="3" pivotRadius="20" showGaugeBorder="0" gaugeOuterRadius="100" gaugeInnerRadius="90" gaugeOriginX="170" gaugeOriginY="170" gaugeStartAngle="250" gaugeEndAngle="-70" placeValuesInside="1" gaugeFillMix="" pivotFillMix="{F0EFEA}, {BEBCB0}" pivotBorderColor="BEBCB0" pivotfillRatio="80,20" showShadow="0">
    <colorRange>
        <color minValue="0" maxValue="80" code="00FF00" alpha="0"/>
        <color minValue="80" maxValue="100" code="FF0000" alpha="50"/>
    </colorRange>
    <dials>
        <dial value="65" bordercolor="FFFFFF" bgColor="bebcb0, f0efea, bebcb0" borderAlpha="0" baseWidth="10" topWidth="3"/>
    </dials>
    <annotations>
        <annotationGroup x="170" y="170" >
        <!-- Draw the upper White Rounded Border -->
            <annotation type="circle" x="0" y="0" radius="150" borderColor= "bebcb0" fillAsGradient="1" fillColor="f0efea, bebcb0"  fillRatio="85,15"/>
            <annotation type="circle" x="0" y="0" radius="120" fillColor="bebcb0, f0efea" fillRatio="85,15" />
            <annotation type="circle" x="0" color="FFFFFF" y="0" radius="100" borderColor= "f0efea" />
        </annotationGroup>
    </annotations>
</chart>


Output:



Drag Node Chart

The following XML is used to generate DragNode chart and it requires Dragnode.swf to generate the output.


<chart palette='2' xAxisMinValue='0' xAxisMaxValue='100' yAxisMinValue='0' yAxisMaxValue='100' is3D='1' showFormBtn='0' viewMode='0' >
   <dataset seriesName='DS1'>
      <set x='12' y='79' width='70' height='56' name='Node 1 with a long label' color='FE3233' id='1'/>
      <set x='59' y='15' width='40' height='56' name='Node 2' color='FE9191' id='2' link='n-http://www.fusioncharts.com'/>
      <set x='88' y='75' radius='37' shape='circle' name='Node 3' color='62D0FE' id='3' link='n-http://www.fusioncharts.com'/>
      <set x='33' y='35' radius='37' shape='circle' name='Node 4' color='FE8181' id='4' link='n-http://www.fusioncharts.com'/>
      <set x='40' y='85' width='45' height='67' name='Node 5' color='FE7272' BorderColor='ff5904' id='5' />
      <set x='69' y='85' width='45' height='67' name='Node 6' color='72D4FE' id='6' link='n-http://www.fusioncharts.com'/>
      <set x='87' y='45' radius='47' shape='polygon' numSides='3' name='Node 7' color='FE5151' id='7' link='n-http://www.fusioncharts.com'/>
      <set x='65' y='60' radius='47' shape='polygon' numSides='5' name='Node 8' color='FE9191' id='8' link='n-http://www.fusioncharts.com'/>
      <set x='12' y='20' radius='37' shape='circle' name='Node 9' color='33C1FE' id='9' link='n-http://www.fusioncharts.com'/>
      <set x='80' y='12' radius='47' shape='polygon' numSides='4' name='Node 10' color='33C1FE' id='10' link='n-http://www.fusioncharts.com'/>
   </dataset>
   <connectors color='FF0000' stdThickness='5'>
      <connector strength='0.96' label='link label' from='1' to='9' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.8' label='link12' from='1' to='5' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.8' label='link2' from='1' to='8' color='BBBB00' />
      <connector strength='0.3' label='link3' from='1' to='4' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.4' label='link4' from='2' to='4' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.6' label='link5' from='4' to='2' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.33' label='link1' from='2' to='8' color='BBBB00'/>
      <connector strength='0.66' label='link7' from='8' to='3' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.7' label='link6' from='4' to='5' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.6' from='4' to='8' color='FF5904' arrowAtStart='1' arrowAtEnd='1'/>
      <connector strength='0.6' label='link9' from='5' to='8' color='BBBB00' />
      <connector strength='0.5' label='link10' from='7' to='8' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.3' label='link11' from='7' to='10' color='BBBB00'/>
   </connectors>
   <labels>
     <label text='Label at top' x='12' y='98' color='EFEFEF' borderColor='0F6A00'
fontsize='18' bgColor='35AE00'/>
   </labels>
</chart>


Output:



SPLine Chart

The following XML is used to generate SPLine chart and it requires SPLine.swf to generate the output.

<chart bgColor='f1f1f1' canvasbgcolor='1D8BD1,FFFFFF' canvasbgalpha='60' canvasbgangle='270' outcnvBaseFontColor='1D8BD1' caption="Fruit Production for

March" subCaption="(in Millions)" yaxisname="Quantity" xaxisname="Fruit" alternateHGridAlpha="30" alternateHGridColor="FFFFFF" canvasBorderThickness="1"

canvasBorderColor="114B78" baseFontColor="1D8BD1" hoverCapBorderColor="114B78" hoverCapBgColor="E7EFF6" plotGradientColor="DCE6F9" plotFillAngle='90'

plotFillColor='1D8BD1' plotfillalpha='80' showAnchors='0' canvaspadding='20' plotFillRatio='10,90' showPlotBorder='1' plotborderthickness='1'

divlinecolor='FFFFFF' divlinealpha='60' numberSuffix='M'>
  <set label="Orange" value="23"/>
  <set label="Apple" value="12"/>
  <set label="Banana" value="17"/>
  <set label="Mango" value="14"/>
  <set label="Litchi" value="12"/>
<styles>
    <definition>
        <style name='Bevel' type='bevel' distance='2' blurx='4' blury='1'/>
        <style name='DataValues' type='font' borderColor='1D8BD1' bgColor='1D8BD1' color='FFFFFF' />
    </definition>
    <application>
        <apply toObject='DATAPLOT' styles='Bevel' />
        <apply toObject='DATAVALUES' styles='DataValues' />
        </application>
</styles>
</chart>


Output:



Tuesday, 16 April 2013

Radar Chart

The following XML is used to generate Radar Chart and it requires Radar.swf file in order to generate the output.


<chart caption='Variance Analysis' bgColor='FFFFFF' radarFillColor='FFFFFF' plotFillAlpha='5' plotBorderThickness='2' anchorAlpha='100' numberPrefix='$' numDivLines='2' legendPosition='RIGHT'>
    <categories font='Arial' fontSize='11'  >
        <category label='Jan' />
        <category label='Feb' />
        <category label='Mar' />
        <category label='Apr' />
        <category label='May' />
        <category label='Jun' />
        <category label='Jul' />
        <category label='Aug' />
        <category label='Sep' />
        <category label='Oct' />
        <category label='Nov' />
        <category label='Dec' />
    </categories>
    <dataset seriesname='Products' color='CD6AC0' anchorSides='6' anchorRadius='2' anchorBorderColor='CD6AC0' anchorBgAlpha='0'>
<set value='1127654' />
        <set value='1226234' />
        <set value='1299456' />
        <set value='1311565' />
        <set value='1324454' />
        <set value='1357654' />
        <set value='1296234' />
        <set value='1359456' />
        <set value='1391565' />
        <set value='1414454' />
        <set value='1671565' />
        <set value='1134454' />
    </dataset>
    <dataset seriesname='Services' color='0099FF'  anchorSides='10' anchorBorderColor='0099FF' anchorBgAlpha='0' anchorRadius='2'>
        <set value='534241' />
        <set value='556728' />
        <set value='575619' />
        <set value='676713' />
        <set value='665520' />
        <set value='634241' />
        <set value='656728' />
        <set value='675619' />
        <set value='776713' />
        <set value='865520' />
        <set value='976713' />
        <set value='665520' />
    </dataset>
<styles>
<definition>
<style name='myCaptionFont' type='font' font='Arial' size='14' color='666666' bold='1' underline='1'/>
</definition>
<application>
<apply toObject='Caption' styles='myCaptionFont' />
</application>
</styles>
</chart>


Output:





Monday, 15 April 2013

Heatmap Chart

The following XML is used to generate Heatmap Chart and it requires HeatMap.swf file in order to generate the output.

<chart Caption='Monthly % conversion rates from different marketing mediums' subCaption='(Visits to Downloads)'>
        <rows>
            <row id='Search'/>
            <row id='Directories'/>
            <row id='Newsletter'/>
            <row id='External Articles'/>
            <row id='Paid Reviews'/>
            <row id='Social Media'/>
        </rows>
        <columns>
               <column id='Jan' />
               <column id='Feb' />
               <column id='Mar' />
               <column id='Apr' />
               <column id='May' />
               <column id='Jun' />
               <column id='Jul' />
               <column id='Aug' />
               <column id='Sep' />
               <column id='Oct' />
               <column id='Nov' />
               <column id='Dec' />
        </columns>
    <dataset>
        <set rowId='Search' columnId='Jan' value='21'/>
        <set rowId='Search' columnId='Feb' value='24'/>
        <set rowId='Search' columnId='Mar' value='25'/>
        <set rowId='Search' columnId='Apr' value='27'/>
        <set rowId='Search' columnId='May' value='32'/>
        <set rowId='Search' columnId='Jun' value='34'/>
        <set rowId='Search' columnId='Jul' value='35'/>
        <set rowId='Search' columnId='Aug' value='36'/>
        <set rowId='Search' columnId='Sep' value='40'/>
        <set rowId='Search' columnId='Oct' value='38'/>
        <set rowId='Search' columnId='Nov' value='36'/>
        <set rowId='Search' columnId='Dec' value='34'/>
        <set rowId='Directories' columnId='Jan' value='31'/>
        <set rowId='Directories' columnId='Feb' value='32'/>
        <set rowId='Directories' columnId='Mar' value='29'/>
        <set rowId='Directories' columnId='Apr' value='27'/>
        <set rowId='Directories' columnId='May' value='35'/>
        <set rowId='Directories' columnId='Jun' value='36'/>
        <set rowId='Directories' columnId='Jul' value='36'/>
        <set rowId='Directories' columnId='Aug' value='38'/>
        <set rowId='Directories' columnId='Sep' value='35'/>
        <set rowId='Directories' columnId='Oct' value='34'/>
        <set rowId='Directories' columnId='Nov' value='36'/>
        <set rowId='Directories' columnId='Dec' value='32'/>
        <set rowId='Newsletter' columnId='Jan' value='42'/>
        <set rowId='Newsletter' columnId='Feb' value='40'/>
        <set rowId='Newsletter' columnId='Mar' value='39'/>
        <set rowId='Newsletter' columnId='Apr' value='45'/>
        <set rowId='Newsletter' columnId='May' value='45'/>
        <set rowId='Newsletter' columnId='Jun' value='48'/>
        <set rowId='Newsletter' columnId='Jul' value='59'/>
        <set rowId='Newsletter' columnId='Aug' value='57'/>
        <set rowId='Newsletter' columnId='Sep' value='49'/>
        <set rowId='Newsletter' columnId='Oct' value='50'/>
        <set rowId='Newsletter' columnId='Nov' value='46'/>
        <set rowId='Newsletter' columnId='Dec' value='41'/>
        <set rowId='Social Media' columnId='Jan' value='13'/>
        <set rowId='Social Media' columnId='Feb' value='10'/>
        <set rowId='Social Media' columnId='Mar' value='12'/>
        <set rowId='Social Media' columnId='Apr' value='11'/>
        <set rowId='Social Media' columnId='May' value='10'/>
        <set rowId='Social Media' columnId='Jun' value='14'/>
        <set rowId='Social Media' columnId='Jul' value='19'/>
        <set rowId='Social Media' columnId='Aug' value='13'/>
        <set rowId='Social Media' columnId='Sep' value='12'/>
        <set rowId='Social Media' columnId='Oct' value='11'/>
        <set rowId='Social Media' columnId='Nov' value='9'/>
        <set rowId='Social Media' columnId='Dec' value='5'/>
        <set rowId='External Articles' columnId='Jan' value='31'/>
        <set rowId='External Articles' columnId='Feb' value='35'/>
        <set rowId='External Articles' columnId='Mar' value='36'/>
        <set rowId='External Articles' columnId='Apr' value='37'/>
        <set rowId='External Articles' columnId='May' value='37'/>
        <set rowId='External Articles' columnId='Jun' value='35'/>
        <set rowId='External Articles' columnId='Jul' value='36'/>
        <set rowId='External Articles' columnId='Aug' value='40'/>
        <set rowId='External Articles' columnId='Sep' value='35'/>
        <set rowId='External Articles' columnId='Oct' value='36'/>
        <set rowId='External Articles' columnId='Nov' value='33'/>
        <set rowId='External Articles' columnId='Dec' value='28'/>
        <set rowId='Paid Reviews' columnId='Jan' value='11'/>
        <set rowId='Paid Reviews' columnId='Feb' value='9'/>
        <set rowId='Paid Reviews' columnId='Mar' value='13'/>
        <set rowId='Paid Reviews' columnId='Apr' value='12'/>
        <set rowId='Paid Reviews' columnId='May' value='14'/>
        <set rowId='Paid Reviews' columnId='Jun' value='13'/>
        <set rowId='Paid Reviews' columnId='Jul' value='13'/>
        <set rowId='Paid Reviews' columnId='Aug' value='15'/>
        <set rowId='Paid Reviews' columnId='Sep' value='16'/>
        <set rowId='Paid Reviews' columnId='Oct' value='13'/>
        <set rowId='Paid Reviews' columnId='Nov' value='14'/>
        <set rowId='Paid Reviews' columnId='Dec' value='11'/>
   </dataset>
<!--We need only 2 colors for this legend - so we start with the green. have no color for the first color range and end with the red -->
    <colorRange gradient='1' minValue='0' code='CC0000' startlabel='Poor' endLabel="Excellent">
        <color maxValue='20' code='FBC860' label='Average'/>
        <color maxValue='50' code='81A749' label='Good'/>
        <color code='278127' maxValue='100'/>
     </colorRange>
</chart>


Output:



Pareto Chart

The following XML is used to generate Pareto Chart and it requires Pareto3D.swf file in order to generate the output.

<chart showvalues="0" caption="Software Testing Report" xaxisname="Type of Bugs" stack100percent="0" pyaxisname="No of Bugs" canvasbgangle="0" canvasborderthickness="2" chartleftmargin="10" chartrightmargin="5" charttopmargin="18" chartbottommargin="18" captionpadding="15" basefontsize="10" outcnvbasefontsize="11" zeroplanealpha="80" zeroplanethickness="2" bgcolor="FFFFFF" linecolor="3F3F3F" showplotborder="0" plotgradientcolor="" linethickness="3" linedashed="0" plotbordercolor="7F7F7F" showcanvasbg="0" showcanvasbase="1" canvasbasedepth="7" canvasbgdepth="1" canvasbgcolor="EFEFEF" canvasbgalpha="100" canvasbasecolor="D3DBCA" anchorradius="4" anchorbgcolor="FFFFFF" outcnvbasefont="Tahoma">
    <categories>
        <category label="GUI"/>
        <category label="Functional"/>
        <category label="Navigation"/>
        <category label="Cross Platform"/>
        <category label="Hardware"/>
        <category label="Runtime"/>
        <category label="Load Condition"/>
    </categories>
    <dataset seriesName="2008">
        <set value="205" color="1A2CA6" color_cc="1A2CA6"/>
        <set value="165" color="1A2CA6" color_cc="1A2CA6" alpha="90" alpha_cc="90"/>
        <set value="85" color="1A2CA6" color_cc="1A2CA6" alpha="75" alpha_cc="75"/>
        <set value="62" color="1A2CA6" color_cc="1A2CA6" alpha="65" alpha_cc="65"/>
        <set value="73" color="1A2CA6" color_cc="1A2CA6" alpha="70" alpha_cc="70"/>
        <set value="131" color="1A2CA6" color_cc="1A2CA6" alpha="85" alpha_cc="85"/>
        <set value="109" color="1A2CA6" color_cc="1A2CA6" alpha="80" alpha_cc="80"/>
    </dataset>
    <set value="205" color="1A2CA6" color_cc="1A2CA6" label="GUI"/>
    <set value="165" color="1A2CA6" color_cc="1A2CA6" alpha="90" alpha_cc="90" label="Functional"/>
    <set value="85" color="1A2CA6" color_cc="1A2CA6" alpha="75" alpha_cc="75" label="Navigation"/>
    <set value="62" color="1A2CA6" color_cc="1A2CA6" alpha="65" alpha_cc="65" label="Cross Platform"/>
    <set value="73" color="1A2CA6" color_cc="1A2CA6" alpha="70" alpha_cc="70" label="Hardware"/>
    <set value="131" color="1A2CA6" color_cc="1A2CA6" alpha="85" alpha_cc="85" label="Runtime"/>
    <set value="109" color="1A2CA6" color_cc="1A2CA6" alpha="80" alpha_cc="80" label="Load Condition"/>
</chart>


Output:



Waterfall Chart

The following XML is used to generate Waterfall Chart and it requires Waterfall2D.swf file in order to generate the output.

<chart caption='Product Earnings' yAxisName='In Million $' numberPrefix='$' numberSuffix='M' showValues='1' showConnectors='0' positiveColor='00FF00' negativeColor='FF0000' sumLabel='2006 Estimate' labelDisplay='Rotate' slantLabels='1'>
   <set label='2005 Actual' value='90' />
   <set label='Price' value='15' />
   <set label='Volume' value='21' />
   <set label='Fixes' value='-37' />
   <set label='Taxation' value='-83' />
   <set label='Escalation' value='-36' />
   <set label='Mix' value='46' />
   <set label='Market Effect' value='91' />
   <set label='Partners' value='61' />
    <styles>
        <definition>
            <style name='myCaptionFont' type='font' font='Arial' size='14' color='666666' bold='1' underline='1'/>
        </definition>
        <application>
            <apply toObject='Caption' styles='myCaptionFont' />
        </application>
    </styles>
</chart>


Output: