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: