Page Comparison

...

As you can see, this pipeline simply returns the data part of the chart configuration also as static array. But since you're already familiar with the concept of commands and pipelines you can probably imagine the power of this: You can now call any appropriate command in order to load data from somewhere, for example from a SQL database, from a REST endpoint or any other data source, convert it into the data structure required by your chart and return it finally in the body.

Let's create a new pipeline using the wizard and save this pipeline under the app path where you have stored the reporting configuration before, for example: global/app/io.pipeforce.myapp/pipeline/piechartdata:.

...

The last step is to link your chart configuration with your pipeline. To do so, replace your origin data section of your chart configuration:

...

  "data":  {
    "labels": ["Red", "Orange", "Yellow", "Green", "Blue"],
    "datasets": [
      {
        "data": "$uri:pipeline:global/app/io.pipeforce.myapp/pipeline/piechartdata",
        "backgroundColor": ["#4dc9f6", "#f67019", "#f53794", "#537bc4", "#acc236"]
      }
    ]
  },

As you can see, the static array [20, 40, 20, 10, 10] was replaced by a an URI string, pointing to your pipeline: $uri:pipeline:global/app/io.pipeforce.myapp/pipeline/piechartdata.

The next time you reload your chart, it will load the data now from the pipeline. And since it is loaded from a pipeline, the data can be collected, transformed, enriched or prepared in any way the pipeline framework supports before they will be send to the chart.

This approach can also be used for the labels element to provide dynamic labels.

...

In order to create a new report and show it as a new entry in your apps tiles listing, you have to add the report config as a new property to this path in the property store:

global/app/tld.domain.myapp<appname>/report/<reportname>

Whereas <reportname> is a lower-case and unique name for the report in a format supported by the property path.

...