Sign in to follow this  
wvuzero

Jquery Plugin + Renderer = 'javascript' Error

Recommended Posts

     $("#chartContainer").insertFusionCharts({
  		swfUrl: "fusioncharts-3.2/Charts/MSBar2D.swf",
  		renderer: 'javascript', 
  		dataSource: data, 
  		dataFormat: "json", 
  		width: '100%', 
  		height: '100%', 
  		id: "tuitionData"
	});


	FusionCharts("tuitionData").configureLink({
	swfUrl : "fusioncharts-3.2/Charts/Bar2D.swf",
	overlayButton:
   		{    
     		message: 'Back',
     		fontColor : '880000',
     		bgColor:'FFEEEE',
     		borderColor: '660000'
   		}
	},0);

 

Having an issue with using javascript as the renderer using the jquery plugin. If I remove the renderer line it works unless loaded on a device without flash like iOS. Otherwise it displays "Loading chart, please wait." Any help would be appreciated.

 

Using the above I get the following error reported in Chrome 21.0.1180.79

 

 

And I get the following in firebug on Firefox 14.0.1

 

TypeError: v is undefined

...=v.text,c?f-m+a:f-m):(e.title.text=t,0)},na=function(a,e,c){for(var d in a)a[d]....Fusion...s.HC.js (line 413)

 

Here is my data I am loading:

 


var masterData = {
"data": [
	{"name": "Undecided Major", "rpy" : "6090", "rps" : "3045", "nrpy" : "18868", "nrps" : "9434"},
	{"name": "College of Business and Economics", "rpy" : "6972", "rps" : "3486", "nrpy" : "20114", "nrps" : "10057"},
	{"name": "Creative Arts (Arts, Music, Theatre, etc.)", "rpy" : "6730", "rps" : "3365", "nrpy" : "19842", "nrps" : "9921"},				
	{"name": "College of Physical Activity & Sports Science", "rpy" : "6320", "rps" : "3160", "nrpy" : "19214", "nrps" : "9607"},
	{"name": "Davis College of Agriculture, Natural Resources and Design", "rpy" : "6656", "rps" : "3328", "nrpy" : "19646", "nrps" : "9823"},
	{"name": "Eberly College of Arts and Sciences", "rpy" : "6320", "rps" : "3160", "nrpy" : "19214", "nrps" : "9607"},
	{"name": "Statler College of Engineering and Mineral Resources", "rpy" : "7082", "rps" : "3541", "nrpy" : "20414", "nrps" : "10207"},
	{"name": "College of Human Resources & Education", "rpy" : "6530", "rps" : "3265", "nrpy" : "18328", "nrps" : "9164"},
	{"name": "Perley Isaac Reed School of Journalism", "rpy" : "6490", "rps" : "3245", "nrpy" : "19468", "nrps" : "9734"},
	{"name": "School of Dentistry", "rpy" : "8498", "rps" : "4249", "nrpy" : "23760", "nrps" : "11880"},
	{"name": "School of Medicine", "rpy" : "7636", "rps" : "3768", "nrpy" : "23024", "nrps" : "11512"},
	{"name": "Occupational Therapy Majors", "rpy" : "8262", "rps" : "4131", "nrpy" : "23750", "nrps" : "11875"},
	{"name": "Physical Therapy Majors", "rpy" : "8208", "rps" : "4104", "nrpy" : "23696", "nrps" : "11848"},
	{"name": "School of Nursing", "rpy" : "8194", "rps" : "4097", "nrpy" : "23222", "nrps" : "11611"}										
]
}

var optionData = {
"data" : [
	{ "name": "Resident Per Year", "color": "eeb211" },
	{ "name": "Resident Per Semester", "color": "ffffcc" },
	{ "name": "Non-Resident Per Year", "color": "00457c" },
	{ "name": "Non-Resident Per Semester", "color": "0079c1" }
]
}

var data = { 		
   	"chart": {
		"isHTML": "1",
       	"palette": "2",
       	"caption": "West Virginia University - Undergraduate Tuition and Fees 2012-13",
		"subcaption": "Click a graph bar to expand college specific information",
       	"showlabels": "1",
       	"showvalues": "0",
       	"decimals": "2",
       	"numberprefix": "{:content:}quot;,
		"maxLabelWidthPercent" : "13",
		"formatNumberScale" : "0"
   	},
   	"categories": [
       	{
           	"category": [
               	{ "label": masterData.data[0].name, "link":"newchart-json-undecided" },
               	{ "label": masterData.data[1].name, "link":"newchart-json-business" },
               	{ "label": masterData.data[2].name, "link":"newchart-json-art" },
               	{ "label": masterData.data[3].name, "link":"newchart-json-cpass" },
               	{ "label": masterData.data[4].name, "link":"newchart-json-davis" },
				{ "label": masterData.data[5].name, "link":"newchart-json-eberly" },
				{ "label": masterData.data[6].name, "link":"newchart-json-statler" },
				{ "label": masterData.data[7].name, "link":"newchart-json-hre" },
				{ "label": masterData.data[8].name, "link":"newchart-json-journalism" },
				{ "label": masterData.data[9].name, "link":"newchart-json-dentistry" },
				{ "label": masterData.data[10].name, "link":"newchart-json-medicine" },
				{ "label": masterData.data[11].name, "link":"newchart-json-occupational" },
				{ "label": masterData.data[12].name, "link":"newchart-json-physical" },
				{ "label": masterData.data[13].name, "link":"newchart-json-nursing" }
           	]
       	}
   	],
   	"dataset": [
       	{
           	"seriesname": optionData.data[0].name,
           	"color": optionData.data[0].color,
           	"showvalues": "1",
           	"data": [
               	{ "value": masterData.data[0].rpy, "link":"newchart-json-undecided" },
               	{ "value": masterData.data[1].rpy, "link":"newchart-json-business" },
               	{ "value": masterData.data[2].rpy, "link":"newchart-json-art" },
               	{ "value": masterData.data[3].rpy, "link":"newchart-json-cpass" },
               	{ "value": masterData.data[4].rpy, "link":"newchart-json-davis" },
               	{ "value": masterData.data[5].rpy, "link":"newchart-json-eberly" },
               	{ "value": masterData.data[6].rpy, "link":"newchart-json-statler" },
               	{ "value": masterData.data[7].rpy, "link":"newchart-json-hre" },
               	{ "value": masterData.data[8].rpy, "link":"newchart-json-journalism" },
               	{ "value": masterData.data[9].rpy, "link":"newchart-json-dentistry" },
               	{ "value": masterData.data[10].rpy, "link":"newchart-json-medicine" },
               	{ "value": masterData.data[11].rpy, "link":"newchart-json-occupational"},												
               	{ "value": masterData.data[12].rpy, "link":"newchart-json-physical" },
               	{ "value": masterData.data[13].rpy, "link":"newchart-json-nursing" }						
           	]
       	},
       	{
           	"seriesname": optionData.data[1].name,
           	"color": optionData.data[1].color,
           	"showvalues": "1",
           	"data": [
               	{ "value": masterData.data[0].rps, "link":"newchart-json-undecided" },
               	{ "value": masterData.data[1].rps, "link":"newchart-json-business" },
               	{ "value": masterData.data[2].rps, "link":"newchart-json-art" },
               	{ "value": masterData.data[3].rps, "link":"newchart-json-cpass" },
               	{ "value": masterData.data[4].rps, "link":"newchart-json-davis" },
               	{ "value": masterData.data[5].rps, "link":"newchart-json-eberly" },
               	{ "value": masterData.data[6].rps, "link":"newchart-json-statler" },
               	{ "value": masterData.data[7].rps, "link":"newchart-json-hre" },
               	{ "value": masterData.data[8].rps, "link":"newchart-json-journalism" },
               	{ "value": masterData.data[9].rps, "link":"newchart-json-dentistry" },
               	{ "value": masterData.data[10].rps, "link":"newchart-json-medicine" },
               	{ "value": masterData.data[11].rps, "link":"newchart-json-occupational"},												
               	{ "value": masterData.data[12].rps, "link":"newchart-json-physical" },
               	{ "value": masterData.data[13].rps, "link":"newchart-json-nursing" }	
           	]
       	},
       	{
           	"seriesname": optionData.data[2].name,
           	"color": optionData.data[2].color,
           	"showvalues": "1",
           	"data": [
               	{ "value": masterData.data[0].nrpy, "link":"newchart-json-undecided" },
               	{ "value": masterData.data[1].nrpy, "link":"newchart-json-business" },
               	{ "value": masterData.data[2].nrpy, "link":"newchart-json-art" },
               	{ "value": masterData.data[3].nrpy, "link":"newchart-json-cpass" },
               	{ "value": masterData.data[4].nrpy, "link":"newchart-json-davis" },
               	{ "value": masterData.data[5].nrpy, "link":"newchart-json-eberly" },
               	{ "value": masterData.data[6].nrpy, "link":"newchart-json-statler" },
               	{ "value": masterData.data[7].nrpy, "link":"newchart-json-hre" },
               	{ "value": masterData.data[8].nrpy, "link":"newchart-json-journalism" },
               	{ "value": masterData.data[9].nrpy, "link":"newchart-json-dentistry" },
               	{ "value": masterData.data[10].nrpy, "link":"newchart-json-medicine" },
               	{ "value": masterData.data[11].nrpy, "link":"newchart-json-occupational"},												
               	{ "value": masterData.data[12].nrpy, "link":"newchart-json-physical" },
               	{ "value": masterData.data[13].nrpy, "link":"newchart-json-nursing" }		
           	]
       	},
       	{
           	"seriesname": optionData.data[3].name,
           	"color": optionData.data[3].color,
           	"showvalues": "1",
           	"data": [
               	{ "value": masterData.data[0].nrps, "link":"newchart-json-undecided" },
               	{ "value": masterData.data[1].nrps, "link":"newchart-json-business" },
               	{ "value": masterData.data[2].nrps, "link":"newchart-json-art" },
               	{ "value": masterData.data[3].nrps, "link":"newchart-json-cpass" },
               	{ "value": masterData.data[4].nrps, "link":"newchart-json-davis" },
               	{ "value": masterData.data[5].nrps, "link":"newchart-json-eberly" },
               	{ "value": masterData.data[6].nrps, "link":"newchart-json-statler" },
               	{ "value": masterData.data[7].nrps, "link":"newchart-json-hre" },
               	{ "value": masterData.data[8].nrps, "link":"newchart-json-journalism" },
               	{ "value": masterData.data[9].nrps, "link":"newchart-json-dentistry" },
               	{ "value": masterData.data[10].nrps, "link":"newchart-json-medicine" },
               	{ "value": masterData.data[11].nrps, "link":"newchart-json-occupational"},												
               	{ "value": masterData.data[12].nrps, "link":"newchart-json-physical" },
               	{ "value": masterData.data[13].nrps, "link":"newchart-json-nursing" }	
           	]
       	}				
   	],
   	"linkeddata":[{
       	"id":"undecided",
       	"linkedchart":{
         	"chart":{
           	"caption":"Undecided Major Tuition",
       		"decimals": "2",
       		"numberprefix": "$",
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[0].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[0].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[0].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[0].nrps }]
       	}
     	},
     	{
       	"id":"business",
       	"linkedchart":{
         	"chart":{
           	"caption":"College of Business and Economics Tuition",
       		"decimals": "2",
       		"numberprefix": "$",
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[1].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[1].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[1].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[1].nrps }]
       	}
     	},
     	{
       	"id":"art",
       	"linkedchart":{
         	"chart":{
           	"caption":"Creative Arts (Arts, Music, Theatre, etc.) Tuition",
       		"decimals": "2",
       		"numberprefix": "$",
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[2].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[2].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[2].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[2].nrps }]
       	}
     	},
     	{
       	"id":"cpass",
       	"linkedchart":{
         	"chart":{
           	"caption":"College of Physical Activity & Sports Science",
       		"decimals": "2",
       		"numberprefix": "$",
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[3].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[3].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[3].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[3].nrps }]
       	}
     	},
     	{
       	"id":"davis",
       	"linkedchart":{
         	"chart":{
           	"caption":"Davis College of Agriculture, Natural Resources and Design",
       		"decimals": "2",
       		"numberprefix": "$",
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[4].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[4].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[4].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[4].nrps }]
       	}
     	},
     	{
       	"id":"eberly",
       	"linkedchart":{
         	"chart":{
           	"caption":"Eberly College of Arts and Sciences Tuition",
       		"decimals": "2",
       		"numberprefix": "$",
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[5].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[5].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[5].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[5].nrps }]
       	}
     	},
     	{
       	"id":"statler",
       	"linkedchart":{
         	"chart":{
           	"caption":"Statler College of Engineering and Mineral Resources Tuition",
       		"decimals": "2",
       		"numberprefix": "{:content:}quot;,
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[6].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[6].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[6].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[6].nrps }]
       	}
     	},
     	{
       	"id":"hre",
       	"linkedchart":{
         	"chart":{
           	"caption":"College of Human Resources & Education Tuition",
       		"decimals": "2",
       		"numberprefix": "{:content:}quot;,
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[7].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[7].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[7].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[7].nrps }]
       	}
     	},
     	{
       	"id":"journalism",
       	"linkedchart":{
         	"chart":{
           	"caption":"Perley Isaac Reed School of Journalism Tuition",
       		"decimals": "2",
       		"numberprefix": "{:content:}quot;,
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[8].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[8].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[8].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[8].nrps }]
       	}
     	},      		
 		{
       	"id":"dentistry",
       	"linkedchart":{
         	"chart":{
           	"caption":"School of Dentistry Tuition",
       		"decimals": "2",
       		"numberprefix": "{:content:}quot;,
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[9].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[9].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[9].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[9].nrps }]
       	}
     	},      		
 		{
       	"id":"medicine",
       	"linkedchart":{
         	"chart":{
           	"caption":"School of Medicine Tuition",
       		"decimals": "2",
       		"numberprefix": "{:content:}quot;,
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[10].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[10].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[10].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[10].nrps }]
       	}
     	},      		
 		{
       	"id":"occupational",
       	"linkedchart":{
         	"chart":{
           	"caption":"Occupational Therapy Majors Tuition",
       		"decimals": "2",
       		"numberprefix": "{:content:}quot;,
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[11].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[11].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[11].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[11].nrps }]
       	}
     	},
 		{
       	"id":"physical",
       	"linkedchart":{
         	"chart":{
           	"caption":"Physical Therapy Majors Tuition",
       		"decimals": "2",
       		"numberprefix": "{:content:}quot;,
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[12].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[12].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[12].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[12].nrps }]
       	}
     	},
 		{
       	"id":"nursing",
       	"linkedchart":{
         	"chart":{
           	"caption":"School of Nursing Tuition",
       		"decimals": "2",
       		"numberprefix": "{:content:}quot;,
			"formatNumberScale" : "0"
         	},
         	"data":[{ "label": optionData.data[0].name, "color" : optionData.data[0].color, "value": masterData.data[13].rpy },
                 	{ "label": optionData.data[1].name, "color" : optionData.data[1].color, "value": masterData.data[13].rps },
                 	{ "label": optionData.data[2].name, "color" : optionData.data[2].color, "value": masterData.data[13].nrpy },
                 	{ "label": optionData.data[3].name, "color" : optionData.data[3].color, "value": masterData.data[13].nrps }]
       	}
     	}  			
   	]

};

