JavaScript Multi Channel Layout Dashboard

line xy dashboard

Example of commonly required layout with several channels, shared time axis and HTML interoperation.

The use case is:

  • Multiple channels each on own Y axis (different units, measurements, value ranges)
  • Shared time view (X axis)
  • Requirement to have user interface controls for every channel, in this example there are:
    • Move up button
    • Move down button
    • Delete channel button
  • Channels can be dynamically added or removed
  • Many charts which can be scrolled up/down in view. Shared time view stays always visible (Sticky X axis)

The example shows how it is possible to creatively interoperate with normal HTML rendered content along side the charts even with this kind of complicated layout.
In this example, the HTML content is created with JavaScript APIs, but in real applications likely a framework such as React, Angular or Vue would be used to render this content.
Even so, the same logic can be applied.

The base idea is that HTML content is positioned based on ChartXY layout which is reported using layoutchange event.
Afterwards, the ChartXY layout is adjusted to make space for the HTML content depending on its height.

Sounds complicated, but really its just these few lines of code:

const handleLayoutChange = (event) => {
    const position = event.axes.get(axisY)
    if (!position) return
    headerDiv.style.bottom = `${position.top}px`
    // 2) Allocate space between Y axes of the chart, based on the size of the HTML UI.
    axisY.setMargins(0, headerDiv.getBoundingClientRect().height)
    event.userChangedLayout()
}

This is made possible by the convenience of layoutchange event, which supplies very detailed information about the positioning of axes and other elements of the chart and is fired automatically whenever this layout changes.