Sign in to follow this  
donp

Problem Creating Chart In Ext-Js

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this