Looking for a data visualization framework

Question

(I know there are post about data visualization, but none of them completely answered my question.)

I am looking for a tool to generate charts from data. I want to tool that is be able to do some computation for me, not only show the data a nice way.

For example here is data from tests I run:

{
    "destination" : "30be317c-e586-4448-8fed-1a9481710670",
    "source" : "30be317c-e586-4448-8fed-1a9481710670",
    "userStatus" : "UNDEF",
    "testName" : "VolumeUp",
    "testStatus" : "WORKED",
    "testStart" : 1323378809108,
    "testEnd" : 1323378809108
}, {
    "destination" : "30be317c-e586-4448-8fed-1a9481710670",
    "source" : "30be317c-e586-4448-8fed-1a9481710670",
    "userStatus" : "FAILED",
    "testName" : "VolumeDown",
    "testStatus" : "FAILED",
    "testStart" : 1323378814065,
    "testEnd" : 1323378816077
}

Note this is currently in JSON, but I can transform it to XML or push it to a database if needed.

What I would like to have is a way to tell the tool:

Create a table with:

• Column one: number of "testStatus" : "WORKED"
• Column two: number of "testStatus" : "FAILED"
• Column three: percentage between one and two.
• Rows: "testName"
• Show the percentage higher than 90% in green

The calculations remain very basic. I did some research and found tools that do it (JasperReport, SpagoBI, RapidMiner) but all of them seem to be too much of a pain to generate easy reports like mine.

Is there a tool/framework that could help me doing that? Or will I have to do the calculations by myself and use a tool like Google Visualization API to show the output?

Thanks

Answer 1

I would take a look at JavaScript libraries like Sencha (ext-JS).

Check out their documentation: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel

You can define a store with your data using the json format. You can add a field to your store based on the value of each record. If you need to have this value relative to all the others as percentile, you can listen to the 'load' event and traverse the records to calculate this 'high'/'low' value.

Ext.create('Ext.data.Store', {
  storeId:'myStore',
  fields:['destination', 'source', 'testName', 'testStatus', 'testStart', 'testEnd'],
  data:{'items':[
    // ... your data here
  ]},
  proxy: {
    type: 'memory',
    reader: {
        type: 'json',
        root: 'items'
    }
  }
});

Then you can create a grid view of your data, using any of their built-in views. You can define Renderer that will add a class with the calculated value. Using simple CSS you can color each class with a different color.

Ext.create('Ext.grid.Panel', {
  title: 'My Data',
  store: Ext.data.StoreManager.lookup('myStore'),
  columns: [
    { header: 'Test Name',  dataIndex: 'testName' },
    { header: 'Value', 
       dataIndex: 'calculatedValue', 
       renderer: function(value) {
        return Ext.String.format('<span class="{0}">{1}</span>', value, value);
       } 
    },
    // Other columns
  ],
  height: 200,
  width: 400,
  renderTo: Ext.getBody()
});