WebApps:JavaScript Diagramm - Versionsgeschichte

S.jakobi: Hinweisbox geändert

2022-05-05T12:56:51Z

Hinweisbox geändert

← Nächstältere Version		Version vom 5. Mai 2022, 14:56 Uhr
Zeile 24:		Zeile 24:
	JavaScript Diagramme können derzeit nur über das BI-Center im Windowsclient erstellt werden.		JavaScript Diagramme können derzeit nur über das BI-Center im Windowsclient erstellt werden.

	{\| {~~{Bausteindesign1}}~~		{{Hinweis\|Text=Funktioniert nur im PowerUser Modus}}
	\|-
	~~\| <span style~~=~~"color: darkblue;">'''Hinweis'''</span>  ~~Funktioniert nur im PowerUser Modus
	\|}


	=Diagrammdesigner=		=Diagrammdesigner=

Admin am 24. Februar 2021 um 07:52 Uhr

2021-02-24T07:52:16Z

← Nächstältere Version		Version vom 24. Februar 2021, 09:52 Uhr
Zeile 18:		Zeile 18:
	===Erweiterter Aufruf===		===Erweiterter Aufruf===

	:* hideSessionHeader: Definiert, ob der ~~Session-~~Header angezeigt werden soll oder nicht (true blendet ~~Session-~~Header aus). Der Default beim Öffnen ist false.		:* hideSessionHeader: Definiert, ob der [[WebApps:Header\|Header]] angezeigt werden soll oder nicht (true blendet [[WebApps:Header\|Header]] aus). Der Default beim Öffnen ist false.

Admin am 6. Juli 2020 um 06:58 Uhr

2020-07-06T06:58:09Z

← Nächstältere Version		Version vom 6. Juli 2020, 08:58 Uhr
Zeile 270:		Zeile 270:
	};		};

			</pre>

			====OUT-Filter====

			OUT-Filter und Detailsatzsprung schließen sich aus, da beide durch das gleiche Event getriggert werden.

			Sofern man keine Anpassungen an den Achsen gemacht hat, kann man einfach im Dashboard bei den Filtereinstellungen den OUT-Filter aktivieren und dieser funktioniert dann auch.

			Wenn man allerdings Anpassungen gemacht hat, dann müssen diese auch als "outFilters" übergeben werden.

			Dazu braucht man dann die Element-IDs, damit diese übergeben werden können. Diese können über folgenden Code generiert werden und müssen gleich wie die Achse angepasst werden.

			<pre>
			var elementIdData = dataSourcesElementIds['MAX_JS_Chart'];
			var elementIdsDimension1 = elementIdData && elementIdData['Animals'] ? elementIdData['Animals'].values : [];
			</pre>

			Das Return muss dann erweitert werden um die OUT-Filter:

			<pre>
			return {
			data,
			layout,
			outFilters: {
			'Animals': elementIdsDimension1 // Return element ids in the order they are used in
			}
			};
			</pre>


			Hier ein kleines gesamt Beispiel, in dem die Reihenfolge der Elemente gedreht wurde.

			<pre>
			// Sample for customized out filters

			var inputMaskData = dataSources['MAX_JS_Chart'];
			var dataMeasure1 = inputMaskData && inputMaskData['Wert'] ? inputMaskData['Wert'].values : [];
			var dataDimension1 = inputMaskData && inputMaskData['Animals'] ? inputMaskData['Animals'].values : [];

			var elementIdData = dataSourcesElementIds['MAX_JS_Chart'];
			var elementIdsDimension1 = elementIdData && elementIdData['Animals'] ? elementIdData['Animals'].values : [];

			dataDimension1 = dataDimension1.slice().reverse(); // Reverse order of elements
			elementIdsDimension1 = elementIdsDimension1.slice().reverse(); // Reverse order of element ids

			var data = [
			{
			type: 'bar',
			x: dataDimension1,
			y: dataMeasure1
			}
			];

			var layout = {
			separators: ',.',
			showlegend: false
			};

			return {
			data,
			layout,
			outFilters: {
			'Animals': elementIdsDimension1 // Return element ids in the order they are used in
			}
			};
	</pre>		</pre>

