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:

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:

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:

Marimekko Chart

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

<chart showvalues="0" caption="Market Share Analysis" subcaption="2009" numberprefix="$" xaxisname="Market Segment" yaxisname="Market Share" animation="1" stack100percent="0"  legendcaption="Manufacturer" canvasbgangle="0" canvasborderthickness="2" chartleftmargin="5" chartrightmargin="15" charttopmargin="10" chartbottommargin="20" captionpadding="10" xaxisnamepadding="5" yaxisnamepadding="5" yaxisvaluespadding="2" labelpadding="3" basefontsize="10" outcnvbasefontsize="12" zeroplanealpha="80" zeroplanethickness="2" bgcolor="CBCBCB,E9E9E9" bgalpha="10,10" showxaxispercentvalues="1" usepercentdistribution="1" plotgradientcolor="" outcnvbasefontcolor="8F8F8F" >
    <categories>
        <category label="Desktop" widthpercent=""/>
        <category label="Laptop" widthpercent="33"/>
        <category label="Notebook" widthpercent="34"/>
    </categories>
    <dataset seriesName="Alpha" color_cc="1A86D3" color="1A86D3">
        <set value="335000"/>
        <set value="225100"/>
        <set value="164200"/>
    </dataset>
    <dataset seriesName="Beta" color_cc="91C43E" color="91C43E">
        <set value="245000"/>
        <set value="198000"/>
        <set value="120000"/>
    </dataset>
    <dataset seriesName="Gamma" color="BFBFBF" color_cc="BFBFBF">
        <set value="298000"/>
        <set value="109300"/>
        <set value="153600"/>
    </dataset>
</chart>

Output:

Bubble Chart

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

<chart bgAlpha='0' canvasBgAlpha='0' xAxisName='Price (Bt./kg.)' yAxisName='Original Cost (Bt./kg.)' numDivLines='4' showAlternateVGridColor='1'
AlternateVGridAlpha='30' numberPrefix='$'>
    <categories verticalLineColor='666666' verticalLineAlpha='20'>
        <category label='0' x='0' />
        <category label='5' x='5' sL='1'/>
        <category label='10' x='10' sL='1'/>
        <category label='15' x='15' sL='1'/>
        <category label='20' x='20' sL='1'/>
        <category label='25' x='25' sL='1'/>
        <category label='30' x='30' sL='1'/>
        <category label='35' x='35' sL='1'/>
        <category label='40' x='40' sL='1'/>
        <category label='45' x='45' sL='1'/>
    </categories>
    <dataSet color='ff5904' seriesName='1996' showValues='0'>
        <set x='30' y='35' z='116' name='Mango' />
        <set x='42' y='60' z='99' name='Apple' />
        <set x='8' y='15' z='33' name='Orange'/>
    </dataSet>
    <dataSet color='4371AB' seriesName='1997' >
        <set x='14' y='35' z='116' name='Mango'/>
        <set x='22' y='20' z='99' name='Apple'/>
        <set x='28' y='25' z='33' name='Orange'/>
    </dataSet>
    <trendlines>
        <line Value='50' isTrendZone='0' displayValue='Trend'/>
    </trendlines>
</chart>

Output:

Doughnut Chart

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


<chart caption='Doughnut Chart' subcaption='(Alpha)' palette='4' decimals='0' enableSmartLabels='1' enableRotation='0' bgAngle='360' showBorder='1' startingAngle='70' >
    <set label='AAA' value='25'/>
    <set label='BBB' value='50'/>
    <set label='CCC' value='75'/>
</chart>


Output:

Stack Chart

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


<chart caption="Stack Chart" palette="1" lineThickness="2" showValues="0" rotateNames="1" slantLabels="1" areaOverColumns="0" formatNumberScale="0">
<Categories>
    <Category Label="AAA"/>
</Categories>
<dataset seriesname="A">
    <set value="25"/>
</dataset>
<dataset seriesname="B">
    <set value="50"/>
</dataset>
<dataset seriesname="C">
    <set value="75"/>
</dataset>
</chart>

Output:

Funnel and Pyramid Charts

The following XML is used to generate Funnel and Pyramid Chart and it requires FI2_Funnel.swf and FI2_Pyramid.swf file in order to generate the output.

<chart linethickness="1" caption="Funnel&Pyramid">
    <Set label="AAA" Value="25"/>
    <Set label="BBB" Value="50"/>
    <Set label="CCC" Value="75"/>
</chart>

Output:

Line Chart

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

<chart caption="CostDriverRate - Analysis" linethickness="1">
<Categories>
    <Category label="AAA"/><Category label="BBB"/><Category label="CCC"/>
</Categories>
<dataset seriesname="AUG2012">
    <set value="25"/><set value="50"/><set value="75"/>
</dataset>
</chart>

