JavaScript error when using Highcharts

Question

I am having a weird problem that I hope you can help me with.

I have Highcharts running on a dev website -- I use a simple form to allow the user to enter data.

On the same page, a Highchart shows once data is entered.

The data entry form has very simple jQuery-based snippets, eg. form validation, a counter for max number of characters, etc.

What happens is that when there is chart data in the database, the chart plots correctly, and the remaining JS snippets work as expected wen you try to enter new datapoints.

But if there is no data in the database (therefore no Highchart is shown), all my JS snippets stop working.

On Firebug console, I get this error when there is no data to form a chart:

jb is null
function n(m,h){kc=ya(a.title,m);tc=ya...play:""});Aa.body.appendChild(Qb)}Tc=
highcharts.js (line 47)

On Chrome, a different error shows as

Uncaught TypeError: Cannot set property 'innerHTML' of null
d.d.extend._Deferred.f.resolveWith         jquery.min.js:16
d.d.extend.ready                           jquery.min.js:16
d.c.addEventListener.A

Again, these errors disappear as soon as I enter the first data point and a chart is formed.

Does anyone know what is happening and how I can get my JS to work when a Highchart is empty?

Any pointers are much appreciated. Thanks!

Answer 1

For me the problem was that I wasn't including jQuery before including HighCharts.

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Threw the errors:

Uncaught TypeError: Cannot read property 'addEvent' of undefined(anonymous function) @ highcharts.js:313(anonymous function) @ highcharts.js:315(anonymous function) @ highcharts.js:331

Uncaught TypeError: n.getOptions is not a function(anonymous function) @ highcharts-more.js:8(anonymous function) @ highcharts-more.js:55

Uncaught TypeError: Cannot read property 'fireEvent' of undefined(anonymous function) @ exporting.js:9(anonymous function) @ exporting.js:24

But if I included jQuery first it didn't.

Answer 2

I had this problem. I had to surround the highChart creation code with document.ready

$(document).ready({
   chart = new Highcharts.Chart({ //my cool chart 
   });
});