Google visualization Tips & Tricks

Google visualization is great for adding interactive charts to a web application. I used it extensively in one of my projects and I ended up using a couple of tricks to improve its performance and appearance.

Show a loading animation

Showing a loading animation while the visualization library is loading, is incredibly easy. All you have to do is insert a .gif image into each div that is a target for a chart. After the library has loaded and the draw method is called, it will automatically replace anything that was placed inside the target div with the chart.

<div id="chart_div">
    <img src="loading.gif">
</div>

Autoloading

The autoload feature in google javascript api is great for reducing loading time when you need a specific library, in this case, visualization. Instead of calling google.load after loading the js api you can specify which modules you need.

<script src="http://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart", "table", "annotatedtimeline"]}]}"></script>

Lazy loading

At one point I had to load three visualization packages on one page to show a dashboard with many charts. As a result the size and loading time of the javascript library became considerably large. So I came up with a trick that does not actually reduce the loading time but it lets you load the modules sequentially so you can display some charts while the others are loading. The trick is to load only one package in the first autoload call. And when the callback method of the first request is called you can draw the charts of that packages and then call google.load to load the remaining packages. So instead of specifying all three packages like in the above example you should only specify one. And when the callback is called you can load the other packages lazily.

google.setOnLoadCallback(drawChart);

function drawCharts() {

    drawCoreCharts();

    google.load('visualization', '1.0', {'packages':['gauge'], 'callback': 'drawGauge'});

}

 

Blank page problem with WAMP server

If you have just installed WAMP server and you get a blank page at http://localhost/ it could be because of one of these problems…

1. Port 80 used by another service

This is the most common cause for this problem. Click WAMP icon in the taskbar –>Select Apache –> Service –> Test Port 80. This will check the availability of the port 80 on your system. If the port is occupied by some other service you will have to close that service or move it to another port and select “Restart all services” from WAMP menu. In my case it was occupied by Skype.

2. localhost not defined

If the port is free and you still see a blank page, try http://127.0.0.1/ instead of http://localhost/

Java sample client for Bugzilla webservice API

I recently had to use bugzilla's webservice API in a Java based project. And I was surprised to see that there was almost no sample code available for using bugzilla's webservice API especially for Java. So in the end I used the XmlRpcClient provided by Apache. Here's the sample code...

private XmlRpcClient getClient(String serverURL) {

    try {

        String apiURL = serverURL + "xmlrpc.cgi";

        XmlRpcClient rpcClient;

        XmlRpcClientConfigImpl config;

        config = new XmlRpcClientConfigImpl();

        config.setServerURL(new URL(apiURL));

        rpcClient = new XmlRpcClient();

        rpcClient.setConfig(config);

        return rpcClient;

    } catch (MalformedURLException e) {

        e.printStackTrace();

    }

    return null;

}

public HashMap login(String serverURL, String login, String password) {

    try {

        XmlRpcClient rpcClient = getClient(serverURL);

        ArrayList<Object> params = new ArrayList<Object>();

        Hashtable<String, Object> executionData = new Hashtable<String, Object>();

        executionData.put("login", login);

        executionData.put("password", password);

        executionData.put("remember", true);

        params.add(executionData);

        HashMap result = (HashMap) rpcClient.execute("User.login", params);

        System.out.println(result);

        return result;

    } catch (XmlRpcException e) {

        e.printStackTrace();

    }

    return null;

}

Here are the maven dependencies required by this code…

<repository>

    <id>mvnrepository</id>

    <url>http://mvnrepository.com/artifact/</url>

</repository>

<dependency>

    <groupId>org.apache.xmlrpc</groupId>

    <artifactId>xmlrpc-client</artifactId>

    <version>3.1.3</version>

</dependency>

<dependency>

    <groupId>org.apache.xmlrpc</groupId>

    <artifactId>xmlrpc-common</artifactId>

    <version>3.1.3</version>

</dependency>

<dependency>

    <groupId>ws-commons-util</groupId>

    <artifactId>ws-commons-util</artifactId>

    <version>1.0.1</version>

</dependency>

Or if you don’t use maven you can just download these libraries form Apache’s website…

1. xmlrpc-client
   
   
2. xmlrpc-common
   
   
3. ws-commons-util

The complete documentation for Bugzilla API is available here...

http://www.bugzilla.org/docs/tip/en/html/api/index.html