info@yenlo.com
eng
Menu
WSO2 Stream Processor 3 min

Real world example of WSO2 DAS Gadgets

Dusan Devic
Dusan Dević
Integration Consultant
Postman definition

WSO2_DAS.png  WSO2 Data Analytics Server is a very powerful web-based solution for data analytics. Before you continue with this tutorial, please make sure you read and understood about WSO2 DAS data representation alternatives.Over there we defined three different approaches and in this blog post we’ll see how to make use of each. In this simple example we’ll use this Wikipedia page as a source in order to create a graphical representation of Dutch cities by population.

Put data into WSO2 DAS

Very first step is to have some data in DAS.

  1. Login into WSO2 DAS Management Console: https://localhost:9443
  2. On the Main tab, inside Event section chose Streams.
  3. Click Add Event Stream with parameters as follows:
    1. Name: DutchPopulationStream;
    2. Version: 0.0;
  4. Into Payload Data Attributes add city as string and population as int.
  5. In the next step make sure both attributes are set for persistence.
  6. Finally click [SAVE EVENT STREAM]

Next, into Receivers section, create new receiver (Add Event Receiver):

  1. Event Receiver Name: DutchPopulationHttpReceiver;
  2. Adapter Type: HTTP;
  3. Transports: All;
  4. Event Stream: DutchPopulationStream (that one we created in previous step);
  5. Message format: JSON; 

Next, use a tool like Postman to push some data over HTTP receiver.

Postman_definition.png Image 1: Postman definition

  • Endpoint: http://localhost:9763/endpoints/DutchPopulationHttpReceiver
  • Method: POST;
  • Data Type: JSON;
  • Payload: {"event":{"payloadData":{"city":"Nijmegen","population": 171 }}};
  • Repeat the last step for each city;
  • Go to Data Explorer and make sure your data is there:

Data_Explorer_DutchPopulationsStream.png Image 2: Data Explorer (DutchPopulationStream)

How to generate gadget in WSO2 Dashboard Server  

This is the easiest way to generate results.

  • Login into WSO2 DAS Portal: https://localhost:9443/portal
  • Click CREATE DASHBOARD;
    • Name: Dutch Cities by Population;
    • Click NEXT;
    • Chose Single Column Layout;
    • You’ll get redirected to Dashboard Designer, click Create Gadget;
    • Select your source table (should be DutchPopulationStream), make sure both fields are checked (population and city);
    • Click Next;
    • Chart Type should be BAR;
    • Title should be: Population Bar Chart;
    • X-Axis is city;
    • Y-Axis is population;
    • Click Add to Gadget Store;
    • Create another Gadget, repeat all but just instead of Chart Type: Bar now set Table as a value. Name it “Population Table”;
    • In Dashboard designer drag and drop your two gadgets to dashboard.
    • Click on VIEW to see the results.

Create_a_gadget-1.png

Image 3: Create a Gadget

With this approach it shouldn’t be hard to create dashboard like this:

Dashboard_is_ready.png

Image 4: Dashboard is ready

Ok this was easy, but what if we want to customize this? What if your customer doesn’t like blue color? What if you want, for example, to represent this data with Pie Chart, WSO2 wizard doesn’t have that option?

Let’s do some real engineering, in the following step we’ll move forward on this topic.

Custom Gadget in WSO2 DAS 

Open DAS_HOME/repository/deployment/server/jaggeryapps/portal/store/carbon.super and into gadget directory put source files available from this repository. Then login into Dashboard Designer, create new dashboard and from the gadgets pool drag and drop “Pie Chart” into one 6 x 6 block. If you want to show data in table also, you can drag and drop previously generated gadget for that purpose.

In this section we created another gadget and make use of chart.js library. Explanation of what we did into gadget’s source code is out of scope of this blog post and it is not very relative to WSO2.

Custom_Gadget_on_WSO2_Dashboard.png Image 5: Custom Gadget on WSO2 Dashboard

Show WSO2 DAS data into custom dashboard panel

 For this task we’ll use very popular AdminLTE Dashboard Project. Follow this steps:

  1. git clone https://github.com/almasaeed2010/AdminLTE
  2. cd AdminLTE
  3. edit starter.html like this:
    1. make sure you loaded chart.js from CDN (do not use Admin LTE’s plugin as it’s very old): https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js
    2. Fire AJAX request on https://localhost:9443/analytics/tables/{STREAM_NAME}, also make sure there is Authentication in header. Check WSO2 DAS Documentation for more info about this topic.
    3. When your data is there, organize it as it’s necessary by Chart.js;

Final output should be like this:

WSO2_DAS_Custom_Dashboard_AdminLTE.png Image 6: WSO2 DAS Custom Dashboard (AdminLTE)

You can review the source code for this example at: https://github.com/dusandevic/wso2-das-custom-dashboard

Read also our other WSO2 tutorials and blogs, written by our WSO2 Gurus. In case you need WSO2 support, contact the Yenlo WSO2 Guru team to get WSO2 Development Support or WSO2 Operational Support. Of course we do deliver excellent WSO2 training services as well, based on reallife WSO2 tutorials.

Thanks to Jochen Traunecker and Rob Blaauboer for their contribution to this blog.

eng
Close