Adding Charts to D2 Part 1

I’ve been experimenting with Google Charts to add some color to our D2 screens.  This is a good choice when building adding a dashboard widget to the 8 useful items to include on your D2 Welcome Page.  The eDRG reporting does nicely add charts and reports, but in this example, I will use the Google Charts   This also allows the developer to add additional functionality as needed.

This post will be in 3 parts:

  1. Creating a simple Google charts widget
  2. Adding call-backs to view documents when clicked
  3. Code walk-through

The widget requirements are pretty simple:

  1. This should act like a normal D2 custom widget, creating a session.
  2. The widget should automatically build a chart without the user requesting the chart be run.
  3. The query for the chart should be in a configuration file.  The configuration
  4. The chart should be clickable, which will update the document list.

…in the comments, please add more requirements, perhaps I will add a future release of the charts widget.

To implement Google charts in D2, we will need both Java and HTML, for simplicity, I am using a JSP file now.

The steps will be to do the following:

  1. Build the rest of the Google chart HTML.
  2. Get the parameters from the URL, retrieve the configuration, and get a session.
  3. Execute the query using the session building a data set for the Google chart javascript to use.

1.  Build the basic HTML

we start with the simple HTML from Google.

https://developers.google.com/chart/interactive/docs/gallery/piechart

Keep track of this link in case Google charts change, or you use a different charting tool

Using JSP, we will build this section on the fly:

var data = google.visualization.arrayToDataTable([
[‘Task’, ‘Hours per Day’],
[‘Work’,     11],
[‘Eat’,      2],
[‘Commute’,  2],
[‘Watch TV’, 2],
[‘Sleep’,    7]
]);

var options = {
title
: ‘My Daily Activities’
};

Of course this could be done with a separate REST call, which would make sense if you give the user other UI elements to pick different charts or drill down capabilities.

2. Get Parameters, get a session,

The D2 widget configuration will pass parameters like this:

?docbase=$DOCBASE&username=$LOGIN&password=$TICKET&config=status_pie

After getting the parameters from the URL, the widget will get configuration items.  For this simple example, they are stored in a .properties file, which the system grabs from WEB-INF.  Alternatively, it could get the information on the URL or from an object in the repository.

The config properties file will have the title, query, the chart type, and any other information we might need in the future:

title=Docuemnt Status Counts
query=select a_status as param1,count(*) as cnt from dm_document where a_status != '' group by a_status

3. Execute the Query

As we go though the results of the query, we output

DfQuery query = new DfQuery();
query.setDQL(sQuery);
IDfCollection colObjects = query.execute(idfSession,DfQuery.DF_READ_QUERY);

boolean isFirst = true;

while (colObjects.next()) {
    String value = colObjects.getString("param1");
    String count = colObjects.getString("cnt");
    if (!isFirst) {
        out.print(",");
        }
    out.println("['" + value + "'," + count + "]");
    isFirst = false;
    }
colObjects.close();
idfSession.disconnect();

and

 var options = {
          title: '<%=title%>'
        };

This chart is only good for pie charts, but we can add other chart types.

Go to Part 2 — update the doclist widget.

 

 

Advertisements

2 thoughts on “Adding Charts to D2 Part 1”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s