Admin am 6. Juli 2020 um 06:44 Uhr

2020-07-06T06:44:32Z

← Nächstältere Version		Version vom 6. Juli 2020, 08:44 Uhr
Zeile 94:		Zeile 94:

	Dieses Diagramm hat momentan nur hard-codierte Inhalte. In diesem Beispiel wird gezeigt, wie man das Diagramm abändern muss, damit die Werte dynamisch aus dem CoPlanner kommen.		Dieses Diagramm hat momentan nur hard-codierte Inhalte. In diesem Beispiel wird gezeigt, wie man das Diagramm abändern muss, damit die Werte dynamisch aus dem CoPlanner kommen.

			====Daten festlegen====

	Zuerst muss es die entsprechende Tabelle mit dem Inhalt im CoPlanner geben. Auf diese wird ein CoPlanner-Würfel gebaut und eine Eingabemaske.		Zuerst muss es die entsprechende Tabelle mit dem Inhalt im CoPlanner geben. Auf diese wird ein CoPlanner-Würfel gebaut und eine Eingabemaske.
Zeile 154:		Zeile 156:

	[[image:JS_Chart_Angepasst.PNG]]		[[image:JS_Chart_Angepasst.PNG]]

			====Filter hinzufügen====

	Wollen wir jetzt noch, dass die Daten nach der Zeit gefiltert werden, können wir als Filter die Zeit auswählen und das mit der Quelle 1 verbinden.		Wollen wir jetzt noch, dass die Daten nach der Zeit gefiltert werden, können wir als Filter die Zeit auswählen und das mit der Quelle 1 verbinden.

			====Detailsatzsprung hinzufügen====

	Zusätzlich können wir noch einen Detailsatzsprung definieren.		Zusätzlich können wir noch einen Detailsatzsprung definieren.

Admin am 6. Juli 2020 um 06:40 Uhr

2020-07-06T06:40:45Z

Änderungen zeigen

Admin am 17. Februar 2020 um 10:47 Uhr

2020-02-17T10:47:36Z

← Nächstältere Version		Version vom 17. Februar 2020, 12:47 Uhr
Zeile 272:		Zeile 272:
	</pre>		</pre>


			Final hier der daraus entstandene Code im JavaScript Chart:

			<pre>
			// This script is provided with the following arguments:
			// - dataSources:
			// An object containing the data from each data source.
			// The key is the name of the data source.

			// To prevent script errors, it is advisable to check for undefined and null
			// before traversing deeper into the object. Sample for accessing data in the
			// object above:
			var inputMaskData = dataSources["MAX_JS_Chart"];
			var dataMeasure1 = inputMaskData && inputMaskData["Wert"]
			? inputMaskData["Wert"].values
			: [];
			var dataDimension1 = inputMaskData && inputMaskData["Animals"]
			? inputMaskData["Animals"].values
			: [];
			var dataLink1 = inputMaskData && inputMaskData["Link_Detail"]
			? inputMaskData["Link_Detail"].values
			: [];

			// Further information and samples regarding plotly can be found at:
			// https://plot.ly/javascript/
			// https://plot.ly/javascript/reference/

			// Plotly data object (required):
			var data = [
			{
			type: 'bar',

			x: dataDimension1,
			// x: ['giraffes', 'orangutans', 'monkeys'],

			y: dataMeasure1,
			//y: [20, 14, 23]

			link: dataLink1
			}
			];

			// Plotly layout object (optional):
			var layout = {
			separators: ',.',
			showlegend: false
			};

			// Plotly data click event (optional):
			function onPlotClick(data) {
			if (data.points.length > 0) {
			var index = data.points[0].pointNumber;
			var clickData = data.points[0].data.link[index];
			window.open(clickData);
			}
			}

			// Return processed data to CoPlanner:
			return {
			data,
			layout,
			onPlotClick
			};

			</pre>

	__NOEDITSECTION__		__NOEDITSECTION__

