Customizing the chart in dashboard during runtime

Introduction

The Chart Feeding panel , Chart type picker and chart property editor enables the application user to edit the chart during runtime.

Whats the problem :

In this blog post we will see how to customize the chart during runtime using the components (Chart Feeding Panel, Chart Type Picker, Chart Property Editor).

What needs to be done :

We will create a layout such that on click of a button we will select the query for the chart. Also we shall edit the chart in runtime using the Chart Feeding Panel, Chart Type Picker, Chart Property Editor components.

Authoring technical component provides authoring area property with which the components present inside the area can be adjusted during runtime.

Step 1 : Right click the Technical Component and select the Backend connection technical component to select datasource during runtime.

Step 2 :Create a global variable ‘Type’ with type string and add the Chart Feeding Panel, Chart Type Picker, Chart Property Editor components to the layout as shown and also create unassigned datasources for the chart.

Step 3 : Create a button in the panel and enter the below script in the onClick of the button. In the onclick of button the enabling of authoring property is done.

if(Type == ”)

{

APPLICATION.alert(‘Please select chart’);

}

else

{

CONNECTION_1.showDataSourceBrowser();

}

Step 4 : In the onclick of On Data Source Confirmed of backend connection component enter the below script.

var ds = CONNECTION_1.getSelectedDataSource();

if(Type == ‘CHART_1’)

{

DS_1.assignDataSource(ds.connection, ds.type, ds.name, true);

var e= DS_1.getDimensions();

e.forEach(function(element, index) {

  DROPDOWN_1.addItem(element.text, element.text);

});

}

else

{

DS_2.assignDataSource(ds.connection, ds.type, ds.name, true);

var f= DS_2.getDimensions();

f.forEach(function(element, index) {

  DROPDOWN_1.addItem(element.text, element.text);

});

}

Step 5 : In the dropdown of select dimensions enter the below script .

var selValue=DROPDOWN_1.getSelectedValue();

if(Type == ‘CHART_1’)

{

DS_1.moveDimensionToRows(selValue);

CHART_1.setDataSource(DS_1);

CHART_FEEDING_PANEL_1.setChart(CHART_1);

CHART_PROPERTY_EDITOR_1.setChart(CHART_1);

CHART_TYPE_PICKER_1.setChart(CHART_1);

}

else

{

DS_2.moveDimensionToRows(selValue);

CHART_2.setDataSource(DS_2);

CHART_FEEDING_PANEL_1.setChart(CHART_2);

CHART_PROPERTY_EDITOR_1.setChart(CHART_2);

CHART_TYPE_PICKER_1.setChart(CHART_2);

}

Step 6 : In the dropdown of Select editor enter the below script and in the Items section enter the three names : Feed , Type , Property .

var selValue=DROPDOWN_2.getSelectedValue();

if(selValue == ‘Feed’)

{

CHART_FEEDING_PANEL_1.setVisible(true);

CHART_PROPERTY_EDITOR_1.setVisible(false);

CHART_TYPE_PICKER_1.setVisible(false);

}

else if(selValue == ‘Type’)

{

DS_2.moveDimensionToRows(selValue);

CHART_FEEDING_PANEL_1.setVisible(false);

CHART_PROPERTY_EDITOR_1.setVisible(false);

CHART_TYPE_PICKER_1.setVisible(true);

}

else if(selValue == ‘Property’)

{

DS_2.moveDimensionToRows(selValue);

CHART_FEEDING_PANEL_1.setVisible(false);

CHART_PROPERTY_EDITOR_1.setVisible(true);

CHART_TYPE_PICKER_1.setVisible(false);

}

else if(selValue == ”)

{

CHART_FEEDING_PANEL_1.setVisible(false);

CHART_PROPERTY_EDITOR_1.setVisible(false);

CHART_TYPE_PICKER_1.setVisible(false);

}else

{

var k=1;

}

Step 7 : In the onclick of text box TEXT_1 enter the below script .

CHART_1.setVisible(true);

CHART_2.setVisible(false);

Type=‘CHART_1’;

DROPDOWN_1.setSelectedValue(”);

DROPDOWN_2.setSelectedValue(”);

CHART_FEEDING_PANEL_1.setChart(CHART_1);

CHART_PROPERTY_EDITOR_1.setChart(CHART_1);

CHART_TYPE_PICKER_1.setChart(CHART_1);

CHART_FEEDING_PANEL_1.setVisible(false);

CHART_PROPERTY_EDITOR_1.setVisible(false);

CHART_TYPE_PICKER_1.setVisible(false);

Step 8 : In the onclick of text box TEXT_2 enter the below script .

CHART_1.setVisible(false);

CHART_2.setVisible(true);

Type=‘CHART_2’;

DROPDOWN_1.setSelectedValue(”);

DROPDOWN_2.setSelectedValue(”);

CHART_FEEDING_PANEL_1.setChart(CHART_2);

CHART_PROPERTY_EDITOR_1.setChart(CHART_2);

CHART_TYPE_PICKER_1.setChart(CHART_2);

CHART_FEEDING_PANEL_1.setVisible(false);

CHART_PROPERTY_EDITOR_1.setVisible(false);

CHART_TYPE_PICKER_1.setVisible(false);

Step 9 : Select the editor type for the chart and can edit the chart in runtime as per the the application users requirement.

Output :

Conclusion :

Thus with the help of above mentioned components the chart can be customized during runtime.

References :

1. https://help.sap.com/viewer/4f58d91f03e441b68d3187e94be27df2/2.1.2.0/en-US/716b8049f4d94cc0a29000ce124a9602.html
2. https://help.sap.com/viewer/4f58d91f03e441b68d3187e94be27df2/2.1.2.0/en-US/1b17ad5256bb4d89ae9db7b4a2c25600.html
3. https://help.sap.com/viewer/4f58d91f03e441b68d3187e94be27df2/2.1.2.0/en-US/5d5f9ec7c15c4d5bbfe89ce291cffbf6.html