Visualising results in Lumen

A successfully deployed analytic in Lumen will have integrated with relevant data sources and began to produce results. The next step is to visualise these results and make them available to users. This can be achieved in Lumen via it’s built in App creator. This sections details the various different visualisation options available. See this section on building apps.

Creating a data source

To start creating an app, the user must first create a data source. Data sources allow the user to define what output should be used in a visualisation. Currently Lumen can visualise text and numerical data. Complex types, such as JSON or arrays, while supported by the platform are currently not usable in apps.

From the top navigation menu, the user can select “Data Sources” to begin preparing their data. This will provide a list of the current data sources in the platform.

To create a new data source, select the plus from the top right-hand corner.

Start by providing a name and description for the new data source in the text boxes provided. This allows other users to understand if they can utilise the data in their own visualisations.

Select the “Databases” to open a drop-down menu which will list all the components in the platform producing data. Select the relevant analytic or data manger to be used in the visualisation.

Selecting a database will populate the available fields that can be used in visualisations. Drag the desired fields into the main panel to preview their data.

If the data source is intended to be used as a graph, the field closest to the left will become the x-axis. Fields can be re-ordered by clicking on the three dots to the right of the column names and dragging it to the correct position. Clicking on the three dots will allow users to delete a column, filter the data, or change the ordering.

Once the data source has been prepared click save to create it within the system.

This will take the user back to the list of available data sources. This view also allows users to edit or delete data sources. To do this click on a source to highlight it and select the pencil icon or trash can in the top right corner to edit or delete a source respectively.


Once a data source has been created it can be used to develop a widget. Widgets are graphical components that can be created and used to build apps within the system.

To create a widget, select “Widgets” from the top navigation bar. This will take you to a page displaying all currently available widgets. To add one select the plus from the top right-hand corner. This will give the option to create a Chart or a data grid.

Select chart to create a graphical visualisation of the data.

This will open up a page with a selection of options. Start by providing a name and description for the chart that is being created.


Click on the chart icon on the left-hand menu. This allows the user to select the data and preview the graph. Click on data sources to get a list of available data to power the graph. Multiple data sources can be added to a single graph.

Selecting the data source will create a chart preview on the right-hand side. The user can then provide a Title and Subtitle for the chart.

The zooming options can be set to allow the user to zoom in on specific key parts of the graph along the x-axis, y-axis or both.

Selecting “Enable Tooltip” allows the user to mouse over each point in the graph and reveal the underlying data, while selecting shared tooltip will display the data from all graphs at at the same point.

Selecting “Enable Exporting” adds a menu to the top right-hand corner of the graph, and allows user to then export the image while viewing the widget.

“Refresh Interval” allows the user to set, in seconds, how long to wait before updating the chart. This should be similar to how often new results are expected to be produced.

“Number of Points Shown” limits how much data is displayed on the graph. This is set to 100 as a default, only brining back and displaying the last 100 results. If set to 0 it will return all data associated with a source. This may cause a delay if there is significant data needing to be returned.


The user can click on Series to select different options relating to each individual plot.

Clicking on Name allows the user to rename the selected series. This will also update the legend.

The plot itself can be changed by selecting Type. From this drop down the user can select how to represent the data, from options such as Line, Spline, Column or more.

The final set of options on the page allow the look of the plot to be customised, changing the colour, the style of the line, and whether to create point markers for each piece of data.


Selecting Axes allow the customisation of the x and y axes.

“Inverted Axes” allows the user to swap the x and y axes on the chart.

The user can modify features of either axes. “Title” changes the axis name displayed on the graph. “Type” changes the representation of the axis, and format allows the axis units to be specified and updated. The location of the labels on the axis can also be moved using the alignment options.


Finally, the “Legend” option can be selected to configure how the legend is represented on the chart. Users can turn the legend on or off, alter its layout, or set is position to the to above, below, left or right of the graph.

Once the user has selected their relevant options, they can select “Save” to store the chart for later use.

From the widgets page the user can also create data grids. Data grids are structured ways of visualising tabular data. To create a data grid select the “+” icon from the top right-hand menu, and select “Data Grid”

Data Grid

From the widgets page the user can also create data grids. Data grids are structured ways of visualising tabular data. To create a data grid select the “+” icon from the top right-hand menu, and select “Data Grid”

Start by providing a name and description for the data grid object, so other users can understand if they can use it.

Next select the “Data” menu item. This will allow a user to populate the data grid with data from a predefined data source. A preview of the grid will appear on the right panel. Users can remove fields by pressing the cross next to their name under the “Selected Fields” section.

Selecting the field name at the top of the preview column will allow users to alter the displayed name.

Selecting “Settings” will open up options on configuring the data grid. This allows changes to be made on how other users will interact with the grid once it has been added to an app.

“Sorting”, “Filtering” and “Grouping” enables options for users viewing the grid as part of an app to apply filters to the data, sort it for themselves or drag the headers to top to group data.

“Refresh Interval” sets how often the data grid should check for new data in seconds. This should align roughly with how often the source provides new results.

“Number of Records Shown” sets a limit on how much data the grid brings back. It is set to 100 as a default. If set to 0 it will bring back all data.

Finally ticking “Reorderable” allows users viewing the grid via an app to move the columns around to suit their purposes, while “Resizable” lets them change column widths.

Once the user has configured their data grid, select “Save” to store it for use in an app.