chinito

Uncaught Typeerror: Illegal Invocation

Recommended Posts

I am trying to do a Stacked3D Column chart using JSON as the data source and I can't seem to get past a JS Error. All FireBug or Chrome will tell me is:

 

  • Uncaught TypeError: Illegal invocation

I have done everything I can think of to resolve this. I have tested it in Chrome 13, FF 6.0.2, Safari 5.1 all with the same results but slightly different wording on the error.

TThe HTML of the page is this:

<html> <head> <title> Distinct Projects by Program</title> <script type="text/javascript" src="charts/FusionCharts/Charts/FusionCharts.js"></script> </head> <body> <div id="chartContainer" style="height:100%;">FusionCharts will load here!</div> <script type="text/javascript"><!-- FusionCharts._fallbackJSChartWhenNoFlash(); FusionCharts.debugMode.enabled(true); FusionCharts.debugMode.outputTo(console.log); var myChart = new FusionCharts( "charts/FusionCharts/Charts/StackedColumn3D.swf", "myChartId", "800", "600", "1", "1" ); myChart.setJSONData({ "chart":{ "caption":"Annual Revenue", "subcaption":"In Million {:content:}quot;, "xaxisname":"Year", "pyaxisname":"Sales in M{:content:}quot;, "syaxisname":"Cost as % of Revenue", "decimals":"0", "numberprefix":"{:content:}quot;, "numbersuffix":"M", "snumbersuffix":"%25" }, "categories":[{ "category":[ { "label":"2001" }, { "label":"2002" }, { "label":"2003" }, { "label":"2004" }, { "label":"2005" } ] } ], "dataset":[{ "dataset":[{ "seriesname":"Product A", "color":"AFD8F8", "showvalues":"0", "data":[ { "value":"30" }, { "value":"26" }, { "value":"29" }, { "value":"31" }, { "value":"34" } ] }, { "seriesname":"Product B", "color":"F6BD0F", "showvalues":"0", "data":[ { "value":"21" }, { "value":"28" }, { "value":"39" }, { "value":"41" }, { "value":"24" } ] } ] }, { "dataset":[{ "seriesname":"Service A", "color":"8BBA00", "showvalues":"0", "data":[ { "value":"27" }, { "value":"25" }, { "value":"28" }, { "value":"26" }, { "value":"10" } ] }, { "seriesname":"Service B", "color":"A66EDD", "showvalues":"0", "data":[ { "value":"17" }, { "value":"15" }, { "value":"18" }, { "value":"16" }, { "value":"10" } ] }, { "seriesname":"Service C", "color":"F984A1", "showvalues":"0", "data":[ { "value":"12" }, { "value":"17" }, { "value":"16" }, { "value":"15" }, { "value":"12" } ] } ] } ]}); myChart.render("chartContainer"); // --> </script> </body> </html> As you can see I have resorted to just using the sample data from the Stacked JSON example, I did this after my data wouldn't work.

The page can be accessed here: http://attaskexpert....ckProgCount.php

 

The swf and js paths are correct and in the same domain.

 

The output of debug provides this:

 

Info: Chart loaded and initialized.

 

Initial Width: 800

 

Initial Height: 600

 

Scale Mode: noScale

 

Debug Mode: Yes

 

Application Message Language: EN

 

Version: 3.2.1

 

Chart Type: Stacked 3D Column Chart

 

Chart Objects:

 

BACKGROUND

 

CANVAS

 

CAPTION

 

SUBCAPTION

 

YAXISNAME

 

XAXISNAME

 

DIVLINES

 

YAXISVALUES

 

DATALABELS

 

DATAVALUES

 

TRENDLINES

 

TRENDVALUES

 

DATAPLOT

 

TOOLTIP

 

VLINES

 

LEGEND

 

VLINELABELS

 

 

 

 

INFO: Chart registered with external script. DOM Id of chart is myChartId

 

INFO: XML Data provided using dataXML method.

 

XML Data: <chart caption="Annual Revenue" subcaption="In Million {:content:}quot; xaxisname="Year" pyaxisname="Sales in M{:content:}quot; syaxisname="Cost as % of Revenue" decimals="0" numberprefix="{:content:}quot; numbersuffix="M" snumbersuffix="%25"><categories><category label="2001" /><category label="2002" /><category label="2003" /><category label="2004" /><category label="2005" /></categories><dataset><dataset seriesname="Product A" color="AFD8F8" showvalues="0"><set value="30" /><set value="26" /><set value="29" /><set value="31" /><set value="34" /></dataset><dataset seriesname="Product B" color="F6BD0F" showvalues="0"><set value="21" /><set value="28" /><set value="39" /><set value="41" /><set value="24" /></dataset></dataset><dataset><dataset seriesname="Service A" color="8BBA00" showvalues="0"><set value="27" /><set value="25" /><set value="28" /><set value="26" /><set value="10" /></dataset><dataset seriesname="Service B" color="A66EDD" showvalues="0"><set value="17" /><set value="15" /><set value="18" /><set value="16" /><set value="10" /></dataset><dataset seriesname="Service C" color="F984A1" showvalues="0"><set value="12" /><set value="17" /><set value="16" /><set value="15" /><set value="12" /></dataset></dataset></chart>

 

 

 

 

Any ideas would be greatly appreciated.

 

Thank you in advance,

 

John

 

Edited by chinito

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Welcome to FusionCharts Forum! smile.gif

 

Please find the modified code below:

 

<html>
<head>
 <title> Distinct Projects by Program</title>
  <script type="text/javascript" src="../FusionCharts/FusionCharts.js"></script> 
  </head> 
  <body> <div id="chartContainer">FusionCharts will load here!</div>
   <script type="text/javascript">
    	FusionCharts._fallbackJSChartWhenNoFlash();	
 		FusionCharts.debugMode.enabled(true);
      	FusionCharts.debugMode.outputTo(console.log);
           	var myChart = new FusionCharts("../FusionCharts/MSStackedColumn2D.swf", "myChartId", "800", "600", "0", "1" );
         		myChart.setJSONData(
             {
 "chart":{
   "caption":"Break-up of Annual Revenue",
   "subcaption":"In Million {:content:}quot;,
   "xaxisname":"Year",
   "yaxisname":"Sales in M{:content:}quot;,
   "numdivlines":"3",
   "numberprefix":"{:content:}quot;,
   "numbersuffix":"M",
   "showsum":"1"
 },
 "categories":[{
     "font":"Arial",
     "fontsize":"12",
     "fontcolor":"000000",
     "category":[{
         "label":"2001"
       },
       {
         "label":"2002"
       },
       {
         "label":"2003"
       },
       {
         "label":"2004"
       },
       {
         "label":"2005"
       }
     ]
   }
 ],
 "dataset":[{
     "dataset":[{
         "seriesname":"Product A",
         "color":"AFD8F8",
         "showvalues":"0",
         "data":[{
             "value":"30"
           },
           {
             "value":"26"
           },
           {
             "value":"29"
           },
           {
             "value":"31"
           },
           {
             "value":"34"
           }
         ]
       },
       {
         "seriesname":"Product B",
         "color":"F6BD0F",
         "showvalues":"0",
         "data":[{
             "value":"21"
           },
           {
             "value":"28"
           },
           {
             "value":"39"
           },
           {
             "value":"41"
           },
           {
             "value":"24"
           }
         ]
       }
     ]
   },
   {
     "dataset":[{
         "seriesname":"Service A",
         "color":"8BBA00",
         "showvalues":"0",
         "data":[{
             "value":"27"
           },
           {
             "value":"25"
           },
           {
             "value":"28"
           },
           {
             "value":"26"
           },
           {
             "value":"10"
           }
         ]
       },
       {
         "seriesname":"Service B",
         "color":"A66EDD",
         "showvalues":"0",
         "data":[{
             "value":"17"
           },
           {
             "value":"15"
           },
           {
             "value":"18"
           },
           {
             "value":"16"
           },
           {
             "value":"10"
           }
         ]
       },
       {
         "seriesname":"Service C",
         "color":"F984A1",
         "showvalues":"0",
         "data":[{
             "value":"12"
           },
           {
             "value":"17"
           },
           {
             "value":"16"
           },
           {
             "value":"15"
           },
           {
             "value":"12"
           }
         ]
       }
     ]
   }
 ]
}
);
  			myChart.render("chartContainer"); 	
  			</script>
               </body> 
               </html>

 

 

P.S- Please edit the path of js and swf file as per your location.

 

Hope this helps.

Share this post


Link to post
Share on other sites

Thank you, but I am not seeing what you edited...I have tried paste just the code into my sample and I get an invalid character. It is likely the ""subcaption":"In Million {:content:}quot;," lines in the chart definition.

 

Please point me to what you changed.

 

Thank you,

 

John

Hi,

 

Welcome to FusionCharts Forum! smile.gif

 

Please find the modified code below:

 

<html>
<head>
 <title> Distinct Projects by Program</title>
  <script type="text/javascript" src="../FusionCharts/FusionCharts.js"></script> 
  </head> 
  <body> <div id="chartContainer">FusionCharts will load here!</div>
   <script type="text/javascript">
		FusionCharts._fallbackJSChartWhenNoFlash();	
 		FusionCharts.debugMode.enabled(true);
  		FusionCharts.debugMode.outputTo(console.log);
           	var myChart = new FusionCharts("../FusionCharts/MSStackedColumn2D.swf", "myChartId", "800", "600", "0", "1" );
         		myChart.setJSONData(
                {
 "chart":{
   "caption":"Break-up of Annual Revenue",
   "subcaption":"In Million {:content:}quot;,
   "xaxisname":"Year",
   "yaxisname":"Sales in M{:content:}quot;,
   "numdivlines":"3",
   "numberprefix":"{:content:}quot;,
   "numbersuffix":"M",
   "showsum":"1"
 },
 "categories":[{
     "font":"Arial",
     "fontsize":"12",
     "fontcolor":"000000",
     "category":[{
         "label":"2001"
       },
       {
         "label":"2002"
       },
       {
         "label":"2003"
       },
       {
         "label":"2004"
       },
       {
         "label":"2005"
       }
     ]
   }
 ],
 "dataset":[{
     "dataset":[{
         "seriesname":"Product A",
         "color":"AFD8F8",
         "showvalues":"0",
         "data":[{
             "value":"30"
           },
           {
             "value":"26"
           },
           {
             "value":"29"
           },
           {
             "value":"31"
           },
           {
             "value":"34"
           }
         ]
       },
       {
         "seriesname":"Product B",
         "color":"F6BD0F",
         "showvalues":"0",
         "data":[{
             "value":"21"
           },
           {
             "value":"28"
           },
           {
             "value":"39"
           },
           {
             "value":"41"
           },
           {
             "value":"24"
           }
         ]
       }
     ]
   },
   {
     "dataset":[{
         "seriesname":"Service A",
         "color":"8BBA00",
         "showvalues":"0",
         "data":[{
             "value":"27"
           },
           {
             "value":"25"
           },
           {
             "value":"28"
           },
           {
             "value":"26"
           },
           {
             "value":"10"
           }
         ]
       },
       {
         "seriesname":"Service B",
         "color":"A66EDD",
         "showvalues":"0",
         "data":[{
             "value":"17"
           },
           {
             "value":"15"
           },
           {
             "value":"18"
           },
           {
             "value":"16"
           },
           {
             "value":"10"
           }
         ]
       },
       {
         "seriesname":"Service C",
         "color":"F984A1",
         "showvalues":"0",
         "data":[{
             "value":"12"
           },
           {
             "value":"17"
           },
           {
             "value":"16"
           },
           {
             "value":"15"
           },
           {
             "value":"12"
           }
         ]
       }
     ]
   }
 ]
}
);
 				myChart.render("chartContainer"); 	
 				</script>
                  </body> 
                  </html>

 

 

P.S- Please edit the path of js and swf file as per your location.

 

Hope this helps.

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Thanks for your response.

 

Please find the modified code below:

 

<html>
<head>
 <title> Distinct Projects by Program</title>
  <script type="text/javascript" src="../FusionCharts/FusionCharts.js"></script> 
  </head> 
  <body> <div id="chartContainer">FusionCharts will load here!</div>
   <script type="text/javascript">
	 FusionCharts._fallbackJSChartWhenNoFlash();	
	  FusionCharts.debugMode.enabled(true);
	   FusionCharts.debugMode.outputTo(console.log);
	   	 var myChart = new FusionCharts("../FusionCharts/MSStackedColumn2D.swf", "myChartId", "800", "600", "0", "1" );
		 	 myChart.setJSONData(
			 {
 "chart":{
   "caption":"Break-up of Annual Revenue",
   "subcaption":"In Million $",
   "xaxisname":"Year",
   "yaxisname":"Sales in M$",
   "numdivlines":"3",
   "numberprefix":"$",
   "numbersuffix":"M",
   "showsum":"1"
 },
 "categories":[{
     "font":"Arial",
     "fontsize":"12",
     "fontcolor":"000000",
     "category":[{
         "label":"2001"
       },
       {
         "label":"2002"
       },
       {
         "label":"2003"
       },
       {
         "label":"2004"
       },
       {
         "label":"2005"
       }
     ]
   }
 ],
 "dataset":[{
     "dataset":[{
         "seriesname":"Product A",
         "color":"AFD8F8",
         "showvalues":"0",
         "data":[{
             "value":"30"
           },
           {
             "value":"26"
           },
           {
             "value":"29"
           },
           {
             "value":"31"
           },
           {
             "value":"34"
           }
         ]
       },
       {
         "seriesname":"Product B",
         "color":"F6BD0F",
         "showvalues":"0",
         "data":[{
             "value":"21"
           },
           {
             "value":"28"
           },
           {
             "value":"39"
           },
           {
             "value":"41"
           },
           {
             "value":"24"
           }
         ]
       }
     ]
   },
   {
     "dataset":[{
         "seriesname":"Service A",
         "color":"8BBA00",
         "showvalues":"0",
         "data":[{
             "value":"27"
           },
           {
             "value":"25"
           },
           {
             "value":"28"
           },
           {
             "value":"26"
           },
           {
             "value":"10"
           }
         ]
       },
       {
         "seriesname":"Service B",
         "color":"A66EDD",
         "showvalues":"0",
         "data":[{
             "value":"17"
           },
           {
             "value":"15"
           },
           {
             "value":"18"
           },
           {
             "value":"16"
           },
           {
             "value":"10"
           }
         ]
       },
       {
         "seriesname":"Service C",
         "color":"F984A1",
         "showvalues":"0",
         "data":[{
             "value":"12"
           },
           {
             "value":"17"
           },
           {
             "value":"16"
           },
           {
             "value":"15"
           },
           {
             "value":"12"
           }
         ]
       }
     ]
   }
 ]
}
);
			  myChart.render("chartContainer");	 
			  </script>
			   </body> 
			   </html>

 

 

Hope this helps.

Share this post


Link to post
Share on other sites

I have compared your changes with that of my original post and the only thing I can find that you changes was to remove the HTML comments around the java script. I have copied your lastes post verbatim to another testing file and it still throws the invalid invocation error. The ONLY things I changed to it was the references to my location of the .js and .swf. So assuming you tested this and it worked for you this forces me to conclude that the HTML is not the problem, but please confirm. I have moved to other locations....

 

http://attaskexpert.com/dev/chartTest.html

 

Verified the version of the JS file...which has a header of:

 

 

/*!

* FusionCharts JavaScript Library

* Copyright FusionCharts Technologies LLP

* @license License Information at <http://www.fusioncharts.com/license>

*

* @author FusionCharts

* @version 3.2.1-release

*

* Third-party attributions:

* SWFObject v2.2 <http://code.google.com/p/swfobject/>

* JSON v2 <http://www.JSON.org/js.html>

* Firebug Lite 1.3.0 <http://getfirebug.com/firebuglite>

* jQuery 1.4.2 <http://jquery.com/>

*/

 

Verified the version of the swf...it is 3.2 see the URL or attached screenshot

 

Verified the version of flash at 10.3.183.7 for Mac.

 

Cleared the cache on the browsers for good measure and again tried it in Chrome, FF, and Safari, but no joy.

 

I redownloaded the package and tried again...nope

 

Then I started looking at other factors, the server is a godaddy linux server, I doubt it, but could that have something to do with it?

 

My next bet is it is in your .js file somewhere it says line 15, but it is all on line 15. I have thought about decompressing the code to find the actual line number.

 

Are you able to see the error on my site on your side? Are you able to reproduce it? Does the fact that the JS is version 3.2.1 and the swf is 3.2 make a difference?

 

Thank you

 

John

post-21439-0-41393600-1316100360_thumb.png

post-21439-0-49190100-1316100371_thumb.png

Share this post


Link to post
Share on other sites

Any update on this? I still have not been able to find the problem with the code. Have you? Any thoughts on the different versions?

 

Thank you,

 

John

I have compared your changes with that of my original post and the only thing I can find that you changes was to remove the HTML comments around the java script. I have copied your lastes post verbatim to another testing file and it still throws the invalid invocation error. The ONLY things I changed to it was the references to my location of the .js and .swf. So assuming you tested this and it worked for you this forces me to conclude that the HTML is not the problem, but please confirm. I have moved to other locations....

 

http://attaskexpert..../chartTest.html

 

Verified the version of the JS file...which has a header of:

 

 

/*!

* FusionCharts JavaScript Library

* Copyright FusionCharts Technologies LLP

* @license License Information at <http://www.fusioncharts.com/license>

*

* @author FusionCharts

* @version 3.2.1-release

*

* Third-party attributions:

* SWFObject v2.2 <http://code.google.com/p/swfobject/>

* JSON v2 <http://www.JSON.org/js.html>

* Firebug Lite 1.3.0 <http://getfirebug.com/firebuglite>

* jQuery 1.4.2 <http://jquery.com/>

*/

 

Verified the version of the swf...it is 3.2 see the URL or attached screenshot

 

Verified the version of flash at 10.3.183.7 for Mac.

 

Cleared the cache on the browsers for good measure and again tried it in Chrome, FF, and Safari, but no joy.

 

I redownloaded the package and tried again...nope

 

Then I started looking at other factors, the server is a godaddy linux server, I doubt it, but could that have something to do with it?

 

My next bet is it is in your .js file somewhere it says line 15, but it is all on line 15. I have thought about decompressing the code to find the actual line number.

 

Are you able to see the error on my site on your side? Are you able to reproduce it? Does the fact that the JS is version 3.2.1 and the swf is 3.2 make a difference?

 

Thank you

 

John

Share this post


Link to post
Share on other sites

I ran across this error message, so I figured I'd log my solution here in the off chance that it helps someone fix their problem.

 

 

Original Error Message:

Uncaught RuntimeException: #25081850 chartObjectId-1::RendererManager Error >> There was an error rendering the chart. Enable FusionCharts JS debugMode for more information.

 

So I ended up enabling js debugMode with the below lines of code:

FusionCharts.debugMode.enabled(true);

FusionCharts.debugMode.outputTo(console.log);

 

 

New Error Message:

Uncaught TypeError: Illegal invocation

 

This gave me no direction. I began throwing debug statements all over the place, and stepped through the code until I decided I would be unable to track down the bug this way.

 

What I did to find the fix:

I began playing with the values I was passing in to FusionCharts.

 

1 - Checked to make sure my JSON data object was being converted to the correct xml format

2 - Made sure the file path to the .swf file was correct

3 - Checked that the height & width properties I was passing in was not causing the code to break.

 

 

 

The Solution

Turns out I was passing in a 0 height and 0 width for the chart size which was breaking the rendering of the chart. I had some code that was automatically determining what size the chart should be, and it was coming up with 0x0. I manually plugged in 100x100 and everything started working.

 

 

 

 

 

Edited by will barnes

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