Pie Chart Labels On Chrome

[DennisB]

Hi, brand new install, I'm liking the product so far but I've run into a problem with javascript charts under Google Chrome. The charts work great under safari and firefox (haven't tested IE yet) but under Chrome all of the labels are omitted. I've attacked a screenshot of how it appears.

 

FusionCharts.version[3, 2, 3, "release", 4749]

 

 

Here is the script:

 

var chartWidth=$('#container-div').width()-50

function showChart() {

$("#graph2").insertFusionCharts({

swfUrl: "/resources/FusionCharts/Pie3D.swf",

width: chartWidth,

height: chartWidth,

id: "revByDet",

renderer: 'Javascript',

 

dataFormat: "json",

dataSource: {

"chart": {

"showLegend":'1',

"caption" : "Revenue By ",

"numberPrefix" : "{:content:}quot;

},

"data" :

[

{'label':"Alpha",'value':'5900','link':'/financials/8/154/?'},{'label':"Betin",'value':'15500','link':'/financials/8/236/?'},{'label':"Biret",'value':'5250','link':'/financials/8/158/?'},{'label':"Spine",'value':'9150','link':'/financials/8/25/?'},{'label':"Etech",'value':'12464','link':'/financials/8/27/?'},{'label':"Integra ",'value':'45936','link':'/financials/8/181/?'},{'label':"Medtech",'value':'65086','link':'/financials/8/36/?'},{'label':"MeTa",'value':'74562','link':'/financials/8/32/?'},{'label':"Other",'value':'21500','link':'/financials/8/2/?'},{'label':"Pioneer",'value':'500','link':'/financials/8/150/?'},{'label':"RTI",'value':'18552','link':'/financials/8/203/?'},{'label':"Obex",'value':'7500','link':'/financials/8/40555/?'},{'label':"Wright",'value':'16044','link':'/financials/8/39/?'},{'label':"Zulu Spine",'value':'1500','link':'/financials/8/17998/?'}

]

}

});

}

[Guest Sashibhusan]

Hi,

Could you please try using the code provided below and render the chart in Chrome browser?

Sample Code:

var chartWidth=$('#container-div').width()-50
function showChart() {
$("#graph2").insertFusionCharts({
swfUrl: "Pie3D.swf",
width: chartWidth,
height: chartWidth,
id: "revByDet",
renderer: 'Javascript',

dataFormat: "json",
dataSource:{
"chart": {
"showLegend":'1',
"caption" : "Revenue By ",
"numberPrefix" : "{:content:}quot"
},
"data" :
[
{'label':"Alpha",'value':'5900','link':'/financials/8/154/?'},{'label' :"Betin",'value':'15500','link':'/financials/8/236/?'},{'label':"Biret" ,'value':'5250','link':'/financials/8/158/?'},{'label':"Spine",'value' :'9150','link':'/financials/8/25/?'},{'label':"Etech",'value':'12464' ,'link':'/financials/8/27/?'},{'label':"Integra ",'value':'45936','link':'/financials/8/181/?'},{'label':"Medtech" ,'value':'65086','link':'/financials/8/36/?'},{'label':"MeTa",'value' :'74562','link':'/financials/8/32/?'},{'label':"Other",'value':'21500' ,'link':'/financials/8/2/?'},{'label':"Pioneer",'value':'500','link' :'/financials/8/150/?'},{'label':"RTI",'value':'18552','link':'/financials/ 8/203/?'},{'label':"Obex",'value':'7500','link':'/financials/8/40555/?' },{'label':"Wright",'value':'16044','link':'/financials/8/39/?'},{'label' :"Zulu Spine",'value':'1500','link':'/financials/8/17998/?'}
]
}
});
} 

Also, please find the attached screen-shot of the chart rendering in chrome browser which displays the labels.

Edited February 15, 2012 by Sashibhusan

[DennisB]

Your post is pretty scrambled and the script won't even run.

I see the 'numberPrefix' argument is different on yours which is the only obvious change

"numberPrefix" : "{:content:}quot”

The quotation mark on the tail end of that is invalid and even when I fix it all I get is garbage for the one label that displays.

Is screencap you sent using my original code?

EDIT: Ok, looks like you edited your post so it's much cleaner. I'm still having the issue and the numberPrefix line is still garbled though.

Edited February 15, 2012 by DennisB

[Guest Sashibhusan]

Hi,

Could you please clarify that you want to display "{:content:}quo" as “numberPrefix” or “$”?

If you need “$” as number prefix (as per your attachment), you could set it as "numberPrefix" : "$”

Please find the attached sample code for the screen-shot that I have sent in previous post.

Hope this helps!!

[DennisB]

If you need “$” as number prefix (as per your attachment), you could set it as "numberPrefix" : "$”

 

I have "numberPrefix" : "$” in the script, I'm not sure what happened with copy/ paste to cause that in the original post. I've also tried it without any number prefix at all. The labels do not appear in chrome. I've tried it on OSX and on Linux both and no luck. Labels appear fine in Safari and Firefox. Your script doesn't seem to help. Here is another script with the same exact problem.

 

var chartWidth=$('#container-div').width()-50,fChart
function showChart() {
$("#graph2").insertFusionCharts({
       swfUrl: "/resources/FusionCharts/Pie3D.swf", 
       width: chartWidth, 
       height: chartWidth, 
       id: "revByDet",
       renderer: 'Javascript',

       dataFormat: "json", 
       dataSource: { 
               "chart": { 
                     "showLegend":'1',
                     "caption" : "Revenue By ",
                     "numberPrefix" : "$"
               },
               "data" : 
        		[
        		{'label':"Smith & Nephew",'value':'28290','link':'/financials/8/37/?units=Thousands&region=US'},{'label':"Wright",'value':'77318','link':'/financials/8/39/?units=Thousands&region=US'},{'label':"Zimmer ",'value':'1572','link':'/financials/8/40/?units=Thousands&region=US'}
        		]
               }
}); 
}

EDIT: apparently the forum software mangles code when you submit. I verified the "$" was correct this time. That's really annoying.

Edited February 23, 2012 by DennisB