Admin at 09:25, 6 July 2020

2020-07-06T09:25:37Z

Admin: Created page with "TOC =System requirements= The requirements can be found here. =Invocation= @Session_WebAppUrl@/diagram/?charttype=javascript&diagramid=
2020-07-06T09:25:21Z

Created page with "TOC =System requirements= The requirements can be found here. =Invocation= @Session_WebAppUrl@/diagram/?charttype=javascript&diagramid=<Diagra..."

New page
TOC

=System requirements=

The requirements can be found [[WebApps:Requirements|here]].

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

Example:

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

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

{| {{Bausteindesign1}}
|-
| <span style="color: darkblue;">'''Note'''</span>  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.

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

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

[[image: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:

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

to:
<pre>
var inputMaskData = dataSources["MAX_JS_Chart"];
var dataMeasure1 = inputMaskData && inputMaskData["Wert"] ? inputMaskData["Wert"].values : [];
var dataDimension1 = inputMaskData && inputMaskData["Animals"] ? inputMaskData["Animals"].values : [];
</pre>

Now we change the part, where we define the data and use the variables from above.
Change:
<pre>
// Plotly data object (required):
var data = [
{
type: 'bar',
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23]
// x: dataAxis1,
// y: dataMeasure1
}
];
</pre>

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

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

[[image: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.

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

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

to

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

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

Additional we have to add the following code:

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

The final code after all these changes:

<pre>

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

</pre>

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

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

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

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

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

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

NOEDITSECTION

[[Category:WebApps|JavaScript Diagramm]]
[[de:WebApps:JavaScript Diagram]]

WebApps:JavaScript diagram - Revision history

Admin at 09:25, 6 July 2020