Page Comparison

...

However, in order to create reports with this reporting framework, it is important that you're familiar with the concept of Data PipelinePipelines and Commands. If not, please follow the link to read more about it and then come back to this guide.

...

Each app can have multiple reports, each report is visualized by one chart. In order to create such a report chart, you have to create a new property of mime type application/json inside this path:

global/app/io.pipeforce.myapp/report/myreport

Replace io.pipeforce.myapp by the name of the app you would like to place the report within and myreport by the name of your report.

...

{
  "title": "Pie chart example",
  "description": "My first PIPEFORCE report",
  "type": "pie",
  "data":  {
    "labels": ["Red", "Orange", "Yellow", "Green", "Blue"],
    "datasets": [
      {
        "data": [20, 40, 20, 10, 10],
        "backgroundColor": ["#4dc9f6", "#f67019", "#f53794", "#537bc4", "#acc236"]
      }
    ]
  },
  "options": {
    "responsive": true,
    "plugins": {
      "legend": {
        "position": "top"
      },
      "title": {
        "display": true,
        "text": "Pie Chart"
      }
    }
  }
}

Create a new property report using the property editor, for example under global/app/myapp/report/piechart:

...

Copy the configuration from above as content to this property and save it. Then go to All Apps -> myapp -> Pie chart example. the wizard in the apps section which will contain a JSON like the example above.

Go to the app and open the report.

You should then see a static chart example which looks similar to this:

...

pipeline:
  - set.body:
      value: [2050, 40, 20, 10, 1050]

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.

...

  "data":  {
    "labels": ["Red", "Orange", "Yellow", "Green", "Blue"],
    "datasets": [
      {
        "data": "$uri:pipeline:pipeline.start?key=global/app/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 string, pointing to your pipeline: $uri:pipeline:pipeline.start?key=global/app/myapp/pipeline/piechartdata.

...