WebApps:JavaScript diagram

System requirements

The requirements can be found here.

Invocation

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

Example:

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

Extended Invocation

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

Invocation to create a JavaScript diagram

To create a JavaScript diagram you must use the BI-Center in Windowsclient.

Note  Works only in PowerUser mode.

Diagram designer

Source

You can define up to four sources for your JavaScript diagram.

As source you can use already existing Input masks.

Filter

With + you can add filters and with x you can remove them.

• Dimension: chose the dimension which should be used
• Caption: caption for the filter in the diagram
• Source 1 - 4: defines the assigment from the filter to the filter in the datasource
• Defaultvalue: the value which is used for the filter, when the diagram opens

JavaScript

A new JavaScript chart is provided with a sample code. This sample code inlcudes hard-coded data, so you can watch it directly. Examples how to make the diagram generic are included but are commented out.

On https://plot.ly/javascript/ you can find code examples and there is also a chart generator make it easier to create a diagram.

Example

When creating a JavaScript chart the following sample code is provided.

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

When you open the diagram without a change, you see the following diagram:

File:JS Chart Original.PNG

That chart only has hard-coded data. This example shows, which changes have to be done, that you get the data from CoPlanner.

Define data

At first there must exist the accordingly table in CoPlanner. This table have to be used in a CoPlanner Cube which is used in an input mask.

The input mask in that example looks like that and has the name MAX_JS_Chart:

File:JS Chart Quelle1.PNG

Chose MAX_JS_Chart for Source 1. We want to use show the measure "Wert" and the dimension "Animals" in the diagram.

In the sample code we comment the following rows in (remove the //) and adapt them, so that we can use variables to use them.

Change

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

to:

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

Now we change the part, where we define the data and use the variables from above. Change:

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

To

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

When we now save the diagram and take a look on it, we se the diagram based on our data in CoPlanner.

File:JS Chart Angepasst.PNG

Add filters

If we want the data to be filtered by the dimension "Zeit", we can add it and link it with Source 1.

Add a drillthrough

We now can add an additional drillthough.

Therefore the following steps are necessary:

• Expand the cube: we need a calculated measure with the datatype link, which includes the link and the filters.

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

With this link we open the row view with the name ZS_JS_Chart and also the filter/axis element for the dimension Animals und Zeit will be delivered.

• Expand the input mask: the JavaScript Chart needs one or more input masks as base. We need to expand the input mask with the link measure, that we can use it in the diagram.

• Expand the JavaScript Code:

We additional define our new measure Link_Detail in the first section.

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

We change

var data = [
  {
    type: 'bar',
    x: dataDimension1,
    y: dataMeasure1
    // x: ['giraffes', 'orangutans', 'monkeys'],
    //y: [20, 14, 23]
  }
];

to

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

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

Additional we have to add the following code:

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

The final code after all these changes:

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-Filters

You only can use OUT-Filters or drill through, because both of them are triggered by the same action.

If you haven't done any changes to the axes, you can define the OUT-filter out of the box by activate it in the dashboard in the filter section.

If you have done changes to the axes, you have to provide the "outFilters".

Therefore we need the element IDs. They can be generated by the following code and they have to be changed the same way as the axes.

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

The part return have to be expanded for the OUT-Filter:

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

Here is a little example which reverts the order of the axis and provides the OUT-filter for the dashboard.

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