FusionCharts Flash charting suite has an amazing integration with JavaScript. It allows charts to be created using JavaScript, raises appropriate JavaScript events, allows charts to be updated using its simple JavaScript API and a lot more. There is a blog post on FusionCharts blog, describing the same.
When it comes to JavaScript, we can never complete the discussion without discussing about popular JavaScript frameworks like jQuery. These frameworks have become an integral part of advanced JavaScript application development.
Keeping the above in mind, it is very natural that we would want to execute JavaScript from within FusionCharts. This happens to be very simple to implement. Just typing “javascript:” followed by your JavaScript code, executes them from within FusionCharts link (and clickURL) attributes.
link="javascript: $('myDiv').load('ajaxPage.html')"
However, it is not so straightforward to execute jQuery codes from within FusionCharts. Why? Simply put, jQuery codes return the jQuery object itself (for chainability) and this in turn causes FusionCharts to navigate to an arbitrary URL called “[object Object]” upon clicking. Even if the JavaScript codes return false, it navigates to the URL “false”.
This can be initially very frustrating. But looking into FusionCharts behaviour, it can be observed that it does not navigate to a link if the JavaScript function returns undefined. This is (in my opinion,) because Flash is unable to distinguish much between string and other data-types that are serialized and sent over to it using ExternalInterface[1].
The Solution
Return undefined. The above example code would run perfectly, if we can manage to return undefined at the end of the code. Just prefixing the code with “return undefined” does not help as FusionCharts does not execute multi-line JavaScript. Hence, the simplest solution is call a variable that is undefined.
link="javascript: $('myDiv').load('ajaxPage.html').foo"
Notice the “.foo” at the end of the code. This variable does not exist, hence our JavaScript code returns undefined.
Using the above method, it becomes seamless to call all our jQuery codes from within FusionCharts.
Footnotes:
- The ExternalInterface class is the External API, an application programming interface that enables straightforward communication between ActionScript and the Flash Player container– for example, an HTML page with JavaScript. [top]
Related posts:
{ 1 trackback }
{ 2 comments… read them below or add one }
Obviously you didn’t mean for the <strong> tags to show in the line of code in the solution…
Lolz. Strongly not! :p
Thanks for pointing out.