Using FusionCharts with Ext JS - extjs

Question

I am thinking about using FusionCharts in an application entirely build with Ext JS so far.
However, I don't believe there's a specific recommended implementation or connector to easily add FusionCharts to an Ext JS app. There are various examples online of others adding the charts within an Ext JS app though:
http://jsfiddle.net/fusioncharts/xujmxjcb/
http://jsfiddle.net/fusioncharts/5j8s7g68/
https://www.sencha.com/forum/showthread.php?218834-How-to-integrate-fusion-charts-with-Extjs4&p=830921&viewfull=1#post830921
The last one discusses a way to create an Ext JS class for FusionCharts that "wraps" some of the charting functionality within a proper class:
/* * ?????? : var testdata = { part : { 'Jul 01' : 2000, 'Aug 02' : 2400, 'Sep 03' : 2000, 'Oct 04' :
* "", 'Dec 05' : null }, zoo : { 'Jul 01' : 4000, 'Aug 02' : 3400, // 'Sep 03' : 3000, // 'Oct 04' :
* 5200, 'Dec 05' : 4210 }, hotel : { // 'Jul 01' : 6000, 'Aug 02' : 6400, // 'Sep 03' : 7000, 'Oct
* 04' : 8200, 'Dec 05' : 8100 } }; // this.setChartData(testdata); ????????????
*/
/**
* ????
* #class Ext.ux.MSLineChart
* #extends Ext.Panel
* #cgf initData : Object ??????.
* #cgf DwrAction : DWR???? ??????.
* #cgf baseLoadParam : Object DWR???????.
* #cgf autoShowChart : boolean ??(true) ??????????.
* #function loadData() : ??DWR????,????.
* #cgf imageType ???? : MSColumn2D,MSColumn3D,MSLine,MSArea,MSBar2D,MSBar3D StackedColumn2D,
* StackedColumn3D,StackedArea2D,StackedBar2D,StackedBar2D,StackedBar3D
*/
Ext.ux.FusionChart = Ext.extend(Ext.Panel, {
width : 1000,
height : 600,
border : false,
layout : 'fit',
autoShowChart : true,
animationflex : true,
imageType : 'MSLine',
constructor : function(config) {
Ext.apply(this, config);
this.isLineChart = true; // ??????????
var chartDom = Ext.core.DomHelper.append(document.body, {
id : 'ux-fc-' + ++Ext.AbstractComponent.AUTO_ID,
tag : 'div',
cls : 'x-hidden',
style : 'z-index:-1;width:100%;height:100%'
});
this.chart = new FusionCharts(WEBPATH + '/common/fc/' + this.imageType + '.swf', chartDom.id, '100%', "100%", "0",
"1", null);
this.chart.addParam("wmode", "transparent");// ???,????EXT
if (this.initData) {
this.setChartData(this.initData);
} else if (this.DwrAction && this.autoShowChart === true) {
this.loadData(this.baseLoadParam);
}
this.contentEl = this.chart.getAttribute('id');
Ext.ux.FusionChart.superclass.constructor.call(this);
this.on('render', this.renderPanel, this);
},
renderPanel : function() {
},
/** ??DWR??????. */
loadData : function(param) {
param = param || {};
Ext.applyIf(param, this.baseLoadParam);
var setChartData = Ext.bind(this.setChartData, this);
this.DwrAction(param, setChartData);
},
// ??????XML???render chart
setChartData : function(data) {
var animation = this.animationflex == true ? 1 : 0;
var DataXML = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<chart animation =\"" + animation
+ "\" baseFont=\"??\" baseFontSize=\"12\">";
var valuePartXML = "", trendlinesXML = "";
var xNameArray = [];
if (data['trendlines']) { // ???(??:??,???), ????? : {?:??}
trendlinesXML = "<trendlines> ";
for (var key in data['trendlines']) {
trendlinesXML += "<line startValue='" + key + "' color='" + data['trendlines'][key].replace('#', '')
+ "' displayValue='" + key + "' showOnTop='1' />";
}
trendlinesXML += "</trendlines>";
delete data['trendlines'];
}
DataXML += "<categories>"
for (var key in data) {
if (key.length > 0) {
var record = data[key];
for (var xName in record) {
/* xNameArray.indexOf(xName) == -1 && */
if (xName && String(xName).length > 0) {
DataXML += "<category label=\"" + xName + "\"/>"; // x???
xNameArray.push(xName);
}
}
break; // ????, ???????????. (???????)
}
}
DataXML += "</categories>";
for (var key in data) { // ??
if (key.length > 0) {
var record = data[key];
valuePartXML += "<dataset seriesName=\"" + key + "\">";
for (var i = 0; i < xNameArray.length; i++) {
var xName = xNameArray[i];
if (record[xName] && String(record[xName]).length > 0) {
valuePartXML += "<set value=\"" + record[xName] + "\"/>"; // x???
} else if (this.isLineChart == true) {
record[xName] = this.getEstimated(xName, record, xNameArray);
valuePartXML += "<set showValue =\"0\" toolText=\" \" displayValue=\" \" value=\"" + record[xName] + "\"/>"; // x???
}
}
valuePartXML += "</dataset>";
}
}
DataXML += valuePartXML + trendlinesXML;
DataXML += "</chart>"
this.chart.setDataXML(DataXML);
this.chart.show(); // render
},
/** line????????,?????. */
getEstimated : function(xName, record, xNameArray) {
var front = null;
var back = null;
var space = 2;
for (var i = xNameArray.indexOf(xName) - 1; i > -1; i--) {
var currUp = record[xNameArray[i]];
if (currUp != null && String(currUp).length > 0) {
front = Number(currUp);
break;
}
space++;
}
for (var i = xNameArray.indexOf(xName) + 1; i < xNameArray.length; i++) {
var currDown = record[xNameArray[i]];
if (currDown != null && String(currDown).length > 0) {
back = Number(currDown);
break;
}
space++;
}
if (front == null || back == null) {
return null;
} else {
return (back - front) / space + front;
}
}
})
What is the best way to proceed and what are the advantages/disadvantages?
Any help is greatly appreciated and sorry for the rookie question!
Best
/R