Save and display static chart data in addition to collected data

Frontline charts allow display of previous charts data or external data in an Activity's chart so that one can compare the data to data an Activity gathers.

In order to do this, a Recipe Builder needs to update the cookbook to do the following.

  1. Allow admin to save static data via Fire Trigger.
  2. Render the saved static data in a chart

Allow admin to save static data via Fire Trigger

The Fire Trigger saves the static data in user data.Two userData variables are stored for each supplied static data series. They look as follows.

  1. static-data-chart-1-values-1-Salmon : This stores the data series points as a comma separated list e.g. 1,2,3,4,5
  2. static-data-chart-1-labels-1-Salmon : This stores the label associated with the data series.

In order to do this, setup to "Create or update a UserData entry"

  • To save static data values. This the configuration

Key : static-data-${{ it -> it.value ==["chart-title"]}.key}-values-${["data-series-slot"]}

Value : ${["data-series-values"]}

  • To save the label associated with this static data value

Key : static-data-${{ it -> it.value ==["chart-title"]}.key}-labels-${["data-series-slot"]}

Value : ${["data-series-label"]}

The variables needed here are supplied by the Fire Trigger. They are as follows.

  • chart-title. Allows the admin to specify which chart they want to add static data for. This is done by supplying the chart title. The chart title supplied here needs to match an existing chart that supports multiple data entries. Otherwise, the chart will exhibit unexpected behaviour.
  • data-series-slot. Allows the admin to specify the data slot where the static data should be saved. Each chart gets a maximum of 14 extra data slots. Selecting the same slot for multiple static data entries results in overriding/editing the same data . The slots should be filled from top to bottom. This ensures that the colors displayed on chart render match what the admin selected.
  • data-series-label. This is the label that will be associated with the static data series saved.
  • data-series-values: These are the values that will be plotted on the chart

Import this cookbook to see the Fire Trigger in action.


Render the saved static data in a chart

Once the data is stored, it needs to be rendered. This is done by editing the chart expression. The chart expression basically appends the static data alongside the activity collected data.

A chart that intends to read static data need to know the userData key of its chart title. From the code sample below the chart title is accessed using the userData["chart-1"] i.e chart-1 is the key. This is necessary since when saving the static data via FireTrigger the data was saved alongside a specific chart and that chart is referenced by this userData key, which is, chart-1. This value will vary based on the the userData key used as the title of the chart.

Copy paste this code sample and adjust where appropriate

def chartId = "chart-1"

def dataSeriesSlotOrder = [
/// Offer data slots based on the number of slots allowed ] // Pull static data def unOrderedStaticDataSeriesValues = { it -> it.key.contains("static-data-${chartId}-values") } def unOrderedStaticDataSeriesLabels = { it -> it.key.contains("static-data-${chartId}-labels") } def orderedStaticDataSeriesValues = [] def orderedStaticDataSeriesLabels = [] dataSeriesSlotOrder.each { slotName -> def dataSeries = unOrderedStaticDataSeriesValues.find { it -> it.key.contains(slotName) } def dataLabel = unOrderedStaticDataSeriesLabels.find { it -> it.key.contains(slotName) } if(dataSeries && dataLabel) { orderedStaticDataSeriesValues.add(dataSeries) orderedStaticDataSeriesLabels.add(dataLabel) } } // series labels ordered according to the data slots def staticSeriesLabels = orderedStaticDataSeriesLabels*.value // A list of lists of previous data series ordered according to the data slots" def staticSeriesDataLists = orderedStaticDataSeriesValues.collect { it -> it.value.split(",") } // TODO Pull data from userData. This is done by recipe builder.
// Below is hardcoded automatically collected data.
// Recipe Builder will have to write Flang that aggregates this data properly. def map = [ x: ["2013", "2014", "2015", "2016", "2017"], y: [ [7,2,5,3,4] ] + staticSeriesDataLists, series :[ title : "Sold Items", entries : ["Banana Sales"] + staticSeriesLabels] ] map

The chart returns a map at the end. The map should always be of the format below.

def map = [
x: ["2013", "2014", "2015", "2016", "2017"],
y: [ [7,2,5,3,4] ] + staticSeriesDataLists,
series :[ title : "Sold Items", entries : ["Banana Sales"] + staticSeriesLabels]

Always supply the word that groups all the labels e.g. Sold Items for Banana Sales, Guava Sales

Conclusion & Notes

  • To see this in action see this example cookbook
  • FireTrigger and Chart are linked via the chart title. The chart title should always be supplied via userData. This key is needed in the chart expression.
  • Do not skip slots, i.e. when adding the 3rd static data series, be sure to choose slot 3 and not 4.
  • Recipe Builder can add static data manually via the userData section of by editing the cookbook JSON. But the format of the key used in UserData needs to match : static-data-chart-1-values-1-Salmon and the data label : static-data-chart-1-labels-1-Salmon. Note : chart-1 is the chart userData key and 1-Salmon is the data slot reference.
Have more questions? Submit a request


Please sign in to leave a comment.