Implement a chart [Archive]

mwu

25 Oct 2010, 10:38 AM

I'm trying to implement a chart using a js charting library in my sencha touch project. Below is my index.js code:

Ext.setup({
onReady: function() {
var panel, chart;
chart = new Ext.Component({
title: "chart",
html: '<div id="chartContainer">Charts will load here!</div>'
});

panel = new Ext.TabPanel({
fullscreen: true,
animation: 'slide',
items: [chart, {title: "timeline"}]
});
}

});

The code to get chart in a html file is below:

<html>
<head>
<script type="text/javascript" src="FusionCharts/FusionCharts.js">
</script>
</head>
<body>
<div id="chartContainer">Charts will load here!</div>
<script type="text/javascript">
var myChart = new FusionCharts( "FusionCharts/Column3D.swf",
"myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");
</script>
</body>
</html>

Have any idea how to integrate the render method to sencha? Thank you.

jay@moduscreate.com

25 Oct 2010, 5:04 PM

create the chart after the chart "component" is rendered.

mwu

26 Oct 2010, 5:59 AM

Do you mean something like this?

Ext.setup({
onReady: function() {
var panel, chart;
chart = new Ext.Component({
title: "chart",
html: '<div id="chartContainer">Charts will load here!</div>'
});

panel = new Ext.TabPanel({
fullscreen: true,
animation: 'slide',
items: [chart, {title: "timeline"}]
});

var myChart = new FusionCharts( "FusionCharts/Column3D.swf",
"myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");
}

});

I tested it, doesn't work. Could you please give me more details? Thanks.