Highchart not rendering data from dynamically created array array

Question

I am using Firebase Realtime Database to get data to render in Highchart. I have declared an empty array.

    arrY = [];

And then inside a function, I push the value for x-axis along with a timestamp to the array.

   arrY.push([time, parseFloat(tempC)]);

Then when initiating the Highchart when I assign the array to the series, the chart is not rendered (no error message in the console)

           series: [{
                name: 'Temperature',
                data: arrY
            }]

However, If I hardcode an array with it's value and timestamp and assign it to the highchart it gets rendered

    a = [[1591815122, 28],[1591815141, 28],[1591815161, 28],[1591815180, 28],[1591815200, 28]];

and

           series: [{
                name: 'Temperature',
                data: arrY
            }]

when I log both the array in the console both are displayed as arrays but why is one working and the other one not working? Console Output in the picture below

Sebastian Wędzel · Accepted Answer · 2020-06-17 08:34:04Z

1

The problem which you are struggling to is related to JavaScript Asynchronous. Notice that when you console.log the arrY it is an empty array. You need to delay the chart rendering until the data will be downloaded from the server.

Currently, something like this happens:

The array is defined,
The chart is rendering with an empty array,
Data is downloaded and pushed to the array,

answered Jun 17, 2020 at 8:34

Sebastian Wędzel

11.7k1 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Highchart not rendering data from dynamically created array array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related