Charts

This service is named charts and allows generating and visualizing charts.

To see the Charts menu entry on the Portal, you need to have the permission charts=view.

For a summary of permission names and uses related to this service, please refer to this section.

Note

If you have the permission charts=*, you can have access to all the functions mentioned below.

View the charts

To read all the charts, you need to have the permission charts=read. Otherwise, you cannot read the data.

If your permission has values like this: charts=read('Chart 1', 'Chart 2'), you will only see the charts Chart 1 and Chart 2.

You can view a chart by double-clicking on the line associated with the chart.

Edit the charts

To edit the charts, you need to have the permission charts=edit.

You can update the chart’s name and description.

Warning

The chart’s name and the English description are mandatory and cannot be empty.

Script

You can provide the script name to generate the chart’s data and update the default configuration.

See update section for more detail.

On demand

When on demand is checked, the associated script will be called everytime a user asks to display the chart. Else, if unchecked, the updated configuration generated by the script will be cached to increase performance.

Config

Charts are based on Echarts where you can find a lot of examples.

To define a Chart you need to provide the configuration.

{
  "title": [{
    "text": "Chart"
  }],
  "xAxis": {
    "type": "category",
    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "data": [],
      "type": "bar"
    }
  ]
}

Note

In the previous example the data series are empty because they are supposed to be updated using an associated script.

Note

For demo you can directly set the data inside your configuration

Table config

Displaying chart data as a table is not possible with the Echarts library. However, platform6 provide the table display feature using the following syntax

{
  "type": "table",
  "columns": {
    "names": [],
    "types": []
  },
  "data": []
}

In association with the chart DSL you can inject the data in your script as follows:

def result = p6.sproc.executeWithColumns("getTableData")
def config = p6.chart.getConfigFromPipeline()

config.columns.names = result.v1 // or result.first
config.columns.types = result.v3 // or result.third
config.data = p6.chart.convertRecordsToTable(result)

p6.pipeline.put("platform6.response.value", p6.utils.jsonToString(config))

Internalization

A dynamic translation mechanism is available using Freemarker template engine. Inside the configuration, you can use the ${key} syntax to inject translation value.

{
  "title": [{
    "text": "${title}"
  }],
  ...
}

Note

Tip: you can use the injection mechanism inside your data

The next step is to add those translated strings inside the Internalization tab. Click on the add button, select the language and write your translation (JSON format)

{
  "title": "Invoice Amount"
}

The language used to translate is the one of the user. If there is no translation for that language, the fallback language is `EN’.

Warning

Translations have to contain the sames keys in all the languages. This requirement is due to the fact that there is no fallback to EN on specific keys, only at language level.

Update charts via script

Consult Chart DSL for more information.

From the chart generation

When a user asks to display a chart the following decision tree is used.

If the associated script is called, then the following pipeline parameters are available

Name	Description
config	The chart config
locale	The current user locale

The script has to write inside the pipeline the new chart configuration using platform6.response.value

Note

If the script is not returning the expected value, then the default configuration will be used

def config = p6.chart.getConfigFromPipeline()

config.title[0].text = p6.i18n.getText([EN: "Chart", FR: "Graphique"])
config.series[0].data = [0, 1, 2, 3, 4]

p6.pipeline.put("platform6.response.value", p6.utils.jsonToString(config))

Inside the script you can call a stored procedure or a web service to retrieve data and update the configuration.

Out of the box

If needed, you can update your calculated chart configuration out of the box.

def config = p6.chart.getConfig('chart')
config.series[0].data = [0, 1, 2, 3, 4]
p6.chart.updateConfig("chart", config)

It can be useful if you need to generate multiple charts from the same dataset.

Warning

If you choose this option, it is recommended that you schedule the generation of the chart. No action will be available from the detail view to recalculate the data.