JavaScript Office Layout Data Visualization Chart

Example showcasing LightningChart JS capabilities with external pictures.

This example takes place in the context of data visualization in office premises.
For this purpose, the series area is styled by a digital picture of the office layout.

In code, this is implemented by loading the Image (in this case PNG file), and creating a new ImageFill object using that image.
While it might not be obvious from looking at it, the chart type used in this example is a ChartXY.
The picture is shown by configuring the fill style of the series background.

const image = new Image()
image.src = 'office-layout.png'

const imageFill = new ImageFill({ source: image })


Once, the ChartXY is laid over the office layout, any of the numerous data visualization features of the chart type can be used to add detail to the chart.

In this case, we used a Heatmap Series to display the distribution of WiFi strength across the entire office, where the data values are distributed to 4 categories (No measurement, Weak, Medium and Good).

Adding Icons to LightningCharts

Additionally, this example showcases how icons can be used inside charts.
The example uses this by displaying the WiFi router location as a picture of a router device (bottom of chart).

This is achieved similarly to the office layout picture by utilizing ImageFill.
However, this time instead of styling the series background, an UIElement is created and the image is attached to its background.

const uiIcon = chart
    .setBackground((background) => background.setFillStyle(imageFill))
    // Icon size is controlled using padding.
    .setPadding({ left: widthPx, top: heightPx })

Office layout picture by Edraw