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" align="center">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'angulargauge',
renderAt: 'chart-container',
width: '530',
height: '170',
dataFormat: 'xml',
dataSource:"<chart manageresize='1' origw='400' origh='400' 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='530' gaugeoriginy='170' gaugestartangle='250' gaugeendangle='-70' placevaluesinside='1' gaugefillmix='' pivotfillmix=',' pivotbordercolor='BEBCB0' pivotfillratio='80,20' showshadow='0' showborder='0'><colorrange><color minvalue='0' maxvalue='60' code='FF0000' alpha='0' /> <color minvalue='60' maxvalue='100' code='00FF00' alpha='50' /> </colorrange><dials><dial value='81.94494' bordercolor='FFFFFF' bgcolor='bebcb0, f0efea, bebcb0' borderalpha='0' basewidth='10' topwidth='3' /> </dials><annotations><annotationgroup x='50%' y='170%'><annotation type='circle' x='481' y='0' radius='150' bordercolor='bebcb0' fillasgradient='1' fillcolor='f0efea, bebcb0' fillratio='85,15' /> <annotation type='circle' x='481' y='0' radius='120' fillcolor='bebcb0, f0efea' fillratio='85,15' /> <annotation type='circle' x='481' color='FFFFFF' y='0' radius='100' bordercolor='f0efea' /> </annotationgroup></annotations></chart>"
});
revenueChart.render();
});