WebApps:JavaScript Diagramm

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 Header angezeigt werden soll oder nicht (true blendet 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 Matrixmasken 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 am CoP 10 HF 1.3:

// Further information and samples can be found at:
// https://plot.ly/javascript/
// https://copsupport.coplanner.com/helpCOP10/index.php/WebApps:JavaScript_Diagramm

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

// Plotly data object (required):
var data = [
    {
        type: 'bar',
        x: ['giraffes', 'orangutans', 'monkeys'],
        y: [20, 14, 23]
        // x: dataAxis1,
        // y: dataMeasure1
    }
];

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

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

Ö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.

Daten festlegen

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

Die Matrixmaske 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 dataAxis1 = inputMaskData && inputMaskData["DIMENSION_NAME_1"] ? inputMaskData["DIMENSION_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:

// Plotly data object (required):
var data = [
    {
        type: 'bar',
        x: ['giraffes', 'orangutans', 'monkeys'],
        y: [20, 14, 23]
        // x: dataAxis1,
        // y: dataMeasure1
    }
];

Anpassen zu:

// Plotly data object (required):
var data = [
    {
        type: 'bar',
        // x: ['giraffes', 'orangutans', 'monkeys'],
        // y: [20, 14, 23]
        x: dataAxis1,
        y: dataMeasure1
    }
];

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

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.

Detailsatzsprung hinzufügen

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 Matrixmaske. 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,
    y: dataMeasure1
    // x: ['giraffes', 'orangutans', 'monkeys'],
    //y: [20, 14, 23]
  }
];

zu

var data = [
  {
    type: 'bar',
    x: dataDimension1,
    y: dataMeasure1,
    link: dataLink1

    // x: ['giraffes', 'orangutans', 'monkeys'],
    //y: [20, 14, 23]
  }
];

Zusätzlich muss folgender Code eingefügt werden:

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

Final hier der daraus entstandene Code im JavaScript Chart:

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 : [];

// Plotly data object (required):
var data = [
  {
    type: 'bar',
    x: dataDimension1,
    y: dataMeasure1,
    link: dataLink1
    // x: ['giraffes', 'orangutans', 'monkeys'],
    //y: [20, 14, 23]                
  }
];

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

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

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.

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

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

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

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

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