16220

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- 
Placing tick marks and values inside angular gauge

    Attributes:
        # placeTicksInside
        # placeValuesInside
 -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var cSatScoreChart = new FusionCharts({
        type: 'angulargauge',
        renderAt: 'chart-container',
        width: '400',
        height: '250',
        dataFormat: 'xml',
        dataSource: '<chart bgcolor="FFFFFF" showBorder="0" formatNumberScale="1" decimals="2" chartLeftMargin="0" lowerLimit="0" origW="400" origH="250" manageResize="1" showValue="1" majorTMNumber="10" majorTMHeight="8" tickValueDistance="10" palette="0" gaugeEndAngle="0" manageValueOverlapping="1" gaugeInnerRadius="2" autoAlignTickValues="1" showGaugeBorder="0" showPivotBorder="0" pivotBorderColor="000000" pivotFillMix="FFFFFF,000000">  <styles>    <definition>      <style name="ValueLabel" type="font" size="12" color="49563A" bold="1" />    </definition>    <application>      <apply toObject="VALUE" styles="ValueLabel" />    </application>  </styles>  <annotations>    <annotationGroup id="supplierName">      <annotation type="text" label="Test Name" align="left" leftMargin="5" x="0" y="$chartCenterY-120" bold="0" fontSize="14" fontColor="515151" font="Calibri" />    </annotationGroup>  </annotations>  <colorRange>    <color minValue="0" maxValue="10.00" code="399E38" />    <color minValue="10.00" maxValue="30.00" code="E48739" />    <color minValue="30.00" maxValue="50.00" code="B41527" />  </colorRange>  <dials>    <dial value="0.4500285551113649343232438608" borderAlpha="0" bgColor="000000" radius="130" />  </dials></chart>'
    }).render();
});