FusionCharts - Column 2D Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by sanjuktamukherjee

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!--
    A simple Column 2D chart showing monthly revenue of Harry's SuperMart for last year.
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'angulargauge',
        renderAt: 'chart-container',
        width: '600',
        height: '600',
        dataFormat: 'xml',
        dataSource: '<chart manageresize="1" origw="300" origh="150" bgcolor="000000" showlimits="1" upperlimit="300" lowerlimit="0" basefontcolor="FFFFFF" majortmnumber="5" majortmcolor="FFFFFF" majortmheight="5" minortmnumber="5" minortmcolor="FFFFFF" minortmheight="3" tooltipbordercolor="FFFFFF" tooltipbgcolor="333333" gaugeouterradius="100" placevaluesinside="1" gaugeinnerradius="80%" annrenderdelay="0" gaugefillmix="" pivotradius="10" showpivotborder="0" pivotfillmix="{CCCCCC},{333333}" pivotfillratio="50,50" showshadow="0" gaugeoriginx="150" gaugeoriginy="150" showborder="0" showValue="1"> <colorrange> <color minvalue="0" maxvalue="100" code="#FF0000" alpha="40"/> <color minvalue="100" maxvalue="200" code="#FF6600" alpha="40"/> <color minvalue="200" maxvalue="300" code="#00FF00" alpha="40"/> </colorrange> <dials> <dial value="0" bordercolor="FFFFFF" bgcolor="01ABDD,B8DCF9,01ABDD" borderalpha="0" basewidth="10"/> </dials> <annotations> <annotationgroup x="150" y="150" showbelow="1"> <annotation type="circle" x="0" y="0" startangle="0" endangle="180" radius="145" fillcolor="#01ABDD,B8DCF9" fillpattern="linear" fillalpha="100,100" fillratio="50,50" fillangle="-45"/> <annotation type="circle" x="0" y="0" startangle="0" endangle="180" radius="120" fillcolor="111111,cccccc" fillpattern="linear" fillalpha="100,100" fillratio="50,50" fillangle="-45"/> <annotation type="circle" x="0" y="0" startangle="0" endangle="180" radius="110" color="666666"/> </annotationgroup> </annotations> <styles> <definition> <style type="font" name="myValueFont" bold="1" color="B8DCF9" bgColor="F1f1f1" borderColor="B8DCF9"/> </definition> <application> <apply toObject="Value" styles="myValueFont"/> </application> </styles> </chart>'
    });
    revenueChart.render();
});