FusionChart conflicts with Prototype 1.6.1

[fusmac33]

You can use following FusionCharts JsFiddle as starting point:

 

html:

<div id="divid">FusionCharts will render here</div>

javascript:

FusionCharts.ready(function () {

            FusionCharts.setCurrentRenderer('javascript');
            var a = new FusionCharts({type: "bar2d", id: "contracts_57234775759d1", renderAt: 'divid', width: "800", height: "600"});
	//Provide entire XML data using dataXML method
	a.setDataXML("<chart caption='Lorem ipsum' subcaption='' numberPrefix='€ ' clicked_level_id='' clicked_chart_report_id='69'><set label='Main category' value='644053250' link='newchart-xml-5652'/><linkeddata id='5652'><chart caption='Amounts' subcaption='Main category' numberPrefix='€ ' clicked_level_id='5652' clicked_chart_report_id='69' grid_class='cdgrid' filters='{"department_id":5652,"history_date":null}'><set label='Sub1' value='15000000'/><set label='Sub2' value='0'/><set label='Demo' value='566065750' link='newchart-xml-19249'/><set label='Sub3' value='0'/><set label='Sub4' value='0'/><set label='Sub5' value='40514250' link='newchart-xml-5656'/><set label='Sub6' value='15000000'/><set label='Sub7' value='0'/><set label='Sub8' value='0'/><set label='Sub9' value='0'/><set label='test' value='0'/><set label='testDep' value='0'/><set label='Sub10' value='0'/><linkeddata id='19249'><chart caption='Lorem ipsum' subcaption='Main category->Demo' numberPrefix='€ ' clicked_level_id='19249' clicked_chart_report_id='69' grid_class='cdgrid' filters='{"department_id":19249,"history_date":null}'><set label='110' value='0'/><set label='30' value='0'/><set label='5' value='0'/><set label='56' value='0'/><set label='A1' value='0'/><set label='A2' value='0'/><set label='A3' value='0'/><set label='A4' value='0'/><set label='A5' value='0'/><set label='A6' value='0'/><set label='A7' value='550000000'/><set label='A8' value='550006500'/><set label='A9' value='550000000'/><set label='A10' value='550006500'/><set label='A11' value='550014250'/><set label='A12' value='550000000'/><set label='A13' value='0'/><set label='A14' value='0'/><set label='A15' value='0'/><set label='A16' value='0'/><set label='A17' value='16000000'/></chart></linkeddata><linkeddata id='5656'><chart caption='Amounts' subcaption='Directie->a' numberPrefix='€ ' clicked_level_id='5656' clicked_chart_report_id='69' grid_class='cdgrid' filters='{"department_id":5656,"history_date":null}'><set label='Grondexploitatie' value='0'/><set label='Proj' value='23014250' link='newchart-xml-5660'/><linkeddata id='5660'><chart caption='Amounts' subcaption='Directie->A->Projectontwikkeling' numberPrefix='€ ' clicked_level_id='5660' clicked_chart_report_id='69' grid_class='cdgrid' filters='{"department_id":5660,"history_date":null}'><set label='Label1' value='0'/><set label='Label2' value='23014250'/></chart></linkeddata></chart></linkeddata></chart></linkeddata></chart>");
	a.render("divid");
        });

You run this it will work just fine. It will render the chart, click on the bar, you see the other bars, all is ok.

 

Now add external Prototype as external source: http://prototypejs.org/assets/2009/8/31/prototype.js

 

Run it, the chart is generated find but when clicking on the bar you see "No data to display" although nothing changed. There is no error either. 

[fusmac33]

Not sure why the jsfiddle link was not added in the original post. Here it is: http://jsfiddle.net/fusioncharts/4cyFz/

[Moonmi Sonowal]

Hi,

 

The shared fiddle is linked chart fiddle. Please check out this feature from http://www.fusioncharts.com/features/linkedcharts-for-drill-down/

 

However, regarding your issue, do you want to just an url to re-direct to some other page ?

 

Awaiting response.

 

Thanks.

[fusmac33]

Not really sure which is the actual question. I want it to behave just like linked charts behave. As mentioned in the initial post, if I don't load prototype, it works just fine, it works like the example you provided, so it's all good. As soon as I also load Prototype, it doesn't work anymore. Main chart is loaded and when clicked it says "No data to display".

[Moonmi Sonowal]

Hi,

 

The linked format would only work if you have correct data format as the  chart type mentioned. 

 

Please make sure the format is correct.

 

You can also share your implementation is the js fiddle, so that we can assist you properly.

 

Thanks

[stelios]

Hi fusmac33,

I have the same problem on a legacy application. Did you find any solution for this?

Thanks,

[Ayan Bhadury]

Hi,

Sorry to hear that.

Could you please elaborate your query and share us a scale down sample where the problem is getting replicated. 

[stelios]

Hi,

In the jsfiddle example below, if you select "Prototype 1.6.1.0" as JavaScript framework, the chart does not render. The debug console prints out "Uncaught TypeError: f.sort is not a function". However if you select "Prototype 1.7.3" the chart works.

http://jsfiddle.net/fusioncharts/6nVm2/

Edited January 18, 2018 by stelios
added jsfiddle link

[stelios]

Hi Ayan,

Any news on this bug?

[Ayan Bhadury]

Apologies for the delayed response, we are investigating this and we will get back to you with the updates shortly. 

[Ayan Bhadury]

Hi,

Prototype JS framework overrides the native definition of *JSON.parse* & *JSON.stringify* due to which the proper output is not achieved  (up to v1.6.1.0). It is working fine in v1.7.3. 
In the sample provided the javaScript *sort* function is called on a string (since JSON.parse is returning a string). Hence the issue.
Sample using v1.6.1: https://jsfiddle.net/ufyatvuz/1/
Sample using v1.7.3: https://jsfiddle.net/5mbfurne/1/
Please check, the console.

[stelios]

Hi,

I will try to update the PrototypeJS version to 1.7.3 then.

Thank you

[Ayan Bhadury]

welcome