Billboard.js: Perfomance with realtime data? Websocket integration?

[serzhiio]

Hi all! Very interesting project.
Does anyone has expirience with BB on realtime data?
What is the best way to integrate it with websockets data?

[netil]

Showing realtime data can be done by using below APIs.

• .flow()
  
  
  
  • https://naver.github.io/billboard.js/demo/#API.Flow
  
  
• or .load()
  
  
  
  • http://jindo.com/git/billboard.js/doc/Chart.html#load
  
  

[serzhiio]

thx, i've tried this functions
billboard.js library looks very slow to keep 15 000-30 0000 points every second

[netil]

Basically, if you need to handle a massive data in a single chart element, maybe the option is using chart based on canvas.

billboard.js is based on svg, which means every elements are svg nodes. There're pros & cons depending the which technology you use - bitmap(canvas) vs. vector(svg).

[netil]

I'm commenting as an informative purpose.

Checkout wiki page for more recent updates:
https://github.com/naver/billboard.js/wiki/How-to-implement-realtime-chart%3F

via .load() API

The basic approach on this example, is adding new data each seconds.

• demo: https://jsbin.com/cemuroq/3/edit?html,js,output

via .flow() API

.flow() is called reapeatedly after flow call is done.

• demo: https://jsbin.com/xoyiqic/18/edit?html,js,output

The Caveat

• Handling for page visiblity

  During the realtime-ish chart is rendered, it need to add some bulletproof code to not be rendered when the page isn't visible(ex. if you navigate different tab, or the window is in the background mode, etc).
  When page isn't visible, the rendering of new data is completely useless.

• Understanding on scales(x Axis type)

  You need to understand on scales. If the x Axis type is indexed or timeseries, the data will flows according its times(or increasing when is indexed).

  So, when the chart is in suspended mode for awhile, and returning doesn't mean continuing from the last point you left.

  // if initializes with 3 data, the flows from right to left adding new data for each round.
  1st round: [13:00:01, 13:00:02, 13:00:03]
  2nd round: [13:00:02, 13:00:03, 13:00:04]
  3rd round: [13:00:03, 13:00:04, 13:00:05]
  ...
  

  But, if you do some suspension at 13:00:05 and return back 13:10:00, there's time gap.
  
  This is the moment where, understanding of scales is needed.

  .flow() is suspended during tab isn't visible.

  [13:00:05, 13:10:00, 13:10:01]
          ^
          This time gap, can't be interpreted at same scale
  
  

  Ex.
  Tab change for awhile, and return to the chart.

  

  You can notice when returning, there's a weird flows. But this is the normal behaves based on time scale.