Configuring advanced chart gadget (beta)
- Piotr Bojko
For using advanced chart gadget choose it from a list.
.png?version=1&modificationDate=1571053262406&cacheVersion=1&api=v2&width=577&height=250)
And then fill the configuration for the new gadget on your dashboard.
.png?version=1&modificationDate=1571053584527&cacheVersion=1&api=v2&width=351&height=250)
- View - choose a view from which data for a chart will be pulled.
- Configuration - JSON like configuration for data series, paddings, collor, chart type and more.
- Refresh interval - choose how often your gadget should be refreshed with new data.
See example configuration:
.png?version=1&modificationDate=1571657242595&cacheVersion=1&api=v2&width=332&height=250)
And it will produce following chart:
.png?version=1&modificationDate=1571652498989&cacheVersion=1&api=v2&width=360&height=250 "Chart produced by example configuration")
Configuration
Smart QL app uses Taucharts library for gadgets. In advanced gadget you can use almost any configuration item straight from Tauchart docs, except:
- Inline JS functions and Javascript at all - this is due to security concerns.
- Plugins - Smart Ql enforces slightly different semantics.
Our docs describe similar topics but emphasize use only in our app.
Configuration in a gadget has a form of a JSON formatted text and it can be fairly complex.
{
"type": "scatterplot",
"x": "PROJECT",
"y": "ISSUES",
"plugins": [
{
"name": "tooltip"
},
{
"name": "legend"
},
{
"name": "export-to"
}
],
"guide": {
"x": {
"label": {
"text": "custom label"
}
}
}
}
Obligatory configuration
There are only 3 obligatory elements to fill in a configuration: x, y, and type.
| Element | Notes |
|---|---|
| x | One of the dimensions of a chart. You can fill it only with a name of a column from your view. Example: "x": "PROJECT" |
| y | One of the dimensions of a chart. |
| type | Type of a chart, possible values: scatterplot, line, bar, horizontalBar, stacked-bar, horizontal-stacked-bar, stacked-area. |
Additional dimensions
Though charts are rather 2D artifacts - more dimensions can be coded into a chart by using a size of a stroke and a color.
| Element | Notes |
|---|---|
| size | One of the dimensions of a chart. The size encodes visually:
You can use only a column dimensions of type measure in size - see more info on dimensions. |
| color | One of the dimensions of a chart. |