Skip to Content

Building Geomap chart with badiu echart and webi customer element in BI 4.2


DISCLAIMER: The SCN, Content, and Services are being provided to You AS IS. To the fullest extent allowable by law, SAP does not guarantee or warrant any features or qualities of the SCN, Content, or Services or give any undertaking with regard to any other quality. Statements and explanations to SCN, Content or Services in promotional material or on SCN and in the documentation are made for explanatory purposes only; they are not meant to constitute any guarantee or warranty of certain features. No warranty or undertaking shall be implied by a User from any published SAP description of or advertisement except to the extent SAP has expressly confirmed such warranty or undertaking in writing. Warranties are validly given only with the express written confirmation of SAPs management.

Even though there is geomap chart in BI 4.2 Web Intelligence, China map almost can't be used. Because there is only few cities and region in Webi geomap for some political reason. So I create a geomap chart service on nodeJS development framework and added to Webi custom element service, then chinese users can build China geomap chart.

This sample is refer to SCN document "How to build a Custom Elements service for SAP Web Intelligence 4.2"

Running Sample JS:

This custom element service is based on the following free development framework and free services.

Build NodeJS runtime Environment

  1. Download and execute the MSI file for windows to install NodeJS. In this example, my server is Windows platform and I use NodeJS 4.4.1.
    After install the NodeJS, please using following command line to check if NodeJS is avaliable on the OS.
    node -v
  2. Install some necessary modules for our javascript application. Npm command is used to install these modules. Npm is a package administration tools. If there is proxy in your network, please using the following command to set proxy for npm. Make sure that you have administrator rights in command line.
    npm config set proxy "http://your_proxy:port"
  3. Install necessary modules using following command under NodeJS directory .
    npm install express
    npm install phantom-proxy
    npm install xmldoc
    npm install body-parser
    npm install pm2 –g

Start attached samples.

Open attached app.js file and copy it to the NodeJS directory. This js file contains the sample geomap element service code.

Before starting the js code, please modify the following line to select a listening port.

// Set the port number


Using PM2, you are now ready to start your Custom Elements service.

  1. Open a command window in the NodeJS folder.
  2. Execute the following command:

    pm2 start "app.js"

If start successfully, you should see the following result. Then you can use "http://your_service:port" as the customer element service.

This geomap will be as below.

Enhance the js file with other echarts:

To Build Development environment, you can use Nodeclipse development tools. Enide is the development IDE for Nodeclipse.

About how to configure and use dev environment, please refer to nodeclipse-1/

It's very easy for users to enhance other echarts to this custom element service.

All echarts is generated based on "option" parameter. The html variable in this sample can be same to all echarts. The only thing is to generate "option" for specific chart. And you also need initialize a "Visualization" object and add this visualization object to "factory" array.

The new code should be like below.

//New Chart

// Initialize viz<ID> object

var viz<ID> = new Visualization(params)


// HTML generate function

viz<ID>.generate =function(req){

//initialize option structure for echart

  var option = {<...>}

  var w = req.body.width ? req.body.width : 1100;

  var h = req.body.height ? req.body.height : 900;

//start to generate option.

//end  to genertate option

  var html='<!DOCTYPE html>'+



'    <meta charset="utf-8">'+

'    <title>ECharts</title>'+

'    <script src=""></script>'+

'    <script src=""></script>'+



'    <div id="main" style="width: '+w+'px;'+



'    <script type="text/javascript">'+

'        var myChart = echarts.init(document.getElementById(\'main\'));'+


'        myChart.setOption(option);'+

'    </script>'+



return html;


 (2500 B)
Former Member

No comments