Charts¶
Insight supports basic charts. They are easy to configure and give you a visual representation of your data.
Opening an Insight chart
There are several ways to display charts. You can use the menu action "chart":
{
"action": "chart",
"label": "Chart",
"icon": "icon-barcode",
"actionValues": [
{
"chart": {
"tree": "my-tree"
}
}
]
}
"tree" defines which Insight tree should be visualized as an Insight chart. In this case all roots of the target tree are loaded and rendered as a chart.
You can also configure charts to show up within the regular Insight details view. The behaviour is similar to Insight Tables. This means that if you have a node "a" which has a childNode "b" with appropriate chart config attached, if you open the detail view of "a" open, it will show all elements of "b" as a chart inside the Insight details view.
Configuration of a chart
To help Insight understand which nodes of a tree configuration should be visualized as a chart, mark them.
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"group": "${amountType}"
}
}
If you don't use the group setting, all nodes will be interpreted as one dataset. If you want to have different datasets, divide them by using the group attribute. Please note that each bar can have a different color, if you want to, as every node can have it's own color setting.
Bar-Charts
A bar-Chart is the most basic chart type that visualizes data as bars. Is is the default type of chart. You can use a bar-chart in a 1:1 usecase where every single record for the chart carries one data point as well as in 1:n usecases where every single record for the chart carries several data points.
For the 1:1 usecase use the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}"
}
}
For the 1:n usecase use the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"values": [
{
"label": "labelA",
"value": "${valueA}",
"color": "#FF0000"
},
{
"label": "labelB",
"value": "${valueB}",
"color": "#00FF00"
}
]
}
}
Please note that the chart.label for the 1:n usecase should be unique as it is the one being rendered on the x-axis. Additionally, the labels for each value in the 1:n usecase need to be fix, as they will be rendered in the legend. Please note that bar-charts for 1:1 usecases support the "group" feature, while bar-charts for 1:n usecases do not.
Line-Charts
A line-Chart is another basic chart type that visualizes data as lines. Is is not the default type of chart. Similar to bar-charts you can use it in 1:1 usecases as well as 1:n usecases.
For the 1:1 usecase use the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"type": "line"
}
}
For the 1:n usecase use the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",,
"type": "line"
"values": [
{
"label": "labelA",
"value": "${valueA}",
"color": "#FF0000"
},
{
"label": "labelB",
"value": "${valueB}",
"color": "#00FF00"
}
]
}
}
Please note that the chart.label for the 1:n usecase should be unique as it is the one being rendered on the x-axis. Additionally, the labels for each value in the 1:n usecase need to be fix, as they will be rendered in the legend. Please note that line-charts for 1:1 usecases support the "group" feature, while line-charts for 1:n usecases do not.
Radar-Charts
A radar-Chart is another basic chart type. Is is not the default type of chart. Similar to bar-charts you can use it in 1:1 usecases as well as 1:n usecases.
For the 1:1 usecase use the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"type": "radar"
}
}
For the 1:n usecase use the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",,
"type": "radar"
"values": [
{
"label": "labelA",
"value": "${valueA}",
"color": "#FF0000"
},
{
"label": "labelB",
"value": "${valueB}",
"color": "#00FF00"
}
]
}
}
Please note that the chart.label for the 1:n usecase should be unique as it is the one being rendered on the outline. Additionally, the labels for each value in the 1:n usecase need to be fix, as they will be rendered in the legend. Please note that radar-charts for 1:1 usecases support the "group" feature, while radar-charts for 1:n usecases do not.
Pie-Charts
TODO
Bar-stacked-values-Charts
TODO
Bar-stacked-groups-Charts
TODO
Layout
Currently supported types of Insight charts:
- "bar": A regular barchart.
- "line": A regular linechart.
- "pie": A regular piechart.
- "bar-stacked-groups": A bar-chart, vertically stacking different groups at the same label on top of each other.
- "bar-stacked-values": A bar-chart, vertically stacking different values of the same record at the same label on top of each other.
Please note that the type "bar-stacked-values" requires the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"values": [
{ "value": "${s1}", "color": "#ff0000", "label": "s1" },
{ "value": "${s2}", "color": "#00ff00", "label": "s2" },
{ "value": "${s3}", "color": "#0000ff", "label": "s3" },
{ "value": "${s4}", "color": "#f0f0f0", "label": "s4" },
{ "value": "${s5}", "color": "#0f0f0f", "label": "s5" },
{ "value": "${s6}", "color": "#a0a0a0", "label": "s6" },
{ "value": "${s7}", "color": "#b0b0b0", "label": "s7" },
{ "value": "${s8}", "color": "#c0c0c0", "label": "s8" },
{ "value": "${s9}", "color": "#d0d0d0", "label": "s9" },
{ "value": "${s10}", "color": "#e0e0e0", "label": "s10" },
{ "value": "${s11}", "color": "#333333", "label": "s11" },
{ "value": "${s12}", "color": "#444444", "label": "s12" },
{ "value": "${s13}", "color": "#555555", "label": "s13" },
{ "value": "${s14}", "color": "#666666", "label": "s14" },
{ "value": "${s15}", "color": "#777777", "label": "s15" },
{ "value": "${s16}", "color": "#888888", "label": "s16" },
{ "value": "${s17}", "color": "#999999", "label": "s17" },
{ "value": "${s18}", "color": "#330033", "label": "s18" },
{ "value": "${s19}", "color": "#003300", "label": "s19" },
{ "value": "${s20}", "color": "#000033", "label": "s20" },
{ "value": "${s21}", "color": "#330000", "label": "s1" },
{ "value": "${s22}", "color": "#990000", "label": "s22" },
{ "value": "${s23}", "color": "#009900", "label": "s23" },
{ "value": "${s24}", "color": "#000099", "label": "s24" },
{ "value": "${s25}", "color": "#990099", "label": "s25" },
{ "value": "${s26}", "color": "#660000", "label": "s26" },
{ "value": "${s27}", "color": "#006600", "label": "s27" }
],
"group": "${amountType}",
"type": "bar-stacked-values"
}
}
The chart "bar-stacked-values" supports the "group" feature while "bar-stacked-groups" does not.
Legend
By default, a legend will be rendered. You can disable the legend or change it's width, borderColor and backgroundColor with the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"group": "${amountType}",
"type": "line",
"legend": {
"hidden": true,
"width": 200,
"borderColor": "red",
"backgroundColor": "white"
}
}
}
You can also define the position of the legend. Allowed values are "top", "bottom" and "hover". Default: "hover". "top" and "bottom" legends are fixed in position and are neither movable nor collapseable. For fixed legends, you can change their height as well.
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"group": "${amountType}",
"type": "line",
"legend": {
"position": "top",
"height": 200
}
}
}
Scale
By default, Insight Charts will create a scale from the chart's minimum value up to the chart's maximum value and split the chart into ten vertical segments. You can alter the scale and set a fix value for each vertical segment of the chart. By doing so, the chart will not have the default ten vertical segments but instead use as many segments as needed in order to reach the maximum value from the minimum value with the configured steps.
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"scale": {
"value": 5
}
}
}
If you want to set a different start of the scale, instead of the actual data based one, use the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"scale": {
"value": 5,
"start": -10
}
}
}
If you want to set a different end of the scale, instead of the actual data based one, use the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"scale": {
"value": 5,
"end": 100
}
}
}
If you want to set a different width of the scale, use the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"scale": {
"width": 100
}
}
}
If you want to set the number of decimal places used for rounding scale values, use the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"scale": {
"decimalPlaces": 0
}
}
}
Highlights
You can configure custom highlight lines in Insight Charts to visualize and emphasize important thresholds. Use the following notation:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"highlights": [
{
"value": 8,
"color": "#ff0000",
"label": "Threshold #1"
}
]
}
}
}
You can also set different line styles for the highlight lines. Possible options: "line", "dashed", "dotted". Default: "line".
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"highlights": [
{
"value": 8,
"color": "#ff0000",
"label": "Threshold #1",
"lineStyle": "dotted"
}
]
}
}
}
Highlights are supported in all chart types except pie-charts.
Filters
TODO
Rendering options
You can adapt the way Insight renders charts by changing basic layout settings.
- textSize: Changes the text size of labels
- pointSize: Changes the size of bars / lines
- padding: Changes the space between bars / lines
- xAxis: The height of the xAxis label section
- rowHeight: Changes the height of a row
- radius: Changes the size of pie charts
- markerRadius: Changes the size of markers
- gridColor: Changes the color of the background grid lines
- sticky: Defines if the y-Axis scale should be sticky or not, default true
Example:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"textSize": 14,
"pointSize": 2,
"padding": 1,
"xAxis": 100,
"rowHeight": 10,
"radius": 200,
"gridColor": "#ff0000",
"sticky": false
}
}
Miscellaneous
You can disable the "Download PNG" Button, if you don't want your users to use it. Default: true. Example:
```js { "name": "my-example-node", "title": "Examples", "label": "${myLabelAttribute}", "icon": "icon-site-map", "color": "${myColorAttribute}", "chart": { "label": "${myLabelAttribute}", "value": "${amount}", "downloadPng": false } }