Output:

Combination Chart

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

<chart caption="" palette="1" lineThickness="2" showValues="0" rotateNames="1" slantLabels="1" areaOverColumns="0" formatNumberScale="0">
<Categories>
    <Category Label="AAA"/>
</Categories>
    <dataset seriesname="A"><set value="25"/></dataset>
    <dataset seriesname="B"><set value="50"/></dataset>
    <dataset seriesname="C"><set value="75"/></dataset>
</chart>

Output:

Bar Chart

The Following XML is used to generate Bar Chart and it requires MSColumn2D.swf/MSColumn3D.swf
to display the output.

<chart caption='Bar Chart' palette='1' lineThickness='2' showValues='0' rotateNames='1' slantLabels='1' areaOverColumns='0' formatNumberScale='0'>
<Categories>
    <Category Label= 'AAA'/>
    <Category Label= 'BBB'/>
    <Category Label= 'CCC'/>
    </Categories>
<dataset seriesname='Cost'>
    <set value='25'/>
    <set value='50'/>
    <set value='75'/>
</dataset>
</chart>

Output:

Area Chart

The following XML is used to generate Area Chart.It requires Area.swf file in order to generate output.

<chart bgColor="E9E9E9" outCnvBaseFontColor="666666" caption="Area Chart" showValues="1" plotFillAlpha="50" numVDivLines="5" showAlternateVGridColor="1"

AlternateVGridColor="e1f5ff" divLineColor="e1f5ff" vdivLineColor="e1f5ff" baseFontColor="666666" canvasBorderThickness="1" showPlotBorder="1"

plotBorderThickness="0">
<Categories>
    <Category label="AAA"/>
    <Category label="BBB"/>
    <Category label="CCC"/>
</Categories>
<dataset seriesname="AUG2012">
    <set value="25"/>
    <set value="50"/>
    <set value="75"/>
</dataset>
</chart>

Output:

Steps to Deploy Web Application in ASP.Net

To Deploy the Web Application You have created in ASP.NET follow the steps:-

1. Open the Web application project that you want to deploy. In this case,open the SampleVB     project.

2.Select File->New Project to open the New Project Dialog box.

3. From the Project Types pane, select Setup and Deployment Projects.From the Templates pane, select Web Setup Project.

4. Change the default name of the project. In this case, change it to “SampleVBDeploy.”

5. Click OK to complete the process. The project is added in the SolutionExplorer window. Also, a File System editor window appears to the left.The editor window has two panes. The left pane displays different items. The right pane displays the content of the itemselected in the left pane.

6. Select Web Application Folder in the left pane of the File System editor window
 
7.Then,from the File menu select Add -> Existing Website to open the Add Existing WebSite Dialog box.Choose the Web Application that you want to Deploy(In our case its SampleVB).The Web Application will be added in the Solution Explorer Window 

8.Then, from the Action menu, select Add ® Project Output to open the Add Project Output Group dialog box.

9. Verify that SampleVB is selected in the Project drop-down list. Then,select Content Files from the list.

10. Click OK. The content files of the SampleVB project are added to the solution.

11. Select Web Application Folder in the File System editor and select Properties Window from the View menu to open the Properties window.

12. Set the VirtualDirectory property to a folder, <folder name>, that would be the virtual directory on the target computer where you want to install the application. By default, this property is set to SampleVBDeploy,which is the name of the Web Setup project that youadded. In this case, set the property to DeployedApplication.

Caution The <folder name> should be a new folder name and should not already exist on the target machine. Otherwise, the contents in the folder will be overwritten.
 
13. In the same Properties window of the Web Application Folder, set the DefaultDocument property to Default.aspx. This property is used to set the default Web Forms page for the application.

14. Build the solution by selecting Build Solution from the Build menu.

15. After the solution is built successfully, a SampleVBDeploy.msi file is created in the Debug directory of the Web Setup project. The default path is \documents and settings\<login name>\My Documents\VisualStudioProjects\SampleVB\SampleVBDeploy\Debug\
SampleVBDeploy.msi.

16. Copy the SampleVBDeploy.msi file to the Web server computer (c:\inetpub\wwwroot) where you want to deploy the application.

17. Double-click the SampleVBDeploy.msi file on the target computer to run the installer.

Note To run the installer, you must have the install permissions on the computer. And, to install to the Web server, you must have IIS permissions.

After the installation is complete, you can run your application on the target computer. Todo so, start Internet Explorer and enter http://<computer name or IP Address>/DeployedApplication in the address box.

Treeview Drilldown.mxml

The following code is used to drilldown data and display data in a treeview format in FLEX.