Edited by wvuzero

Share this post


Link to post
Share on other sites

I just noticed for some reason it changed the "numberprefix" in the json to something weird. It should be "$"

 

 

Ok its not letting me fix it... I'll attach a file with the json below.

data.txt

Edited by wvuzero

Share this post


Link to post
Share on other sites
Guest Sumedh

Hey,

 

Did you add all the necessary JavaScript files in your project folder?

 

>FusionCharts.js

>FusionCharts.HC.js

>FusionCharts.HC.Charts.js

>jquery.min.js

Share this post


Link to post
Share on other sites

Hey,

 

Did you add all the necessary JavaScript files in your project folder?

 

>FusionCharts.js

>FusionCharts.HC.js

>FusionCharts.HC.Charts.js

>jquery.min.js

 

Yes all the files are there.

Share this post


Link to post
Share on other sites

Hi,

 

Could you please declare the "jquery.min.js" file before "FusionCharts.js" in the <head> tag of the HTML and see if this helps?

Ex:

<head>

...

<script language="JavaScript" src="../jquery.min.js"></script>

<script language="JavaScript" src="../FusionCharts.js"></script>

</head>

 

Hope this helps. :)

Share this post


Link to post
Share on other sites

Nope still same thing. I was pulling from google CDN for jquery, but with a failover to the local file. Targetting the local jquery file directly still did not solve the issue.

