How to implement realtime chart?

Realtime-chart is supported in a limited way.
This doc describes on two basic approach to implement realtime-ish chart.

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]
                              <----- ├── (1) flows from right to left
  
  2nd round: [13:00:02, 13:00:03, 13:00:04]
                    <----- ├── (2)
  
  3rd round: [13:00:03, 13:00:04, 13:00:05]
                 ├── (3)
  ...
  

  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.

  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
    	// wrapped setTimeout here, because when you leave current visible tab,
    	// there's possibility of remain transition.
    	// In this case, when tab is visible the remained transition will be done first.
    	// So to not being some collision here, give some spare time to make transition be done.
    	setTimeout(() => {
    	    // start flow again here
    	    ...
    	}, 1500)
    } else {
    	// stop flow
    }
  });

  [13:00:05, 13:10:00, 13:10:01]
            ^
            This time gap, can't be interpreted at same scale.
            Hence, the scale interpreted at x Axis, will be shown as having huge intermediate gap.
  
  

  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.