Trying to implement Fusion Charts in xPages; chart not loading - xpages

Question

I am attempting to load fusion charts into an xPage. Following this tutorial http://docs.fusioncharts.com/tutorial-getting-started-your-first-charts-building-your-first-chart.html
The chart is not loading and is showing chart loading. At the bottom of the page I get a few error messages in the js console.
Here is the code I am using for the page. (url changed from actual url)
<xp:this.resources>
<xp:script src="https://URL/Field/fplan.nsf/fusioncharts/js/fusioncharts.js"
clientSide="true">
</xp:script>
<xp:script
src="https://URL/Field/fplan.nsf/fusioncharts/js/themes/fusioncharts.theme.fint.js"
clientSide="true">
</xp:script>
</xp:this.resources>
<xp:scriptBlock type="text/javascript">
<xp:this.value><![CDATA[
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
});
revenueChart.render();
})]]></xp:this.value>
</xp:scriptBlock>
<div id="chartContainer">FusionCharts XT will load here!</div>
Uncaught TypeError: Cannot set property 'desc' of undefined fusioncharts.js:436(anonymous function) fusioncharts.js:436v.core fusioncharts.js:20v.registrars.module fusioncharts.js:19v.extend.register fusioncharts.js:22(anonymous function) fusioncharts.js:236
Uncaught TypeError: Cannot read property 'fn' of undefined fusioncharts.js:437(anonymous function) fusioncharts.js:437v.core fusioncharts.js:20v.registrars.module fusioncharts.js:19v.extend.register fusioncharts.js:22(anonymous function) fusioncharts.js:437
Uncaught TypeError: undefined is not a function fusioncharts.js:129(anonymous function) fusioncharts.js:129c fusioncharts.js:32H fusioncharts.js:32b.triggerEvent fusioncharts.js:36d.raiseEvent fusioncharts.js:36d.extend.render fusioncharts.js:70(anonymous function) chart.xsp:88(anonymous function)
If I drop an HTML file into the NSF as a file in the webcontent folder I am able to load the chart so at least I know the fusionchart files are sound.
Any assistance in how to implement this would be appreciated.

Answer 1

I guess I would start by moving the chart initialization code into a client side script library and adding that as a resource to see if that makes a difference.

Answer 2

Try loading the script in the following way:
<xp:this.resources>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value=
"https://URL/Field/fplan.nsf/fusioncharts/js/fusioncharts.js" />
</xp:this.attributes>
</xp:headTag>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value=
"https://URL/Field/fplan.nsf/fusioncharts/js/themes/fusioncharts.theme.fint.js" />
</xp:this.attributes>
</xp:headTag>
</xp:this.resources>