Problem Creating Chart In Ext-Js

[donp]

I am trying to use FusionCharts in an Ext-JS project.

 

I have created a <div> in the DOM, and am using the standard technique for rendering the chart to the div container. However, I consistently see the following error generated in teh web browser when I access the page containing the chart:

 

Uncaught RuntimeException: #03091456 myChartId.render() Error >> Unable to find the container DOM element.

 

This is the code used to create the chart:

 

var fusionChart, chart;[/left]

[left]chart = new Ext.Component({
title: "chart",
html: "<div id='fusionChartContainer'>Charts will load here!</div>"
});[/left]

[left]exec.ChartPanel = chart;[/left]

[left]fusionChart = new FusionCharts( "FusionCharts/Column3D.swf",       
"fusionChartID", "400", "300", "0", "1" );      
fusionChart.setXMLUrl("src/data.xml");      
fusionChart.render('fusionChartContainer');

When this is rendered in a browser, I can use the DOM inspection tools and can verify that there is indeed a div with id 'fusionChartContainer'. But, still I see this error that the DOM element cannot be found.

 

This problem happens whether I execute the same file directly from the filesystem in a browser, or am accessing it through a webserver, either way, I see the error and the chart is not displayed.

Can anyone provide any assistance with this? Has anyone been using FusionCharts in an Ext-JS project?

Thanks,

Don P.

[pariyani]

I am trying to use FusionCharts in an Ext-JS project.

 

I have created a <div> in the DOM, and am using the standard technique for rendering the chart to the div container. However, I consistently see the following error generated in teh web browser when I access the page containing the chart:

 

Uncaught RuntimeException: #03091456 myChartId.render() Error >> Unable to find the container DOM element.

 

This is the code used to create the chart:

 

var fusionChart, chart;[/left]

[left]chart = new Ext.Component({
title: "chart",
html: "<div id='fusionChartContainer'>Charts will load here!</div>"
});[/left]

[left]exec.ChartPanel = chart;[/left]

[left]fusionChart = new FusionCharts( "FusionCharts/Column3D.swf",       
"fusionChartID", "400", "300", "0", "1" );      
fusionChart.setXMLUrl("src/data.xml");      
fusionChart.render('fusionChartContainer');

When this is rendered in a browser, I can use the DOM inspection tools and can verify that there is indeed a div with id 'fusionChartContainer'. But, still I see this error that the DOM element cannot be found.

 

This problem happens whether I execute the same file directly from the filesystem in a browser, or am accessing it through a webserver, either way, I see the error and the chart is not displayed.

Can anyone provide any assistance with this? Has anyone been using FusionCharts in an Ext-JS project?

Thanks,

Don P.

 

 

 

You can add a listener for your component (addListener() function) to listen to the "afterrender" event. Include your chart javascript in the handler function of this listener. Haven't tried this... but worth a try!

[DELETE MY ACCOUNT]

Hi,

Did u get a solution for this? I am facing exactly similar issue. And I tried adding the fusionCharts code in afterrender event listener method, but i still have the same problem.

[Guest Sumedh]

Hi,

Did u get a solution for this? I am facing exactly similar issue. And I tried adding the fusionCharts code in afterrender event listener method, but i still have the same problem.

 

Hi,

 

What Ext-JS version are you using?