Hi,

 

Could you please declare the "jquery.min.js" file before "FusionCharts.js" in the <head> tag of the HTML and see if this helps?

Ex:

 

Hope this helps. :)

Share this post


Link to post
Share on other sites

After much testing it seems to have to do with the following attribute of the chart: "maxLabelWidthPercent": "13"

 

If i remove that attribute the chart seems to work correctly...

Edited by wvuzero

Share this post


Link to post
Share on other sites

I did not resolve the issue. The issue is still there.

 

It exists with the maxLabelWidthPercent attribute.

 

This needs fixed.

 

 

Its glad to know that, you have managed to resolve your issue. smile.gif

Share this post


Link to post
Share on other sites

Any response to this?

 

It's a reproducible bug, is it a known bug? Any plans to fix it? I could really use the feature when pushing to small display devices to limit the space at which labels take up.

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi,

 

We are looking into this issue.

 

We will get back to you on this, shortly.

Share this post


Link to post
Share on other sites
Guest Sumedh

Any response to this?

 

It's a reproducible bug, is it a known bug? Any plans to fix it? I could really use the feature when pushing to small display devices to limit the space at which labels take up.

 

Hi,

 

This has been identified as an issue.

 

We will update you on this, as it will be fixed.

 

Thanks for your time and support.

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