Dashboard diagram widget configuration - Revision history

Tvi: post-parsing

2025-03-21T15:30:18Z

post-parsing

← Older revision		Revision as of 17:30, 21 March 2025
Line 94:		Line 94:

	You can specify as many axis as ChartJS supports.		You can specify as many axis as ChartJS supports.

			==== Post-Parsing data ====
			There is two possible post-processing methods available. They can't be combined.

			===== Transpose =====
			Start the query with a line containing: <code>-- @TRANSPOSE</code>

			This transposes (inverts columns and rows) the data fetched by the query, before handing it of to the chart-engine.

			===== Parse =====
			Start the query with a line containing: <code>-- @PARSEDATASET</code>

			This expects the query to generate data in the following format (headers are optional), and removes the support for links.
			{\| class="wikitable"
			!X-axis
			!Group by
			!Y-axis
			\|-
			\|2024
			\|Sales
			\|2000
			\|-
			\|2024
			\|Budget
			\|2000
			\|-
			\|2025
			\|Sales
			\|2500
			\|-
			\|2025
			\|Budget
			\|4000
			\|-
			\|2026
			\|Budget
			\|5000
			\|}

	=== Internationalization ===		=== Internationalization ===

Tvi: Added functionality section

2025-01-10T14:46:31Z

Added functionality section

← Older revision		Revision as of 16:46, 10 January 2025
Line 101:		Line 101:

	If no title-column is found, the first column will be used, for compatibility reasons.		If no title-column is found, the first column will be used, for compatibility reasons.

			== Adding functionality ==
			It is possible to add some simple funktionality to charts, by adding links.

			This feature is limited to one link pr x-axis value.

			To add a link, add a column named "Link" to the query.

			Whatever this column contains will become a link, that can be navigated to, when that x-value is clicked.

	== Graph defaults ==		== Graph defaults ==

Tvi: multiple y-axis

2024-08-19T09:49:22Z

multiple y-axis

@@ Line 85: / Line 85: @@
 |50.23
 |}
 === Internationalization ===
@@ Line 107: / Line 116: @@
          stacked: true
+     }
+}
 </syntaxhighlight>

Tvi: /* Structure */

2024-04-02T12:34:02Z

Structure

← Older revision		Revision as of 14:34, 2 April 2024
Line 40:		Line 40:
	Strings are also supported, but the outcome is unknown.		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.		If a datapoint is null, the graph will bridge the gap, if it is an xy-line-graph, [[FieldSubselectDiagram\|see sample here]].

	==== Sample pie/doughnut-graph ====		==== Sample pie/doughnut-graph ====

Tvi: Added sample data

2024-04-02T08:54:09Z

Added sample data

← Older revision		Revision as of 10:54, 2 April 2024
Line 41:		Line 41:

	If a datapoint is null, the graph will bridge the gap, if it is an xy-line-graph.		If a datapoint is null, the graph will bridge the gap, if it is an xy-line-graph.

			==== Sample pie/doughnut-graph ====
			{\| class="wikitable"
			!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 ====
			{\| class="wikitable"
			!Title
			!TitleEnglish
			!Alphabet
			!Tesla
			!Apple
			\|-
			\|THIS
			\|This Month
			\|100.23
			\|10.23
			\|50.23
			\|-
			\|LAST
			\|Last month
			\|25.23
			\|20.23
			\|50.23
			\|}

	=== Internationalization ===		=== Internationalization ===

Tvi: Added the missing parts

2024-04-02T07:47:02Z

Added the missing parts

← Older revision		Revision as of 09:47, 2 April 2024
Line 19:		Line 19:
	* Area (stacked)		* Area (stacked)

	== Data ==		== Data and Internationalization ==
	An SQL Query may extract almost anything from the database.		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.		This process ignores the security restrictions in the system, so you will have to implement them yourself.

			=== Structure ===

	~~=== Circle diagrams ===~~		The structure is the same for all graphs.

			The first row of data will be used for headers.

	~~=== XY~~ diagrams ~~===~~		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.

	~~== Internationalization ==~~		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.

			=== 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 ==		== Graph defaults ==
Line 78:		Line 93:

	The return will be the final options, that will be used for that chart.		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 <code>[</code> and and with <code>, ]</code>.

			Each color has to be formatted as an rgb color and wrapped with <code>'</code>, and separated by <code>,</code> eg <code>'rgb(255, 255, 255)',</code> for a white color.

Tvi: Startet description, missing some

2024-04-02T07:23:10Z

Startet description, missing some

New page

This information is also applicable to the field [[FieldSubselectDiagram|Visual extra: SQL: Diagram query]].

This site only describes the specifics of the diagram widgets, for general widget configuration [[Dashboard 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 ==
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.

=== Circle diagrams ===

=== XY diagrams ===

== Internationalization ==

== 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 ====
<syntaxhighlight lang="js">
options.scales = {
y: {
stacked: true
}
}
</syntaxhighlight>

==== Bars ====
<syntaxhighlight lang="js">
options.indexAxis = 'y'
</syntaxhighlight>

=== Overwriting defaults ===
To overwrite the default of all charts:

Define an object in js, named tsChartOverwriteOptions.

Set it based on the documentation fund [https://www.chartjs.org/docs/3.7.1/ 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 [https://www.chartjs.org/docs/3.7.1/ 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.