Put data into WSO2 DAS
Very first step is to have some data in DAS.
- Login into WSO2 DAS Management Console:Â
https://localhost:9443
- On the Main tab, inside Event section chose Streams.
- Click Add Event Stream with parameters as follows:
- Name:
DutchPopulationStream;
- Version:
0.0;
- Name:
- Into Payload Data Attributes add
city
asstring
andpopulation
as int. - In the next step make sure both attributes are set for persistence.
- Finally click
[SAVE EVENT STREAM]
Next, into Receivers section, create new receiver (Add Event Receiver):
- Event Receiver Name:
DutchPopulationHttpReceiver;
- Adapter Type:
HTTP;
- Transports:
All;
- Event Stream:
DutchPopulationStream
(that one we created in previous step); - Message format:
JSON;Â
Next, use a tool like Postman to push some data over HTTP receiver.
- 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:
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.
Image 3: Create a Gadget
With this approach it shouldn’t be hard to create dashboard like this:
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.
Show WSO2 DAS data into custom dashboard panel
 For this task we’ll use very popular AdminLTE Dashboard Project. Follow this steps:
- git clone https://github.com/almasaeed2010/AdminLTE
- cd AdminLTE
- edit starter.html like this:
- 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
- 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.
- When your data is there, organize it as it’s necessary by Chart.js;
Final output should be like this:
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.