$(...).highcharts is not a function

0
votes

I know questions with the same title have been asked multiple times. I have looked at multiple answers and none of them fix my error.

This is my code:

head tag

<script src='/javascripts/jQuery-1.11.3.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--<script src='/javascripts/highCharts.js'></script>-->
<script src='http://code.highcharts.com/highcharts.js'></script>

I have attempted CDNing and also from my domain (code in highCharts.js taken straight from http://code.highcharts.com/highcharts.js)

My plugin is also after I've loaded in my jQuery so that's not the error.

When DOM is loaded

$(function() {                                           
    buildHighcharts();
});

function buildHighcharts() {
    $('#graph_bar_month').highcharts({
        ....
    });

    $('#graph_line_year').highcharts({
        ...
    });

    $('#graph_bar_teamPercent').highcharts({
        ...
    });

    $('#graph_bar_teamActual').highcharts({
        ...          
    });
}

HTML

<div class="tab-pane maxHeight" id="show_graph">
    <div class="row maxHeight maxWide">
        <div id="graph_bar_month" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_line_year" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_bar_teamActual" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_bar_teamPercent" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
    </div>
</div>

I have tried cutting it down to only one highchart, as thought multiple might be causing the error, but no luck.

Have tried adding series data to the chart to try and force it to display but no luck

This is my entire head (I cannot see the error being anywhere else than here):

<head>
  <link rel='stylesheet' href='/stylesheets/css/style.css' />
  <link rel='stylesheet' href='/stylesheets/css/tables.css' />
  <link rel='stylesheet' href='/stylesheets/css/jquery.mCustomScrollbar.css' />
  <link rel='stylesheet' href='/stylesheets/css/wrappers.css' />
  <link rel='stylesheet' href='/stylesheets/css/queries.css' />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <script src="/javascripts/jquery-1.10.2.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src='/javascripts/jquery.mCustomScrollbar.concat.min.js'></script>
  <script src='/javascripts/clock.js'></script>
  <script src='/javascripts/fixedHeader.js'></script>
  <!--<script src='/javascripts/customLogin.js'></script>-->
  <script src='/javascripts/customAlert.js'></script>
  <!--<script src='/javascripts/highCharts.js'></script>-->
  <script src='http://code.highcharts.com/highcharts.js'></script>
  <!--<script src='/javascripts/displayCustomScroll.js'></script>-->
  <!--<script src='/javascripts/displayHighcharts.js'></script>-->
  <script>
      (function($) {
          $(window).load(function(){
              $(".bottomWrapperTable").mCustomScrollbar({
                  axis: "y",
                  theme: "dark",
                  scrollbarPosition: "outside",
                  callbacks: {
                      whileScrolling: function(){
                          setScroll(this.mcs.left);
                      },
                      onScroll: function() {
                          setStartEndScroll(this.mcs.leftPct);
                      }
                  }
              });
              setInterval('updateClock()', 1000);
          });
      })(jQuery);

      function buildHighcharts() {
          $('#graph_bar_month').highcharts({
              chart: {
                  renderTo: 'graph_bar_month',
                  type: 'bar'
              },
              title: {
                  text: '**Current Month**'
              },
              xAxis: {
                  categories: ['On Target', 'Below Target', 'Not Entered']
              },
              yAxis: {
                  title: {
                      text: '%'
                  },
                  categories: [0, 50, 100]
              }
          });

          $('#graph_line_year').highcharts({
              chart: {
                  type: 'line'
              },
              title: {
                  text: '**Current Year**'
              },
              xAxis: {
                  categories: ['January', 'February', 'March']
              },
              yAxis: {
                  title: {
                      text: '%'
                  },
                  categories: [0, 50, 100]
              },
              series : [{
                  name: 'Total % On Target',
                  data: [1, 2, 3]
              }, {
                  name: 'Total % Below Target',
                  data: [1, 2, 3]
              }, {
                  name: 'Total % Not Entered',
                  data: [1, 2, 3]
              }]
          });

          $('#graph_bar_teamPercent').highcharts({
              chart: {
                  type: 'bar'
              },
              title: {
                  text: 'Team % On Target'
              },
              xAxis: {
                  title: {
                      text: 'Team'
                  },
                  categories: ['Daimler', 'Mclaren', 'Comms Server']
              },
              yAxis: {
                  categories: [0, 50, 100],
                  title: {
                      text: '%'
                  }
              }
          });

          $('#graph_bar_teamActual').highcharts({
              chart: {
                  type: 'bar'
              },
              title: {
                  text: 'Team % On Target'
              },
              xAxis: {
                  title: {
                      text: 'Team'
                  },
                  categories: ['Daimler', 'Mclaren', 'Comms Server']
              },
              yAxis: {
                  categories: [0, 50, 500]
              }
          });
      }

      $(function() {                                            //$(document).ready()
          var url = window.location.href;
          buildHighcharts();
          if (url.indexOf('?error') != -1) {
              Alert.render('Record no longer exists!\nPlease choose another', 'Oops!');
          }

          $('#createBtn').on('click', function() {
              $('#currProdID').val($('#projDrop').val());
              $('#currMetrics').submit();
          });

          $('#fixed-table-head').on('scroll', function(e, val) {
              if((-val >= 0) && (val < 10000)) {
                  this.scrollLeft = -val;
              } else if (val === 10000) {
                  this.scrollLeft = (this.scrollWidth - this.clientWidth);
              }
          });

          if (document.getElementById('projDrop').value != "") {
              document.getElementById('createBtn').disabled = false;
          }

          $('#projDrop').on('change', function() {
              document.getElementById('createBtn').disabled = false;
          });
      });
  </script>
</head>

[SOLVED]

My error was that I was calling buildHighcharts before it had been invoked.

Solution: Called the function in $(window).load() whilst keeping the invoke outside it

3
javascriptjqueryhighcharts
Can you see the scripts being loaded in the network tab of the developer tools? – Diego
Yes, all scripts are being loaded except highcharts – wmash
Also verify highcharts works with your jquery version – cdvv7788
If highcharts script is not being loaded try using a local version – Diego
@Diego when I switch to the local version, the script loads but still getting the same error – wmash

3 Answers

1
votes

Based on best practices you should not use functions before define it.

Try to put in your script something like this:

$(document).ready(function() {                                           
     var buildHighcharts = function() {
          $('#graph_bar_month').highcharts({
              ....
          });

          $('#graph_line_year').highcharts({
              ...
          });

          $('#graph_bar_teamPercent').highcharts({
              ...
          });

          $('#graph_bar_teamActual').highcharts({
              ...          
          });
      }  

      buildHighcharts();       
});

Please check this out ! It's working putting the function in the correct place...

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='http://code.highcharts.com/highcharts.js'></script>
<script>
$(function () { //$(document).ready()
    var buildHighcharts = function () {
        $('#graph_bar_month').highcharts({
            chart: {
                renderTo: 'graph_bar_month',
                type: 'bar'
            },
            title: {
                text: '**Current Month**'
            },
            xAxis: {
                categories: ['On Target', 'Below Target', 'Not Entered']
            },
            yAxis: {
                title: {
                    text: '%'
                },
                categories: [0, 50, 100]
            }
        });

        $('#graph_line_year').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: '**Current Year**'
            },
            xAxis: {
                categories: ['January', 'February', 'March']
            },
            yAxis: {
                title: {
                    text: '%'
                },
                categories: [0, 50, 100]
            },
            series: [{
                name: 'Total % On Target',
                data: [1, 2, 3]
            }, {
                name: 'Total % Below Target',
                data: [1, 2, 3]
            }, {
                name: 'Total % Not Entered',
                data: [1, 2, 3]
            }]
        });

        $('#graph_bar_teamPercent').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Team % On Target'
            },
            xAxis: {
                title: {
                    text: 'Team'
                },
                categories: ['Daimler', 'Mclaren', 'Comms Server']
            },
            yAxis: {
                categories: [0, 50, 100],
                title: {
                    text: '%'
                }
            }
        });

        $('#graph_bar_teamActual').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Team % On Target'
            },
            xAxis: {
                title: {
                    text: 'Team'
                },
                categories: ['Daimler', 'Mclaren', 'Comms Server']
            },
            yAxis: {
                categories: [0, 50, 500]
            }
        });
        console.log($.fn.highcharts)
    }

    buildHighcharts();
});
</script>
</head>
<body>
  <div class="tab-pane maxHeight" id="show_graph">
    <div class="row maxHeight maxWide">
        <div id="graph_bar_month" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_line_year" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_bar_teamActual" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_bar_teamPercent" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
    </div>
</div>
</body>
0
votes

From their documentation:

http://www.highcharts.com/documentation/compatibility

jQuery

  • 1.4.3 - 1.10.x for all browsers.
  • 2.0.x for modern browsers.

MooTools 1.2.5 - 1.4.5

Prototype 1.7

You are not using a supported version of jQuery with highcharts. Is that your actual problem? I do not know. Switch to jQuery 1.10 and see if it loads. If it does, than we figured out your issue. If not, than you need to see why the JavaScript file is not being loaded correctly.

Now what would cause the file to not load?

  • Is the file path correct? Check network tab to see if it loads
  • Is a browser plug-in blocking the file? Check network tab to see if it loads
  • Did you include jQuery more than once on the page? You should only have it on the page once, that can cause issues with plugins
0
votes
use `var chart = new Highcharts.Chart({`
instead of `$('#container').highcharts({`

or possible solution would be order of jquery and highchart script
it should be 

    <script src="js/jquery-2.0.2.min.js"></script>  
        <script src="js/highcharts.js"></script>  
        <script src="js/drilldown.js"></script>