Html5 Fallback Not Working Correctly For Pie Charts

[DannyR]

Again, this is working in the Flash version, but not in the HC version (both for 2D as well as 3D):

 

<script language="JavaScript">				
var jsonData = {
chart: {
	caption: "Title",
	palettecolors:"BF0900,00FF00,FFFF64",
	showvalues: "0"
},
"data":[
	{
		label: "Failed",
		value: "1",
		issliced: "1"
	},
	{
		label: "Passed",
		value: "4"
	},
	{
		label: "Unknown",
		value: "0"
	}
]
};

FusionCharts.setCurrentRenderer("javascript");

var chart = new FusionCharts("../../js/FusionCharts/Pie2D.swf", "myChart-chartId", 400, 300);

chart.setJSONData(jsonData);

chart.render("myChart");
</script>

 

You'll see that not only is a slice of the pie missing, but my colors aren't respected. The problem may be the "0" value for "unknown" - however this SHOULD be a valid value!

 

FC team I like your product a lot, but I convinced my company to purchase on the basis of NON-flash support. We NEED to get these issues resolved before we can ship our next version!

[Guest Basundhara Ghosal]

Hi Danny,

 

Could you please send us a mail at [email protected] specifying the issue?

 

Awaiting your reply.

[Bigcalm]

This update that allows us to use the same XML code, but renders in a compliant way on everything including the shiny new iPads is totally fricking awesome.

I realise this is beta, and that it'll get better, don't worry!!

I'm also experiencing a few problems with the pie charts fallback:

 

NOTE: I'm using the latest firefox versionand forcing it to render this way using FusionCharts.setCurrentRenderer('JavaScript'); before any call to chart_x.render(); so it's possible that it's a firefox rather than a fusion charts problem.

 

Problems:

* decimals='2' isn't respected

* showPercentValues doesn't seem to be carried through (I'd like to show amounts, but this can't be done)

* This xml produces a fallback chart that shows 1 segment and some black noise in the top left hand corner, rather than an actual pie chart:

<chart palette='2' caption='Spraak voor mobiel 0621294155, Okt 2009 naar Sep 2010' subCaption='' showBorder='0' formatNumberScale='0' labelDisplay='ROTATE' slantLabels='1' decimalSeparator=',' thousandSeparator='.' inThousandSeparator='.' inDecimalSeparator=',' forceDecimals='2' decimals='2'  maxColWidth='55'><set label='Okt 2009' value='     	123,58' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D10%26callYear%3D2009' /><set label='Nov 2009' value='          91,94' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D11%26callYear%3D2009' /><set label='Dec 2009' value='          81,94' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D12%26callYear%3D2009' /><set label='Jan 2010' value='          62,52' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D1%26callYear%3D2010' /><set label='Feb 2010' value='     	148,15' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D2%26callYear%3D2010' /><set label='Maa 2010' value='     	121,32' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D3%26callYear%3D2010' /><set label='Apr 2010' value='          68,50' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D4%26callYear%3D2010' /><set label='Mei 2010' value='          44,15' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D5%26callYear%3D2010' /><set label='Jun 2010' value='     	133,02' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D6%26callYear%3D2010' /><set label='Jul 2010' value='     	178,39' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D7%26callYear%3D2010' /><set label='Aug 2010' value='          40,19' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D8%26callYear%3D2010' /><set label='Sep 2010' value='     	103,72' link='mob%5Ftrends%2Ehtml%3Fhandset%3D0621294155%26callMonth%3D9%26callYear%3D2010' /></chart>

* Also: On large bar charts, the labels can fail to appear. XML example:

