Hello,
I have been experimenting with Fusion Chart.
I have been following this tutorial: https://www.fusioncharts.com/dev/chart-guide/getting-started/using-xml-as-data-format
and trying to take the chart data from xml yet it does not works.
bar_chart_xml.html
<html>
<head>
<!--<script src="angularjs-plugin/wrappers/angularjs/angular-fusioncharts.min.js"></script>
<script src="angular.js"></script>
-->
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready( function () {
var csatGauge = new FusionCharts({
"type" : "angulargauge",
"renderAt" : "chart-container",
"width" : "400",
"height" : "250",
"dataFormat" : "json",
"dataSource" : {
"chart" : {
"caption" : "Customer Satisfaction Score",
"subcaption" : "Last week",
"lowerLimit" : "0",
"upperLimit" : "100",
"theme" : "fint"
},
"colorRange" : {
"color" : [{
"minValue" : "0",
"maxValue" : "50",
"code" : "#e44a00"
},
{
"minValue" : "50",
"maxValue" : "75",
"code" : "#f8bd19"
},
{
"minValue" : "75",
"maxValue" : "100",
"code" : "#6baa01"
}
]
},
"dials" : {
"dial" : [{
"value" : "67"
}]
}
}
});
csatGauge.render();
});
</script>
</head>
<body>
<script type="text/javascript">
FusionCharts.ready( function () {
var myChart = new FusionCharts({
"type" : "column2d",
"renderAt" : "chartContainer",
"width" : "500",
"height" : "300",
"dataFormat" : "xml",
"dataSource" : "<chart caption='Harry\'s SuperMart' subcaption='Monthly revenue for last year' xaxisname='Month' yaxisname='Amount' numberprefix='$' palettecolors='#008ee4' bgalpha='0' borderalpha='20' canvasborderalpha='0' useplotgradientcolor='0' plotborderalpha='10' placevaluesinside='1' rotatevalues='1' valuefontcolor='#ffffff' captionpadding='20' showaxislines='1' axislinealpha='25' divlinealpha='10'><set label='Jan' value='420000' /><set label='Feb' value='810000' /><set label='Mar' value='720000' /><set label='Apr' value='550000' /><set label='May' value='910000' /><set label='Jun' value='510000' /><set label='Jul' value='680000' /><set label='Aug' value='620000' /><set label='Sep' value='610000' /><set label='Oct' value='490000' /><set label='Nov' value='900000' /><set label='Dec' value='730000' /></chart>"
});
myChart.render();
});
</script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</body>
</html>
chartdata.xml
<chart caption='Harry' s SuperMart ' subcaption='Monthly revenue for last year ' xaxisname='Month ' yaxisname='Amount ' numberprefix='$ ' palettecolors='#008ee4 ' bgalpha='0 ' borderalpha='20 ' canvasborderalpha='0 ' useplotgradientcolor='0 ' plotborderalpha='10 ' placevaluesinside='1 ' rotatevalues='1 ' valuefontcolor='#ffffff ' captionpadding='20 ' showaxislines='1 ' axislinealpha='25 ' divlinealpha='10 '>
<set label='Jan ' value='420000 ' />
<set label='Feb ' value='810000 ' />
<set label='Mar ' value='720000 ' />
<set label='Apr ' value='550000 ' />
<set label='May ' value='910000 ' />
<set label='Jun ' value='510000 ' />
<set label='Jul ' value='680000 ' />
<set label='Aug ' value='620000 ' />
<set label='Sep ' value='610000 ' />
<set label='Oct ' value='490000 ' />
<set label='Nov ' value='900000 ' />
<set label='Dec ' value='730000 ' />
</chart>
All I get is invalid data.
That's the message. How to address the xml file ?