Question

47

JavaScript error when using Highcharts

rated 0 times [ 48] [ 1] / answers: 1 / hits: 19604 / 13 Years ago, wed, march 30, 2011, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

travion

Add To Favorites

Follow

Total Points: 137

Total Questions: 96

Total Answers: 103

Location: India

Member since Wed, Aug 4, 2021

3 Years ago

travion questions

1 Tagify set data in tagify input on click

Mon, Dec 16, 19, 00:00, 5 Years ago

1 Laravel - How to Import Vue Component to Another Component

Sat, Oct 19, 19, 00:00, 5 Years ago

1 Date conversion in react js

Fri, Sep 20, 19, 00:00, 5 Years ago

1 How can I style react semantic components?

Wed, Nov 14, 18, 00:00, 6 Years ago

1 Problem with onChange for Masked Input in React

Sun, Oct 28, 18, 00:00, 6 Years ago

View All

answered 13 Years ago aden · Accepted Answer

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.