WebApps:JavaScript Diagramm

Verfügbar ab 9.5 HF 4.3

Systemvoraussetzungen

Die Voraussetzungen finden Sie hier.

Aufruf Diagrammdesigner

@Session_WebAppUrl@/diagram/?charttype=javascript&diagramid=<Diagrammname>

Beispiel:

https://servername:4444/coplanner/diagram/?charttype=javascript&diagramId=Mein erstes JS Diagramm

Erweiterter Aufruf

• hideSessionHeader: Definiert, ob der Session-Header angezeigt werden soll oder nicht (true blendet Session-Header aus). Der Default beim Öffnen ist false.

Aufruf für das Erstellen eines Diagramms

JavaScript Diagramme können derzeit nur über das BI-Center im Windowsclient erstellt werden.

Hinweis  Funktioniert nur im PowerUser Modus

Diagrammdesigner

Quellen

Für die JavaScript Diagramme kann man ein bis vier Datenquellen definieren, auf die man zugreifen möchte.

Als Quellen können bestehende Eingabemasken gewählt werden.

Filter

Über das + können Filter hinzugefügt werden und über das x wieder gelöscht werden.

• Dimension: Auswahl der Dimension für den Filter
• Caption: Anzeigetext des Filters im Diagramm
• Quelle 1 - 4: Hier kann man Verknüpfungen zwischen Filtern und den einzelnen Datenquellen definieren
• Standardwert: Hier kann ein Wert vergeben werden, der automatisch beim Öffnen des Diagramms ausgewählt wird

JavaScript

Bei Neuanlage eines JavaScript Diagramms wird ein einfacher Beispielcode bereitgestellt. Sie können sich das Diagramm sofort anzeigen lassen. Beispiele, wie man dieses Diagramm dann generischer machen kann sind ebenfalls auskommentiert im Beispielcode vorhanden.

Unter https://plot.ly/javascript/ finden Sie Codebeispiele und es gibt auch einen Chartgenerator als Hilfestellung zur Erstellung eines Diagramms.

Beispiel

Erstellt man ein neues JavaScript Diagramm, hat man schon folgenden Beispielcode im JavaScript-Bereich:

// 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["NAME_OF_INPUTMASK"];
// var dataMeasure1 = inputMaskData && inputMaskData["MEASURE_NAME_1"]
//   ? inputMaskData["MEASURE_NAME_1"].values
//   : [];
// var dataDimension1 = inputMaskData && inputMaskData["X_AXIS_NAME_1"]
//   ? inputMaskData["X_AXIS_NAME_1"].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]
  }
];

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

// Plotly data click event (optional):
function onPlotClick(data) {
  // if (data.points.length > 0) {
  //   var clickData = data.points[0].data;
  //   console.log(clickData);
  // }
}

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

Öffnet man das Diagramm ohne eine Änderung, so sieht man folgendes Diagramm:

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.

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

Die Eingabemaske sieht wie folgt aus und hat in diesem Beispiel den Namen MAX_JS_Chart:

In dem Custom JavaScript Diagramm wählt man nun bei Quelle 1 die Maske MAX_JS_Chart aus. Wir wollen nun aus der Quelle MAX_JS_Chart das Measure mit dem Namen Wert und die Dimension Animals im Diagramm darstellen.

Im Beispielcode kommentieren wir dazu die folgenden Zeilen nun ein (durch entfernen der //) und passen diese an, damit wir über Variablen auf unsere Datenquelle zugreifen können.

Vorher:

// var inputMaskData = dataSources["NAME_OF_INPUTMASK"];
// var dataMeasure1 = inputMaskData && inputMaskData["MEASURE_NAME_1"]
//   ? inputMaskData["MEASURE_NAME_1"].values
//   : [];
// var dataDimension1 = inputMaskData && inputMaskData["X_AXIS_NAME_1"]
//   ? inputMaskData["X_AXIS_NAME_1"].values
//   : [];

Anpassen zu:

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

Nun verändern wir den Teil, wo wir die Daten definieren und greifen auf die gerade angepassten Variablen zu. Vorher:

var data = [
  {
    type: 'bar',

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


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

Anpassen zu:

var data = [
  {
    type: 'bar',

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

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

Wenn wir das Diagramm nun speichern und ansehen, wird uns das Diagramm basierend auf unseren Daten im CoPlanner angezeigt.

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.

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

Dazu sind folgende Schritte notwendig:

• Erweitern des Basiswürfels: Im CoPlanner Würfel muss ein berechnetes Measure erstellt werden vom Typ Link, welches den Link zum gewünschten Elemente enthält und die Filter entsprechend übergibt.

z.B.: @Session_WebAppUrl@/PivotTable/?tableform=ZS_JS_Chart&contextFilters=Animals mu Attribute(Animals.ID) and Zeit mu Attribute(Zeit.ID)

Ü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:

Wir definieren zusätzlich unser neues Measure Link_Detail in der obersten Sektion

var dataLink1 = inputMaskData && inputMaskData["Link_Detail"]
? inputMaskData["Link_Detail"].values
 : [];

Erweitern des data-Bereichs von

var data = [
  {
    type: 'bar',

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

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

zu

var data = [
  {
    type: 'bar',

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

	 y: dataMeasure1,
    //y: [20, 14, 23]
          
         link: dataLink1
  }
];

Zusätzlich muss folgender Code angepasst werden:

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

zu

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);
   }
}