fusmac33

FusionChart conflicts with Prototype 1.6.1

Recommended Posts

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. 

Share this post


Link to post
Share on other sites

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".

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by stelios
added jsfiddle link

Share this post


Link to post
Share on other sites

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.

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