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!

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!

• javascript
• jquery
• highcharts

• 1 What does your db return if there is no data? Maybe a simple check of if(WeHaveData){drawChart(WeHaveData);} – Mark Coleman Commented Mar 30, 2011 at 0:44
• @mark, the db is empty and doesn't return anything that I can see (but I have the JS problem) -- if I manually add some data to the db, then everything runs fine -- do you think this could be some kind of conflict? – pepe Commented Mar 30, 2011 at 0:48
• hard to say without having some html or code, if for some reason if the data source is returning null or something else maybe highchart is not behaving correctly. If you could give a sample of how the js looks with data present with and without might be able to help more. If a jsfiddle.net could be made even better – Mark Coleman Commented Mar 30, 2011 at 0:52
• @mark thanks - i've tried some fiddles but they work... no errors - it's very difficult to reproduce this behavior so I will tear down all JS and rebuild to find out where it breaks down – pepe Commented Mar 30, 2011 at 1:35
• 1 My web template was initializing 2 instances of the same jQuery plugin (fancybox) which I was using to open a modal triggered by a button. Once I fixed that the highcharts error was gone. – pepe Commented Mar 30, 2011 at 13:07

3 Answers 3

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.

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

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

OK, this error popped up again and that's because my comment above did not really solve it.

Here's the culprit: if you have a model that generates data for charts happen to return an empty array (say it's a new user and she hasn't added any data yet to the database), this empty array is passed to the controller -- which will then pass the empty array to the view with Highcharts.

When passing an empty array to my view containing Highcharts, Highcharts would run but would not find an element to inject the chart, because I also had a condition in the view that removed #container if there was no data.

Without where to put the chart, Highcharts returns an innerHTML error, that may or may not break your remaining javascript (my case).

The solution here had nothing to do with JS, but actually with putting a condition in my controller which would be in pseudo code:

if model that generates chart data returns empty array
    don't generate view containing Highcharts
else
    generate view containing Highcharts

Doing this not only I prevented the error for good but also reduced the overhead of running Highcharts when no data is present.