Dashboard diagram widget configuration
This information is also applicable to the field Visual extra: SQL: Diagram query.
This site only describes the specifics of the diagram widgets, for general widget configuration click here.
This article will only cover the newest version of graphs implemented.
To enable these, toggle the Policy useGoogleChart to false and useNewChart to true.
As of writing (version 8813) these renderings are supported.
- Circle
- Doughnut
- Bar vertical (Columns)
- Bar horizontal
- Area
- Line
- Area (stacked)
Data and Internationalization
An SQL Query may extract almost anything from the database.
This process ignores the security restrictions in the system, so you will have to implement them yourself.
Structure
The structure is the same for all graphs.
The first row of data will be used for headers.
The column named "Title" will be used for titles. On circular diagrams that is the labels, next to the chart, and on xy-graphs that is the labels on the x axis.
The rest of the headers will be used when hovering over the graph, to give information about the data. On xy-graphs it will also be displayed as labels.
The rest of the lines in the data will be added as datapoints in the graph.
If the datapoint is a number, the graph will auto-scale to match the data.
Strings are also supported, but the outcome is unknown.
If a datapoint is null, the graph will bridge the gap, if it is an xy-line-graph, see sample here.
Sample pie/doughnut-graph
| Title | TitleEnglish | This moth | Last month |
|---|---|---|---|
| GOOG | Alphabet | 100.23 | 25.23 |
| TSLA | Tesla | 10.23 | 20.23 |
| AAPL | Apple | 50.23 | 50.23 |
Sample line-graph
| Title | TitleEnglish | Alphabet | Tesla | Apple |
|---|---|---|---|---|
| THIS | This Month | 100.23 | 10.23 | 50.23 |
| LAST | Last month | 25.23 | 20.23 | 50.23 |
Internationalization
Add extra columns named "Title", followed by the name of the language, eg TitleEnglish.
If a column with this name is found, it will be used, otherwise the grath will fallback to the "Title" column.
If no title-column is found, the first column will be used, for compatibility reasons.
Graph defaults
The graphs all reference the js object tsChartDefaultOptions, with a couple of tweaks.
To see the defaults, open the terminal in you browser, on a page that has a graph and type the name of the object.
Specifik defaults
These can't be overwritten.
Area stacked
options.scales = {
y: {
stacked: true
}
}
Bars
options.indexAxis = 'y'
Overwriting defaults
To overwrite the default of all charts:
Define an object in js, named tsChartOverwriteOptions.
Set it based on the documentation fund here.
To overwrite the options for a specific chart:
Define an object in js, named tsChartOverwriteOptions.
Add an object with an index matching the chartID.
Set it based on the documentation fund here.
To test your overwrite:
From the console in the browser call tsChartOptions with the only parameter being the chartID.
The return will be the final options, that will be used for that chart.
Colors
The colors used, can be overwritten in the Policy diagramChartJSColors.
The structure of the policy is very strict.
The policy has to be formatted as a js array of strings that represent an rgb color.
Thus: It has to start with [ and and with , ].
Each color has to be formatted as an rgb color and wrapped with ', and separated by , eg 'rgb(255, 255, 255)', for a white color.