HighCharts TypeError: ha is not a function

Question

I'm having trouble using the HighChart into my php codes.

Originally I created a graph.php and manage to get it up and running on its own.

However when I integrated it into another php (adminlist.php), the graph fails to appear and upon debugging, the error shows "TypeError: ha is not a function" and TypeError: $(...).highcharts is not a function (sorry new here unable to attach pictures)

My code in adminlist.php is as follows :

<ul class="nav nav-pills nav-stacked">
<li <?php if($_GET['function'] == 'graph'){echo 'class="active"';}?>><a href="adminlist.php?function=graph">Analyzer</a></li>
</ul>
                        if ($_GET['function'] == 'graph'){
                    include('graph.php');

                    }

My code in graph.php (it works if i call graph.php directly but not when i include it in adminlist.php). Source code is as follows :

<div id="mostpopular" style="height: 400px"></div>
<script src="bootstrap-3.2.0-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script src="bootstrap-3.2.0-dist/js/bootstrap-markdown.js"></script>
<script src="bootstrap-3.2.0-dist/js/jquery.hotkeys.js"></script>
<script src="Highcharts-4.0.4/js/highcharts.js"></script>
<script src="Highcharts-4.0.4/js/highcharts-3d.js"></script>
<script src="Highcharts-4.0.4/js/modules/exporting.js"></script>

<script type="text/javascript">

$(function () {
    $('#mostpopular').highcharts({
        chart: {
            type: 'column',
            margin: 75,
            options3d: {

                alpha: 10,
                beta: 25,
                depth: 70
            }
        },
        title: {
            text: 'Sale transaction volume'
        },
        subtitle: {
            text: 'List of total sales by food category'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        xAxis: {
            categories: ['<?php echo $foodnamearr[0]; ?>', '<?php echo $foodnamearr[1]; ?>','<?php echo $foodnamearr[2]; ?>','<?php echo $foodnamearr[3]; ?>','<?php echo $foodnamearr[4]; ?>','<?php echo $foodnamearr[5]; ?>','<?php echo $foodnamearr[6]; ?>','<?php echo $foodnamearr[7]; ?>']
        },
        yAxis: {
            opposite: true
        },
        series: [{
            name: 'Sales',
            data: [<?php echo $qty[0]; ?>,<?php echo $qty[1]; ?>, <?php echo $qty[2]; ?>, <?php echo $qty[3]; ?>, <?php echo $qty[4]; ?>, <?php echo $qty[5]; ?>, <?php echo $qty[6]; ?>, <?php echo $qty[7]; ?>]
        }]
    });
});
        </script>

Answer 1

Old question, but if anybody finds themselves searching:

As of 4.0.4, ha is the minified version of the error method. The one time in the script where error is called before it is defined is at line 106 where it's checking for a dirty Highcharts namespace:

if (win.Highcharts) {
  error(16, true);
} else {
  Highcharts = win.Highcharts = {};
}

You don't get the actual error because of the bug. Intended output is:

uncaught exception: Highcharts error #16: www.highcharts.com/errors/16

Note: Of course, depending on your version of Highcharts, the code could have changed.

Answer 2

Check you are not importing the same highcharts javascript files in the template you are working in, and the template you are including.

In my case it solved the problem.