<?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"
               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:Script>
        <![CDATA[
            import COMMON.*;
           
            import mx.collections.ArrayCollection;
            import mx.collections.IHierarchicalCollectionView;
            import mx.events.FlexEvent;

                [Bindable]
                private var AdvGrdArrCol:ArrayCollection= new ArrayCollection
                private var ParentArrCol:ArrayCollection = new ArrayCollection
                private var xml:String = "";
                private var TQty:int;
                private var TSal:int;
                private var Qty:int;
                private var Sal:int;       

                protected function recurse(o:Object):uint
                {
                    // grab the general list, for commodity
                    var view:IHierarchicalCollectionView = AdDtGv.dataProvider as IHierarchicalCollectionView;
                    // I count as 1 if we're recursing through me
                    var total:uint = 1;
               
                    // check if I'm open
                    for each (var e:Object in view.openNodes)
                    {
                        if (e == o)
                        {
                            // if so I need to add my children and their families
                            for each (var c:Object in o.children)
                            total += recurse(c);
                        }
                    }
                    // if not I'm done, just counting myself
               
                    return total
                }
           
                protected function application1_creationCompleteHandler(event:FlexEvent):void
                {
                    useWebService("Test_Test", "ADVGRD", "", "", "", "", "", "");
                }

                private function WebService_Result(event:Object):void
                {
                    AdvGrdArrCol = event.result.Tables.Table.Rows;
                    var TmpAct:String = "";
                    var TmpActNew:String = "";
                    for (var Loop:int=0; Loop<=AdvGrdArrCol.length-1;Loop++)
                    {
                        var obj:Object = new Object();
                        var tmpArr:ArrayCollection = new ArrayCollection();
                        var CustArr:ArrayCollection = new ArrayCollection();
                        if (TmpAct != AdvGrdArrCol[Loop].ACT)
                        {
                        TQty = 0;
                        TSal = 0;
                        obj['ACT'] = AdvGrdArrCol[Loop].ACT
                        TmpAct = AdvGrdArrCol[Loop].ACT
                        for (var i:int=0; i<=AdvGrdArrCol.length-1;i++)
                        {
                            Qty = 0;
                            Sal = 0;
                            if (TmpAct == AdvGrdArrCol[i].ACT)
                            {
                                if (TmpActNew != AdvGrdArrCol[i].CUST)
                                {   
                                    tmpArr = new ArrayCollection();
                                    var objnew:Object = new Object();
                                    objnew['ACT'] = AdvGrdArrCol[i].CUST
                                    TmpActNew = AdvGrdArrCol[i].CUST
                                    for (var j:int=0; j<=AdvGrdArrCol.length-1;j++)
                                    {
                                        if (TmpActNew == AdvGrdArrCol[j].CUST)
                                        {
                                            var TmpObj:Object = new Object();
                                            TmpObj['PRD'] = AdvGrdArrCol[j].PRD
                                            TmpObj['QTY'] = AdvGrdArrCol[j].QTY
                                            TmpObj['VAL'] = AdvGrdArrCol[j].VAL
                                            tmpArr.addItem(TmpObj);
                                            TQty = TQty + AdvGrdArrCol[j].QTY
                                            TSal = TSal + AdvGrdArrCol[j].VAL
                                            Qty = Qty + AdvGrdArrCol[j].QTY
                                            Sal = Sal + AdvGrdArrCol[j].VAL
                                        }
                                    }
                                    objnew['QTY'] = Qty
                                    objnew['VAL'] = Sal
                                    objnew['children'] = tmpArr
                                    CustArr.addItem(objnew);
                                    obj['QTY'] = TQty
                                    obj['VAL'] = TSal
                                    obj['children'] = CustArr
                                }
                            }
                        }
                        ParentArrCol.addItem(obj)
                        }
                    }
                }       
        ]]>
    </fx:Script>
        <mx:AdvancedDataGrid x="30" y="25" id="AdDtGv" height="300">
            <mx:dataProvider>
                <mx:HierarchicalData source="{ParentArrCol}"/>
            </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="Activity" dataField="ACT" width="150"/>
            <mx:AdvancedDataGridColumn headerText="Product" dataField="PRD" width="200"/>
            <mx:AdvancedDataGridColumn headerText="Quantity" dataField="QTY"/>
            <mx:AdvancedDataGridColumn headerText="SalesValue" dataField="VAL"/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</s:Application>

LineChartRenderer.mxml

The following code generates line chart.And the line chart can be drilldown based on adding Levels in the following Zoomintoseries().


