Angular Gauge - Adding simple trend point
Created using FusionCharts Suite XT - www.fusioncharts.com
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>
<!-- AngularGauge - Adding simple trend point Element: # trendpoints -->
<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: '300',
dataFormat: 'xml',
dataSource: '<chart showaboutmenuitem="0" adjusttm="0" autoscale="1" showtickvalues="0" upperlimit="5000" lowerlimit="100" chartleftmargin="10" chartrightmargin="10" charttopmargin="10" chartbottommargin="10" bgcolor="#ffffff" thmfillcolor="000000" cylfillcolor="000000" showborder="0" showlabel="true" showvalue="1" palette="1" tickvaluedistance="20" exportenabled="1" exportshowmenuitem="0" exportdialogmessage="Exporting Chart " exportatclient="0" exportaction="save" exporthandler="/AppFolder/FCExporter.aspx" formatnumberscale="0" origw="204" origh="297" gaugestartangle="180" gaugeendangle="0" >\
<colorrange>\
<color minvalue="0" maxvalue="-1" code="FF654F" />\
<color minvalue="0" maxvalue="1" code="FFFF00" />\
<color minvalue="2" maxvalue="5000" code="8BBA00" />\
</colorrange>\
<value>\
3449</value>\
<dials>\
<dial value="3449" rearextension="10" bgcolor="000000" bordercolor="FFFFFF" />\
</dials>\
<trendpoints>\
<point startvalue="4500" displayvalue="Target" dashed="1" dashlen="3" dashgap="3" color="FF0000" thickness="2" />\
</trendpoints>\
</chart>'
}).render();
});