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

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.