Generate charts from data in java webapp

Question

i am working on a project in which we pass data to table through hibernate.and there's a dashboard on top of this through which we can see through charts how many exceptions are there in data or how many number of same events are there in data. and we should be able to change chart view also. for example last 1 hour. last day. last week etc. my table looks like this.

event
-----------------
id,      created,     updated,    event_type,     source_machine
1       07.05.2011                  event1                machine1
2       07.05.2011                  event2                machine2 
3       07.05.2011             NullPointerException       machine2 
4       06.05.2011                  event2                machine2
5       06.05.2011                  event1                machine1
6       05.05.2011                  event2                machine1
7       04.05.2011                  event1                machine2
*Currently, table has 10k rows.

i am not sure what kind of framework/library would be the best to use for this purpose.i have given a thought to highcharts and Jasperreports for this but i am totally new to both of them.

FYI : we are using Spring Framework for the project.

any help would be apprecieated.

Answer 1

There are number of javascript graphing libraries available which expects input in JSON format. I have used CanvasJS, RGraph, jqPlot, Morris.js , Chartist etc. It should be straight forward to return the json formatted list of labels and values for x and y axis.

Example RGraph ajax for line graph looks like,

  var tips = ['19','59','20','30','10','12','23'];

     // Now draw the chart
     var line = new RGraph.Line({
         id: 'lineChart',
         data: json.data,
         options: {
             textAccessible: true,
             hmargin: 10,
             linewidth: 2,
             shadow: true,
             ymax: 100,
             labels: json.label,
             tooltips: tips,
             gutterLeft: 35,
             title:"Job Cards created this week by dealers"
         }
     }).draw();

json.data is the y-axis data and json.label is the x-axis value. See the demos/basic-ajax-json.html example in the RGraph download and the json format below.

Download RGraph here: https://www.rgraph.net/download.html#stable

Go to http://www.rgraph.net/getdata.html?json to see the json format like,

{data:[83,68,14,88,75,18,64,22,63,79], labels: ['Gary','Olga','Lewis','Rachel','Nathan','Matt','Kevin','Indigo','Lou','Pete']}

The above content you have to return from the Spring controller as JSON format.

Other libraries also have more or less the same concept for ajax based graphs.

Answer 2

for the help of someone having similar question here i am posting my solution... i have done this as following....used highcharts for this... passing json and division where i want to create chart as a function parameter here...this one uses highstocks.js

function drawChart(json, div, type, resultType) {
if($.isEmptyObject(json)){
    $('#' + div).html("No Data Available for this Timeframe! try again with different Timeframe!.");
}
else{
    var processed_json = new Array();
    $.map(json, function(obj, i) {
        processed_json.push({
            name : obj.key,
            y : parseInt(obj.value),
            customName : obj.name
        });
    });
    len = processed_json.length;
    len = len < 25 ? len : 25;
    $('#' + div).highcharts(
            {
                chart : {
                    type : type,
                    credits:{enabled: false}
                },
                plotOptions : {
                    pie : {size: 700,
                        point : {
                            events : {
                                legendItemClick : function() {
                                     this.select();
                                       chart.tooltip.refresh(this); 
                                    return true; // <== returning false will cancel the default action i.e remove legends from chart
                                }
                            }
                        },
                        allowPointSelect : true,
                        cursor : 'pointer',
                        dataLabels : {
                            "overflow": "justify",
                            enabled : true,
                            style: {
                                width: '100px'
                            }
                        },
                        showInLegend : true
                    }
                },
                title : {
                    text : 'Metric Performance Analysis',
                    floating : true,
                    align : 'right',
                    x : -30,
                    y : 30
                },
                xAxis : {
                    type : "category",
                    title: {
                        enabled: true,
                        text: '<b> Date </b>',
                        style: {
                            fontWeight: 'normal'
                        }
                    },
                    labels: {
                        rotation: -90,
                        style: {
                            fontSize: '12px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    },
                    max : len
                },
                yAxis: {
                    title: {
                        enabled: true,
                        text: '<b>'+resultType+'</b>',
                        style: {
                            fontWeight: 'normal'
                        }
                    }
                },
                scrollbar: {
                    enabled: true,
                    barBackgroundColor: 'gray',
                    barBorderRadius: 7,
                    barBorderWidth: 0,
                    buttonBackgroundColor: 'gray',
                    buttonBorderWidth: 0,
                    buttonArrowColor: 'yellow',
                    buttonBorderRadius: 7,
                    rifleColor: 'yellow',
                    trackBackgroundColor: 'white',
                    trackBorderWidth: 1,
                    trackBorderColor: 'silver',
                    trackBorderRadius: 7
                },
                tooltip : {
                    formatter : function() {
                        return '<b> '+resultType+': </b>' + this.point.y
                                + '<br/><b>Date: </b>' + this.point.name
                                + ' <br><b> Metric: </b>'
                                + this.point.customName;
                    }
                },
                series : [ {
                    name : "Data",
                    turboThreshold : 0,
                    data : processed_json
                } ]
            });
}

}

Answer 3

This isn't a java based solution, but I would recommend looking at D3.js.

It's pretty sweet.