<chart caption='Analyse van gesprekken per uur  - Oktober 2010' bgAngle='100' use3DLighting='1' canvasBaseColor='FFFFFF' divLineColor='FFFFFF' divLineThickness='2' baseFontSize='10' showCanvasBg='0'  xAxisName='Uur' yAxisName='Aantal' showValues='0' bgColor='FFFFFF,6CABDE' decimalSeparator=',' thousandSeparator='.' inThousandSeparator='.' inDecimalSeparator=','><categories><category name='00' /><category name='01' /><category name='02' /><category name='03' /><category name='04' /><category name='05' /><category name='06' /><category name='07' /><category name='08' /><category name='09' /><category name='10' /><category name='11' /><category name='12' /><category name='13' /><category name='14' /><category name='15' /><category name='16' /><category name='17' /><category name='18' /><category name='19' /><category name='20' /><category name='21' /><category name='22' /><category name='23' /></categories><dataset seriesName='Spraak'><set value='18' /><set value='3' /><set value='1' /><set value='1' /><set value='' /><set value='1' /><set value='3' /><set value='15' /><set value='32' /><set value='103' /><set value='94' /><set value='102' /><set value='122' /><set value='114' /><set value='132' /><set value='138' /><set value='143' /><set value='157' /><set value='96' /><set value='97' /><set value='91' /><set value='53' /><set value='63' /><set value='24' /></dataset><dataset seriesName='Data'><set value='18' /><set value='17' /><set value='16' /><set value='15' /><set value='15' /><set value='15' /><set value='16' /><set value='17' /><set value='28' /><set value='41' /><set value='41' /><set value='41' /><set value='40' /><set value='34' /><set value='36' /><set value='34' /><set value='42' /><set value='26' /><set value='20' /><set value='20' /><set value='43' /><set value='41' /><set value='32' /><set value='36' /></dataset></chart>

Edited October 6, 2010 by Bigcalm

[Peter]

I have exactly the same problem with the Pie chart's decimal value in HTML5

 

My XML is:

<chart showBorder='1'  enableRotation='1' showPercentageValues='1' showLabels='0' showValues='1' numberSuffix='%25' borderThickness='0'  borderColor='ffffff'  bgColor='ffffff' bgAlpha='100' palette='5' forceDecimals='2' decimals='2'>
<set color='FF6666' label='190 govt, 182 ngov : 372 total' value='45' />
<set color='FFA500' label='156 govt, 107 ngov : 263 total' value='32' />
<set color='66ff66' label='124 govt, 73 ngov : 197 total' value='24' />
</chart>

Two problems that I have are:

1 - Value is not formatted with decimal value

Using forceDecimal=2 or decimal=2 or decimalPrecision=2 only works correctly with the value appeared in the tooltip, but not the value shown on each slice.

See attachment.

 

2 - Size of pie chart:

I set the chart to be rendered with width=250 and height=250. However, the HTML5 result of this pie chart turns to be 250x400.

The height, I guess, was auto calculated to include the text 'FusionCharts - Highcharts'.

I'm currently using the evaluation version of FusionCharts. Not sure if it is something to do with this issue.

[Sanjukta]

Hi All,

 

Could you please try downloading the latest version, i.e, FusionCharts v3.2.1 with the help of the following link?

http://www.fusioncharts.com/Download.asp

 

This latest upgraded feature has fixed all the issues stated above.

 

Hope this helps.

[DannyR]

Hi All,

 

Could you please try downloading the latest version, i.e, FusionCharts v3.2.1 with the help of the following link?

http://www.fusioncha...om/Download.asp

 

This latest upgraded feature has fixed all the issues stated above.

 

Hope this helps.

 

How do I get an updated licensed version and not the eval version?

[Sanjukta]

Hi,

 

Could you please send us a mail at [email protected] requesting for further details on the licensed latest version, i.e, FusionCharts v3.2.1?

 

Looking forward to your mail.

[DannyR]

Excellent! Email sent, awaiting your reply.

 

You'll be happy to know that this problem is INDEED fixed with the Evaluation version - I'm very pleased! Just waiting on the "real" version now.

 

Many thanks!

[Sanjukta]

Hi,

 

You are welcome.

 

We are very glad to know that your issue is resolved.

 

We shall be shortly replying to your mail.

 

Thanks for yourpatience and patronage.

[Peter]

Hi All,

 

Could you please try downloading the latest version, i.e, FusionCharts v3.2.1 with the help of the following link?

http://www.fusioncha...om/Download.asp

 

This latest upgraded feature has fixed all the issues stated above.

 

Hope this helps.

 

I have used the latest update (licensed version).

It fixed the issue with decimal value but not the size of Pie chart.

The height of the chart is longer, and causes the chart overlaying any content after the chart.

Anyway, thank you for fast response.

[Ayan Pal]

Hi Peter,

 

Thanks for our post.

 

 

