Let me start this post with a saying.
"Data is worthless if you don't communicate It correctly"
I'm sure everybody reading this post will agree on the above saying. WSO2 User Engagement Server or simply known as WSO2 UES was released with the aim of providing a set of tools that will ease your data visualization.
If it is the first time that you are hearing about WSO2 UES, I would suggest you to peep a bit into WSO2 documentation about UES 1.0.0
here. Also if you are a developer who is interested in how the things have been done, UES
git repo is the place for you.
UES 1.0.0 release was done sometime back and recently we released the milestone one of version 1.5.0 of the product. Milestone 1 mainly contains the initial implementation of Gadget generation tool which will simply take user through a wizard and will draw a graphing gadget visualizing his data.
Are you interested ? Let me walk you through the lanes of UES. First of all download the WSO2 UES 1.5.0 Milestone 1 pack from
here.
NOTE:
PRODUCT_HOME that I will be referring from here on-wards is the directory where you unzipped the downloaded pack.
OK. Now we are ready to make our hands dirty with our data :)
Place your RDBMS driver at <PRODUCT_HOME>/repository/components/lib/
For an example if your data resides in a mysql database, place the mysql driver at the above location.
(IMPORTANT : If you have started the server already, you have to restart after placing the driver.)
Start the downloaded pack as you start any of the WSO2 products.
- On Windows: <PRODUCT_HOME>\bin\wso2server.bat
- On Linux/Solaris: sh <PRODUCT_HOME>/bin/wso2server.sh
You can find more information on how to start the product here.
Go to the browser and open the link http://localhost:9763/portal and login.
You will see a page similar to following.
Find the sign in button on the top right corner of the page. For the moment let's login with following credentials.
Username : admin
Password: admin
Please note that if you need to create a new user and login with that user, you can do so.
Once you logged in, you will be redirected to the dashboard creation page.
Click Create on top left corner and select Dashboard.
Give a preferred name to the dashboard and select a layout. Then click on Create new app.
Layout defines the arrangement of gadgets in your dashboard.
Then you will be redirected to the dashboard designer window where you can add gadgets to the created dashboard.
Click on "Add Gadget" button on any of the blocks visible and follow the wizard.
Select your preferred data-source and click Next.
NOTE :
Since this is milestone 1 of the tool, we have completed the implementation only for RDBMS. So please bear with us, we will support rest of the data-source types in coming releases.
Enter the connection details of your data-source and click Next.
See the image below where I have entered mysql connection details of the database where I want to visualize my data. My database is "std" and both the username and password for the database is "test".
Also note that the information of the data-source needs to be of the driver that you placed in the lib folder as stated in first step.
Ex: If you place mysql driver in lib folder then connection URL, username and password fields should be of a mysql database.
Enter your SQL query to get the data from the respective table of the database and Click Next.
This SQL query can be any complex query which return the columns that you want to visualize in your gadget.
NOTE : Do not add the semi-colon at the end of the query.
Go to "Store Items" and click on your preferred graph type.
NOTE:
As I mentioned above, at the moment we only support the chart types that I have caged with a rectangle (Line chart and Bar chart). Await for more chart types in future.
Let's say I select the chart type as "Bar Chart".
Do the data mapping of the columns as needed and click Next.
- Depending on the SQL query that you submitted in the previous step, the columns retrieved from that particular query will be visible as drop down for each axis. Select the column names from them.
- Give the axis label names that you want in your chart.
- You can set your chart to be updated at a given interval by setting the Update interval value. Note that update interval is in seconds.
- Click on the + mark (shown in the cage), if you want to add more series to the same graph.
Once you click on the + button, you can add multiple series as follows.
Let's say I want to show both Maths marks and Science marks of the students in the same graph. For the first series I have selected Maths marks. Now let's add Science marks for the second series.
Like wise you can add any number of series in the same graph.
Once you have finish adding the required series click on Next button and you will see your data been visualized into a bar chart as follows.
Note that you can customize your chart (change colors, bar width etc) using a simple configuration file to meet your desire.
Click on the title "Bar Chart" on the top of the added gadget and change the title of your chart.
Enjoy adding as many as gadgets you need in to your dashboard.
Once you have completed adding gadgets click on Save on top right corner to save your dashboard.
IMPORTANT
Gadget gen tool feature is in its very early stages, you will encounter number of bugs and feature limitations, we are working on improving these in future milestones.
Limitations
- Only supports connecting to RDBMS data source at the moment.
- Line chart and Bar chart templates have been re-factored and rest of the charts will be done in future milestones.
- Wizard UI will to be styled and polished in coming releases.
- Error handling and validations are yet to be done.
- Supporting text based x-axis ticks has been done and other special data types (ex : date/time) has not been done yet. Because by default flot (graphing library used for gadgets) supports only integer based x-axis ticks)
More good things are yet to come !!!
Be with us, tool will be improved more and more in future releases to cater all your data visualization needs.