Admin am 17. Februar 2020 um 10:45 Uhr

2020-02-17T10:45:59Z

← Nächstältere Version		Version vom 17. Februar 2020, 12:45 Uhr
Zeile 265:		Zeile 265:
	function onPlotClick(data) {		function onPlotClick(data) {
	if (data.points.length > 0) {		if (data.points.length > 0) {
	var clickData = data.points[0].data.link;		var index = data.points[0].pointNumber;
	~~console.log(clickData)~~;		var clickData = data.points[0].data.link[index];
	window.open(clickData);		window.open(clickData);
	}		}

Admin am 17. Februar 2020 um 10:40 Uhr

2020-02-17T10:40:55Z

← Nächstältere Version		Version vom 17. Februar 2020, 12:40 Uhr
Zeile 250:		Zeile 250:

	Zusätzlich muss folgender Code angepasst werden:		Zusätzlich muss folgender Code angepasst werden:



	<pre>		<pre>
Zeile 264:		Zeile 262:
	zu		zu

			<pre>
			function onPlotClick(data) {
			if (data.points.length > 0) {
			var clickData = data.points[0].data.link;
			console.log(clickData);
			window.open(clickData);
			}
			}
			</pre>

Admin am 17. Februar 2020 um 10:37 Uhr

2020-02-17T10:37:19Z

← Nächstältere Version		Version vom 17. Februar 2020, 12:37 Uhr
Zeile 203:		Zeile 203:

	:* Erweiterung im JavaScript Code:		:* Erweiterung im JavaScript Code:
			Wir definieren zusätzlich unser neues Measure Link_Detail in der obersten Sektion

			<pre>
			var dataLink1 = inputMaskData && inputMaskData["Link_Detail"]
			? inputMaskData["Link_Detail"].values
			: [];
			</pre>

			Erweitern des data-Bereichs von
			<pre>
			var data = [
			{
			type: 'bar',

			x: dataDimension1,
			// x: ['giraffes', 'orangutans', 'monkeys'],

			y: dataMeasure1
			//y: [20, 14, 23]
			}
			];
			</pre>


			zu

			<pre>
			var data = [
			{
			type: 'bar',

			x: dataDimension1,
			// x: ['giraffes', 'orangutans', 'monkeys'],

			y: dataMeasure1,
			//y: [20, 14, 23]

			link: dataLink1
			}
			];
			</pre>





			Zusätzlich muss folgender Code angepasst werden:



			<pre>
			function onPlotClick(data) {
			// if (data.points.length > 0) {
			// var clickData = data.points[0].data;
			// console.log(clickData);
			// }
			}
			</pre>

			zu




	__NOEDITSECTION__		__NOEDITSECTION__

Admin am 17. Februar 2020 um 10:28 Uhr

2020-02-17T10:28:11Z

← Nächstältere Version		Version vom 17. Februar 2020, 12:28 Uhr
Zeile 200:		Zeile 200:
	Über diesen Link wird die Zeilensicht mit dem Namen ZS_JS_Chart aufgerufen und es werden die Filter/Achsenelemente für die Dimensionen Animals und Zeit übergeben.		Über diesen Link wird die Zeilensicht mit dem Namen ZS_JS_Chart aufgerufen und es werden die Filter/Achsenelemente für die Dimensionen Animals und Zeit übergeben.

			:* Erweitern der Basismaske: Das JavaScript Chart hat als Basis eine Eingabemaske. In dieser Maske muss unser neues Measure hinzugefügt werden.

			:* Erweiterung im JavaScript Code:

	__NOEDITSECTION__		__NOEDITSECTION__