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 an appropriate chart config attached, if you open the details 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. Example:
{
"name": "my-example-node",
"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.
Layout¶
Insight supports various types of charts:
bar: A bar-chartline: A line-chartpie: A pie-chartdoughnut: A doughnut-chartradar: A radar-chartbubble: A bubble-chartbar-stacked-groups: A bar-chart, vertically stacking different groups at the same label on top of each otherbar-stacked-values: A bar-chart, vertically stacking different values of the same record at the same label on top of each othersankey: A sankey-chart
The type bar-stacked-values requires the following notation:
{
"name": "my-example-node",
"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" }
],
"type": "bar-stacked-values"
}
}
The chart bar-stacked-values supports the group feature while bar-stacked-groups does not.
bar¶
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",
"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",
"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¶
A line-Chart is another basic chart type that visualizes data as lines. 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",
"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",
"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¶
A radar-Chart is another basic chart type. 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",
"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",
"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¶
TODO
doughnut¶
TODO
bar-stacked-values¶
TODO
bar-stacked-groups¶
TODO
sankey¶
TODO
bubble¶
A bubble-Chart is a basic chart type that can visualize three different dimensions of data: The x-axis, y-axis and magnitude. 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",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"magnitude": "${myMagnitudeAttr}",
"type": "bubble"
}
}
For the 1:n usecase use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"type": "bubble",
"values": [
{
"label": "labelA",
"value": "${valueA}",
"magnitude": "${magnitudeA}",
"color": "#FF0000"
},
{
"label": "labelB",
"value": "${valueB}",
"magnitude": "${magnitudeB}",
"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 bubble-charts for 1:1 usecases support the group feature, while line-charts for 1:n usecases do not.
Legend¶
By default, a legend will be rendered. There are three types of legends supported: hover, top and bottom. The default legend is hover. Additionally, the legend is used to display basic stats (Min / Max values). To change the legend type, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"legend": {
"position": "top"
}
}
}
To disable the legend completely, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"legend": {
"hidden": true
}
}
}
To change the borderColor of the hovering legend, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"legend": {
"borderColor": "red"
}
}
}
To change the backgroundColor of the hovering legend, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"legend": {
"backgroundColor": "white"
}
}
}
To change the width of the hovering legend, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"legend": {
"width": 200
}
}
}
To change the height of the top and bottom legends, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"legend": {
"height": 100
}
}
}
Scale¶
Insight Charts support different types of scale. Currently supported are linear, logarithmic, time and sequential. Each scale type has different characteristics. Linear and logarithmic scales are used for the y-axis and define the scaling of the charts content. The time scale positions the chart's content based on the datapoints time attributes, the sequential scale positions the chart's content based on the order they are loaded in on the x-axis. If you want to set a different scale type, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"scale": {
"x": {
"type": "time"
},
"y": {
"type": "linear"
}
}
}
}
By default, Insight Charts will create a y-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's behaviour in many ways: If you want to set a different step size, instead of the default step based on ten rows from the chart's minimum value to the chart's maxmium value, use the following notation:
{
"name": "my-example-node",
"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",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"scale": {
"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",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"scale": {
"end": 100
}
}
}
If you want to set a different size of the scale, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"scale": {
"size": 100
}
}
}
If you want to set the number of decimal places used for rounding scale values, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"scale": {
"decimalPlaces": 0
}
}
}
If you want to set the number of vertical segments used to display between the chart's min value and chart's max value, instead of the default ten segments, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"rowAmount": 5
}
}
By default the scale does go up the maximum value found in data, to the end value specified via config, or to the maximum highlight line. If you do not want to display highlight lines outside of the original data range, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"includesHighlights": false
}
}
If you are using a time scale for the x-axis, you need to tell Insight which attributes contribute the start and end value to position the record on the time scale. Use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"startDate": "${startAttribute}",
"endDate": "${endAttribute}",
}
}
Highlights¶
You can configure custom highlight lines in Insight Charts to visualize and emphasize important thresholds. Use the following notation:
{
"name": "my-example-node",
"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",
"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, doughnut-charts and sankey-charts.
Filter¶
There are two different types of filters in Insight charts. A normal filter that applies to all charts and a values filter that applies to all filters that use the values notation. To use the normal filter above Insight Charts, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"filters": [
{
{
"name": "attributeName",
"label": "filter label"
}
}
]
}
}
This will filter out all records that do not match the filter options selected by the user and update the chart accordingly. To use the value filter above Insight Charts, use the following notation:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"filters": [
{
"name": "INSIGHT_BAR_STACKED_VALUES"
}
]
}
}
This is a magic token that will tell Insight to render filter options based on the values configuration. It then does not filter out any records but instead updates the configuration to match the selected filter options.
Styling¶
You can adapt the way Insight renders charts by changing basic layout settings.
textSize: Changes the text size of labelspointSize: Changes the size of bars / linespadding: Changes the space between bars / linesxAxis: The height of the xAxis label sectionrowHeight: Changes the height of a rowradius: Changes the size of pie chartsmarkerRadius: Changes the size of markersgridColor: Changes the color of the background grid linessankeyPadding: The padding between two Sankey groupssankeyVerticalGap: The vertical gap between two Sankey entriessankeyWidth: The width of a Sankey entry
Example:
{
"name": "my-example-node",
"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",
"sankeyPadding": 20,
"sankeyVerticalGap": 20,
"sankeyWidth": 20
}
}
Miscellaneous¶
You can disable the Download PNG Button, if you don't want your users to use it. Default: true. Example:
{
"name": "my-example-node",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"chart": {
"label": "${myLabelAttribute}",
"value": "${amount}",
"downloadPng": false
}
}