LC Blogger: [Analytics Dashboard] How to Create a Gadget Using External Data Set.

In this blog post I am guiding you to create a dashboard gadget using an external database.

As the example gadget I implemented a graph to display the blogger audience count by month.

Here I create a MySQL database called test. And I create a sample database table as follows.

Here I am using WSO2 DAS 3.0.0 version for the implementation. First you need to place the MySQL JDBC driver in following path.

<DAS Home Path>/repository/Components/lib

Then you need to create an API to access the external database. The API should place in the

<DAS Home Path>/repository/deployment/server/jaggeryapps/portal/controllers/apis folder.

The API should implement using JAGGERY [1].

Here is my sample API code.

testAPI.jag

       
<%
//make the db connection 
var db = new Database("jdbc:mysql://localhost:3306/UnifiedDashboards", "root", "");
//function to get data from the db
function bloggerData() {
    //db query to get month and the pageviews data set from db
    var query_blogger_data = "SELECT * FROM test;";
    var bloggerDataSet = db.query(query_blogger_data);     
    print(bloggerDataSet);
    return bloggerDataSet;
}
bloggerData();
db.close();
%>

This API returns the dataset from external db.

Here I make API call via POST method in javascript code. And then in the success function I convert the data set in to JSON format and bind the data set with the graph.The code snippet is as follows.

$.post("/portal/controllers/apis/api/testAPI.jag", function (dataSet) {

var data=JSON.parse(dataSet);

dataBind(data);

});

Now you need to create the gadget to visualize these data. You can follow the steps in [2] to create the gadget.

You can download sample gadget [3] which I implemented. Here I used a third party library[4] to draw the graph.

Flow Chart Diagram of the Gadget.