Versionen im Vergleich

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.
Auszug
hiddentrue

Nuclos web client charts: chart, column, bar, line, pie, scatter, speedometer, JSON, primaryChart, subform, dynamic BO.

globe with meridians Language: Deutsch · English

light bulb Charts

Charts in the web client – types, data sources (subforms/dynamic BOs) and JSON configuration.

Status
colourGreen
titleKonzept
Status
colourBlue
titleDeveloper
Status
colourGreen
titleUpdated: Jul 2026
Status
colourGrey
titleapplies to Nuclos 4.2026.x

Panel
bgColor#F4F5F7

On this page

Inhalt
maxLevel2
minLevel2

Charts visualize key figures directly in the web client. Configuration is done via JSON; a chart takes its data from subforms or (dynamic) business objects.

Chart types

GermanType
Column chartColumn
BalkendiagrammBar
LiniendiagrammLine
Combined column/lineColumn/Line
KuchendiagrammPie
StreudiagrammScatter
TachoSpeedometer

Usage

  • In a business object: data from subforms – dynamic BOs (for grouping/summing) are also possible; a nuclet can ship chart templates.
  • In a side view/list view: via search/filter criteria.

Configuration (JSON)

Codeblock
languagejson
{
	"chartLabel": {"de": "Umsatzanalyse", "en": "sales analysis"},
	"primaryChart": {
		"chartType": "(Column|Bar|Line|Pie|Scatter|Speedometer)",
		"boMetaId": "com_buymore_Umsaetze",
		"categoryAttrId": "com_buymore_Umsaetze_umsatzjahr",
		"categoryLabel": {"de": "Jahr"},
		"scaleLabel": {"de": "TEuro"},
		"series": [
			{
				"boAttrId": "com_buymore_Umsaetze_umsatz",
				"label": {"de": "Umsatz"},
				"color": "#000000"
			}, 
			{
				"boAttrId": "com_buymore_Umsaetze_gewinn",
				"label": {"de": "Gewinn"},
				"color": "#222222"
			}
		],
 
		"searchTemplate": [
			{
				"label": "Jahr von",
				"boAttrId" : "com_buymore_Umsaetze_umsatzjahr",
				"comparisonOperator": ">=",
				"mandatory": true
			},
			{
				"label": "bis",
				"boAttrId" : "com_buymore_Umsaetze_umsatzjahr",
				"comparisonOperator": "<=",
				"mandatory": true
			},
			{
				"label": "Artikelkategorie",
				"boAttrId" : "com_buymore_Umsaetze_kategorie",
				"comparisonOperator": "=",
				"mandatory": true,
				"dropdown": true
			}
		]
	},
	"secondaryChart": {
		"chartType": "Line",
		"useCombinedScaleWithPrimary": false,
		"boMetaId": "com_buymore_Arbeitsleistung",
		"categoryAttrId": "com_buymore_Arbeitsleistung_jahr",
		"scaleLabel": {"de": "h"},
		"series": [
			{
				"boAttrId": "com_buymore_Arbeitsleistung_stunden",
				"color": "#777777"
			} 
		]
	}
}
Info
titleDetails

Advanced options (sorting, crosshair, combined charts, tooltips) are described in Configuration.

Related pages

gear Configuration


Options.

Open →