<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%" creationComplete="initApp()">
   
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.charts.HitData;
            import mx.charts.events.ChartItemEvent;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.soap.WebService;
           
            private var ws:WebService;
            private var Level:int = 0;
            private var Cdtxt:String = "";
            private var LocCd:String = "";
            private var Cd:String = "";
           
            [Bindable]
            public var dpac:ArrayCollection = new ArrayCollection
           
            public var initSeriesArray:Array = new Array();
            public var level:Number = 1;
            public var newSeries:Array;
            [Bindable]
            public var drillDownDataSet:ArrayCollection;
           
            [Bindable]
            public var dp:ArrayCollection = dpac;

            override public function set data(value:Object):void
            {
                super.data = value;
               
                if (value.hasOwnProperty("detail1"))
                    //chart.dataProvider = value.detail1;
                    dp = value.detail1;
                    dpac = dp
/*                     var TmpObj:Object = new Object();
                    TmpObj['CUST'] = 'TSD1'
                    TmpObj['amount'] = 100000
                    dp.addItem(TmpObj);
 */            }
           
            private function initApp():void
            {
                initSeriesArray = chart.series;            
            }
           
            private function zoomIntoSeries(e:ChartItemEvent):void
            {
                e.stopImmediatePropagation();
                var hitData:HitData = e.hitData;
               
                if (Level==0)
                {
                    Cdtxt = "DRILL1"
                    LocCd = hitData.item.CUST;
                    Cd = "";
                }
                else if (Level==1)
                {
                    Cdtxt = "DRILL2"
                    LocCd = hitData.item.LOC;
                    Cd = hitData.item.CUST;
                }
                else
                {
                    Cdtxt = "DRILL"
                    LocCd = hitData.item.LOC;
                    Cd = "";               
                }
               
                ws = new WebService();
                ws.wsdl="http://localhost/ds/Service1.asmx?WSDL";
                ws.addEventListener("result", echoResultHandler);
                ws.addEventListener("fault", faultHandler);
                ws.loadWSDL();
                ws.search("Test_Test", Cdtxt, Cd, "", LocCd, "", "", "");
               
            }
           
            private function echoResultHandler(event:ResultEvent):void
            {
                var pietmpArr:ArrayCollection = new ArrayCollection();
                var TmpArr:ArrayCollection = new ArrayCollection();
                pietmpArr = event.result.Tables.Table.Rows;
                for (var i:int=0; i<=pietmpArr.length-1;i++)
                {
                    var TmpObj:Object = new Object();
                    TmpObj['CUST'] = pietmpArr[i].ACT
                    TmpObj['amount'] = pietmpArr[i].VAL
                    TmpObj['LOC'] = pietmpArr[i].CD
                    TmpArr.addItem(TmpObj);
                }
                dp = TmpArr
                if (Cdtxt == "DRILL")
                {
                    Level = 0
    /*                 var TmpObj:Object = new Object();
                    TmpObj['CUST'] = 'TSD1'
                    TmpObj['amount'] = 100000
                    dp.addItem(TmpObj); */
                }
                else
                {
                    Level = Level + 1   
                }   
            }
           
            private function faultHandler(event:FaultEvent):void
            {
                Alert.show("Bye")
            }

        ]]>
    </mx:Script>

    <mx:SeriesZoom id="zoomIn"  duration="1000"  verticalFocus="bottom"/>
    <mx:SeriesSlide id="zoomOut" duration="1000" direction="left"/>

    <mx:LineChart id="chart"
                  height="178"
                  width="100%"
                  gridLinesStyleName=""
                  showDataTips="true"
                  dataProvider="{dp}"
                  itemClick="zoomIntoSeries(event)">
<!--        <mx:series>
            <mx:LineSeries yField="amount" form="curve"  >
                <mx:lineStroke>
                    <mx:Stroke weight="1"  />
                </mx:lineStroke>
            </mx:LineSeries>
        </mx:series>
-->       
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca1" categoryField="CUST"/>
        </mx:horizontalAxis>

        <mx:series>
            <mx:LineSeries id="s1"
                           xField="CUST" 
                           yField="amount"
                           form="curve"
                           displayName="CUST"
                           hideDataEffect="zoomOut"
                           showDataEffect="zoomIn"
/>
<!--            <mx:LineSeries id="s1" yField="amount" form="curve" displayName="AMOUNT"/>-->
        </mx:series>

        <mx:horizontalAxisRenderer>
            <mx:AxisRenderer visible="true"/>
        </mx:horizontalAxisRenderer>
        <mx:verticalAxisRenderer>
            <mx:AxisRenderer visible="true"/>
        </mx:verticalAxisRenderer>
    </mx:LineChart>
</mx:HBox>

Generate PDF from AdvancedDataGrid in FLEX

This code is used to generate PDF from AdvancedDataGrid in FLEX.
            private function generatePDF():void
            {
                 //ChDg.expandAll();
                //ChDg.height = 1800;
                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);
                myPDF.addImage(ChDg,0,0,198,0,"JPG",100,1,"None","FitToPage",true,"");
               
                var bytes:ByteArray = myPDF.save(Method.LOCAL);
                var f:FileReference = new FileReference();
                f.save(bytes,"test.pdf");
            }