Cannot call method 'on' of undefined

I'm trying to integrate FusionCharts and Aloha editor on same page. Since Aloha have dependency on jquery I'm assuming that's what causes some kind of conflict, but I couldn't solve it and I'm struggling with it all day. Any help would be appreciated. Thank you

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Getting Started with Aloha Editor</title>
    <link rel="stylesheet" href="index.css" type="text/css">
    <link rel="stylesheet" href="aloha.css" type="text/css">
    <script src="require.js"></script>
    <script src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
    <script src="aloha.js" data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link"></script>
</head>
<body>
    <div id="main">
        <div id="content"><p>Getting started with Aloha Editor!</p></div>


        <div id="chartContainer">FusionCharts XT will load here!</div> 
    </div>
    <script type="text/javascript">
    Aloha.ready( function() {
        Aloha.jQuery('#content').aloha();
    });
        var myChart = new FusionCharts("Column3D", "myChartId", "400", "300");
        myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
        "yAxisName='Sales' numberPrefix='$'>" +
          "<set label='Week 1' value='14400' />" +
          "<set label='Week 2' value='19600' />" +
          "<set label='Week 3' value='24000' />" +
          "<set label='Week 4' value='15700' />" +
        "</chart>");
        myChart.render("chartContainer");
    </script>
</body>
</html>

Solution

I recreated your issue with the exact same HTML you provided. It seems to be an issue with asynchronous resource loading of eve.js - an internal component that Raphael is dependent upon. There are three ways to fix this:

Note that this is an issue first detected in FusionCharts version 3.3.0-release.18739 and may not be applicable for other versions.

1. The simplest fix

Manually include the script files FusionCharts.js, FusionCharts.HC.js and FusionCharts.HC.Charts.js in this specific order.

2. Editing FusionCharts.HC.js

This is a simple one-line edit of FusionCHarts.HC.js source file. In case you have the minified version, (this might look ugly)... locate line 144 and replace the first part of the line

FusionCharts(["private","modules.renderer.js-raphael",function(){var l=this.hcLib,i,r=window.Raphael,C;(function(d){var j=/[\.\/]/,i=function(){},e=function(d,e){return d-e},l,r,C={n:{}},M=function(d,j)

with

FusionCharts(["private","modules.renderer.js-raphael",function(){var l=hfeve=this.hcLib,i,r=window.Raphael,C;(function(d){var j=/[\.\/]/,i=function(){},e=function(d,e){return d-e},l,r,C={n:{}},M=hfeve.eve=function(d,j)

In case you have the source file then locate line 5535 of FusionCharts.HC.js and replace the whole line with eve = lib.eve = function(name, scope) {

3. Use the modified code.

I am attaching a link to the patched FusionCharts.HC.js (minified) and will work for trial version (untested on licensed version) and compatible with v3.3.0.18739. Expecting the next build of FusionCharts will address this in some way or the other. :)

http://pastebin.com/raw.php?i=Zbhaq5hP

PS: Pastebin link will not stay forever. Thus, will update and modify the post once a hosted link is available.