PDA

View Full Version : Implement a chart



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.