#Highcharts performance - slow rendering

16 messages · Page 1 of 1 (latest)

prisma glade
#

I have a highcharts dashboard that renders very slow. The API serves up the data fast, and I have done some performance profiling and it something to do with rendering.

DATA:

I have radios in different locations logging signals ( beeps ) to a database from a radio. The beeps occur nearly once per second at one of 3 discrete rates 48, 80 or 30 bpm (beeps per minute).

The transmitters are on wildlife that come and go in and out of range on one of 100 possible channels, and for each location I only log signals for 2 hours per day. I then write to a summary table the dominant beep rate for that location and channel for that hour. Logging at 2 hours per day this means I have 2 data points per day per location per channel, or expressed another way for a given channel for a given location there is about 760 data points.

All of this means that the data is not clean and continuous, there can be periods where I may get an hour of data uninterrupted, other times nothing .

DASHBOARD:

I have built a angular dashboard with high charts. Pickers allow the user to pick a single location and date range up to 1 year to display the received signals. Then a page of thumbnail tiles show graphs for each detected channel for that location. In the very unlikely event all 100 channels had valid signals this would be in worst case :

100 tiles x 760 data points per tile (also unlikely a channel would have a data point for every day)

In my testing where I request the maximum selectable range (1 year) I find that the graphs themselves are displayed fastish, but the rendering of the data can take 5-25 seconds depending on the speed of the computer.

WHAT HAVE I TRIED:

  1. I did try to only plot daily data points, but that made little to no difference.
  2. In setting up highcharts, the graphs didnt look very good because of the intermittent nature, so I created a method in Angular to fill hours with no data with 0's although thats only costing me 20ms per channel.
    code:
    https://bpa.st/3SMA
image.png
lost sonnet
#

Can try lazy render (same treatment of img).IntersectionObserver or @defer(on viewport) on each tile

#

try web worker

prisma glade
#

@novative lazy render? is that a highcharts function/

lost sonnet
#

Highchart has web worker to offload computation and also prevent your UI to be stuck.
Lazy render is an angular / dom API, given your screenshot, only has space for 10 tile, there is no need to load the ther 90 title first.

#

Until the user scroll down. However can't prevent a user to scroll to bottom use defer. Hence using the IntersectionObserver directly has more control

prisma glade
#

Right - is there a example somewhere of this? More information?

prisma glade
#

I did try this - two versions of channel-tile.ts - one with fill blanks function, one without:

#

The problem with the fast method is the way that data just kind of appears and disapears - its not how I want to present it:

image.png
lost sonnet
#

...to fill hours with no data with 0's although thats only costing me 20ms per channel.

two versions of channel-tile.ts - one with fill blanks function, one without:

100 * 20 is 2000ms, it is the 100 that is the issue, so enabling "filling blanks" should be fine.
Now you got a working stackblitz (fork href in #questions ). You can try how to IntersectionObserver or@defer etc and get assistance when you stuck

prisma glade
lost sonnet
# prisma glade Firstly, thanks for fixing my stackblitz - what had I done wrong? Secondly, web...

Firstly, thanks for fixing my stackblitz - what had I done wrong?
When your actual app you using prepared DateString from some "dropdown". But in stackblitz. you using new Date() which includes minutes and seconds, existingMap checking can never match (01:00:00 !== 01:23:45)

Secondly, webworker offloads computation - great but where does it offload it to?
Another process, if device multicore, otherwise, even if single core, interaction will not be stuck as computation is made async.
Chart has a lot of Maths computation for svg.
However after trying the stackblitz with stub data, it doesn't feel slow. So, it could be network related.

prisma glade
#

So in stackblitz when it says "connecting to dev server" this is not the same as the time it takes to load page locally?
I dont think it is network related as the server is on my local lan, and if I call the API directly in browser its super fast

lost sonnet