We are unable to produce the issue, as yet.

 

 

Please find attached a working sample of pie of 100*100 pixel size which works at a lower size as well. If your issue persists/remains, please send us a basic sample/ live-link of the issue.

JSSmall.zip

[Peter]

Hi Peter,

 

Thanks for our post.

 

 

We are unable to produce the issue, as yet.

 

 

Please find attached a working sample of pie of 100*100 pixel size which works at a lower size as well. If your issue persists/remains, please send us a basic sample/ live-link of the issue.

 

 

I just find out the issue with the height. Once you added the attribute borderThickness into the chart, it caused the calculation wrong.

For example, with your JSSmall example, I update the JSON data as following:

 

{
"chart": {
   	"caption" : "Sales Summary",
	"borderThickness": "0"
},
"data": [
   	{"value":"45"},
   	{"value":"60"},
   	{"value":"70"},
   	{"value":"20"}
]
}

 

Run it and see the charts size going wrong. Of course, I can live without using borderThickness attribute, but it is better for it to be fixed so that it can work in the same way as Flash version.

Thanks.

[Bigcalm]

Heya.

 

Upgrading to 3.2 has mostly solved the problems in the fallbacks. Pie charts now look lovely in most cases

 

Some small issues:

 

* numberPrefix='%E2%82%AC' should produce a euro symbol - I get %E2%82%AC instead!!

 

* narrow column names doesn't seem to work on column charts. Example:

 

		<chart caption='Analyse van gesprekken per uur  - Oktober 2010' bgAngle='100' use3DLighting='1' canvasBaseColor='FFFFFF' divLineColor='FFFFFF' divLineThickness='2' baseFontSize='10' showCanvasBg='0'  xAxisName='Uur' yAxisName='Aantal' showValues='0' bgColor='FFFFFF,6CABDE' decimalSeparator=',' thousandSeparator='.' inThousandSeparator='.' inDecimalSeparator=','><categories><category name='00' /><category name='01' /><category name='02' /><category name='03' /><category name='04' /><category name='05' /><category name='06' /><category name='07' /><category name='08' /><category name='09' /><category name='10' /><category name='11' /><category name='12' /><category name='13' /><category name='14' /><category name='15' /><category name='16' /><category name='17' /><category name='18' /><category name='19' /><category name='20' /><category name='21' /><category name='22' /><category name='23' /></categories><dataset seriesName='Spraak'><set value='1' /><set value='' /><set value='1' /><set value='' /><set value='' /><set value='' /><set value='4' /><set value='44' /><set value='93' /><set value='82' /><set value='91' /><set value='120' /><set value='82' /><set value='86' /><set value='111' /><set value='116' /><set value='75' /><set value='47' /><set value='34' /><set value='57' /><set value='24' /><set value='17' /><set value='4' /><set value='1' /></dataset><dataset seriesName='Data'><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='6' /><set value='1' /><set value='2' /><set value='1' /><set value='2' /><set value='0' /><set value='5' /><set value='6' /><set value='2' /><set value='3' /><set value='0' /><set value='0' /><set value='0' /><set value='13' /><set value='0' /><set value='0' /><set value='0' /></dataset></chart>

Edited October 13, 2010 by Bigcalm

[Sanjukta]

Hi,

 

Could you please try using the "Euro" (€) sign directly for the attribute "numberPrefix" instead of URL Encoding it?

 

Hope this helps.

[Bigcalm]

Hi,

 

Could you please try using the "Euro" (€) sign directly for the attribute "numberPrefix" instead of URL Encoding it?

 

Hope this helps.

 

It doesn't work on either normal or fallback when I use € - I get a square so may possibly missing from the font that it's rendering in could be the problem?

[Sanjukta]

Hi,

 

To use multi-lingual characters on the chart, you necessarily need to use UTF-8 encoded XML. More importantly, the XML file/stream does require a BOM stamp to be present as the very first 3 Bytes of the file. Hence, one must remember the two basic thumb rules :

 

• for dataURL method - the XML file/stream should be having the BOM stamp and
• for dataXML method - the HTML/application file containing the XML as well as the chart SWF should have the BOM stamp.

For further details on the above, please refer to the following link.[/url]

http://www.fusioncharts.com/docs/?SpCharAll.html

 

Hope this helps.