Adding basic time series charts
You can add custom charts to the UI. Below is an example of adding a chart that displays historical and real-time CO2 sensor data.
Create a yaml file with the following fields, and place it in
/home/pioreactor/.pioreactor/plugins/ui/charts. (Plugins can put the yaml file under
ui/contrib/charts in there project folder - it will be added upon installation.)
chart_key: a unique identifier for the chart being added, string.
data_source: the SQL table to read historical data from. The data source must have a
experimentcolumn, along with a numeric column to plot (see below), string.
data_source_column: the column in
data_sourceto read and display, string.
title: title on the chart, string
y_axis_label: the y-axis label, string
fixed_decimals: How many decimals to display, integer.
mqtt_topic: a truncated MQTT topic to read live data from - stripped of the
co2_readings/ppmif the entire MQTT topic is
payload_key: (Optional) If the MQTT topic is json blobs, use the
payload_keyto retrieve the data from the blob, string.
interpolation: (Optional) the interpolation to use between points, default is
y_axis_domain: (Optional) specify a starting y-axis domain. Must be an array, like
y_transformation: (Optional) an inline JS function to transform the y data. Default is the identity function, string.
See examples of yaml files here.
In your config.ini, add your chart key under
[ui.overview.charts] and assign it 1. Example:
# show/hide charts on the PioreactorUI dashboard
# 1 is show, 0 is hide
- If the UI stops displaying data, you may have introduced a yaml file that is not being read correctly. Check out the Pioreactor UI logs by sshing into the leader, and running:The last few lines should tell you about if a field is missing, a wrong type, etc.
- There is a 30sec cache, so it may take up to 30sec to see new changes in the UI.