Skip to Content
Author's profile photo Ferry Gunawan

Real Time Dashboard with WebSocket & SAP HANA Cloud Platform

I was inspired by this blog to create a real-time dashboard to monitor my laptop Windows 8.1 CPU usage in the SAP HANA Cloud Platform. We will create a simple app in the HANA cloud platform with WebSocket, some Python and VBScript scripts to get the CPU usage and display it in a simple gauge.


The app will look like this:


Create a Web Project in Eclipse

  • Let’s start to create a project in Eclipse. Select New > Dynamic Web Project/wp-content/uploads/2014/08/ss1_514236.jpg
  • Give the project name: rtd. Target runtime is SAP HANA Cloud. Rtd is abbreviation of real-time dashboard.
  • Create a Java package: rtd
  • Create a java class: RTD
  • Copy the following code into
    package rtd;
    import java.util.Collections;
    import java.util.HashSet;
    import java.util.Set;
    import javax.websocket.OnClose;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.ServerEndpoint;
    public class RTD  {
      private static final Set<Session> peers = Collections
      .synchronizedSet(new HashSet<Session>());
      public void onMessage(final String message) {
      for (final Session peer : peers) {
      try {
      } catch (final IOException e) {
      public void onOpen(final Session peer) {
      public void onClose(final Session peer) {
  • And also create the index.html under folder WebContent and copy d3 and gauges folder under the same folder. I have stored the complete source-code in the Github:

    Below is the snippet of the JavaScript in the index.html:

      //var wsUri = "ws://localhost:8080/rtd/rtd";
      var wsUri = "wss://";
            function init() {
                output = document.getElementById("output");
            function send_message() {
                websocket = new WebSocket(wsUri);
                websocket.onopen = function(evt) {
                websocket.onmessage = function(evt) {
                websocket.onerror = function(evt) {
            function onOpen(evt) {
                console.log("Connected to rtd!");
            function onMessage(evt) {
            function onError(evt) {
                console.log('Error: ' +;
            function doSend(message) {
            window.addEventListener("load", init, false);
      var gauges = [];
      function createGauge(name, label, min, max)
      var config =
      size: 300,
      label: label,
      min: undefined != min ? min : 0,
      max: undefined != max ? max : 100,
      minorTicks: 5
      var range = config.max - config.min;
      config.greenZones = [{ from: config.min, to: config.min + range*0.75 }];
      config.yellowZones = [{ from: config.min + range*0.75, to: config.min + range*0.9 }];
      config.redZones = [{ from: config.min + range*0.9, to: config.max }];
      gauges[name] = new Gauge(name + "GaugeContainer", config);
      function createGauges()
      createGauge("cpu", "CPU Usage Monitoring");
      function updateGauges(value)
      for (var key in gauges)
      function initialize()
  • The final folder structure would be like this:

Deploy to HANA Cloud Platform

After you have created the web project in Eclipse, we will deploy the app in the HANA Cloud Platform.

  • Export the war file to the location where you have installed the Java 6 EE Web Profile: <Java_6_EE_Web_Profile>/tools . Name it as rtd.war.


  • Open your command prompt and cd to the location of <Java_6_EE_Web_Profile>/tools. Execute the following command:
    neo deploy -s rtd.war -b rtd -h –java-version 7 -a <accountname> -u <username>

    Where accountname is your HANA account name, for example: p057134trial and username is your account name without ‘trial’ (i.e., p057134) .
    We are specifying the java-version 7 as the WebSocket implementation requires JRE 7. Please refer to this.
  • Once you have successfully deployed, go the Hana Cloud Platform Cockpit and check the status of the application. Just start the app if it is not started. You will also see the Java EE 6 Web Profile under the Runtime.
  • Click the link under the Application URLs:
    And you will see the gauge. At the moment we are not sending any data to the WebSocket so you will not see any movement on the gauge.

Send Data to WebSocket

We are going to use the VBScript to get the CPU usage and send the information to WebSocket using Python. Since we are deploying the app in the HANA Cloud platform, the WebSocket URI is:


If you would like to test in the HANA local runtime, change the URI to:


Below is the snippet Python program to send the information to the WebSocket:

import sys
from websocket import create_connection
ws = create_connection("wss://")
#ws = create_connection("ws://localhost:8080/rtd/rtd")
arg1 = str(sys.argv[1])
print (arg1)
result =  ws.recv()

Open your command prompt and type the following: cscript //nologo getCPUUsage.vbs


If there is no error, you will see the movement of the pointer in the gauge.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Patrick Maroney
      Patrick Maroney

      I love the gauge and the interesting application.   I used a gauge metaphor in a recent blog post on Big data (Data Driven Decision Making  )

      I recently had the honor at a manufacturing conference to share the stage with leaders from Cisco, Pitney Bowes, LNS research and SAP.  The discussion focused on what top companies are doing to drive INNOVATION around the topics of Big Data, Internet of Things (IoT) and Machine to Machine (M2M).  Your readers may be interested in watching a replay of the presentation and panel discussion here.  


      Also, we've begun a blog series summarizing this discussion as well as interactions with top companies' leaders over the past 12+ months:

      Part 1:  Business Trends driving CEOs

      Part 2:  Data Driven Decision Making 

      Part 3:  - coming soon


      Author's profile photo Ferry Gunawan
      Ferry Gunawan
      Blog Post Author

      Another useful example of WebSocket applied with SAP Screen Personas to use with Cordova barcode scanner in Android device:

      Author's profile photo Saraswathy Ramya
      Saraswathy Ramya

      Excellent Article!!