Changeset 2129


Ignore:
Timestamp:
Dec 9, 2011, 6:31:48 PM (5 years ago)
Author:
tjeerd@…
Message:

jqPlot boxplot (VIS-33) added. some minor issues remain (see comment of VIS-33)

Location:
trunk
Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/controllers/dbnp/visualization/VisualizeController.groovy

    r2128 r2129  
    386386                data.each { println it }
    387387
    388                                 // Aggregate the data based on the requested aggregation 
     388        // Aggregate the data based on the requested aggregation
    389389                def aggregatedData = aggregateData( data, fieldInfo, inputData.aggregation );
    390390               
     
    803803                                break;
    804804                        case "median":
    805                                 return computeMedian( currentData );
     805                                return computePercentile( currentData, 50 );
    806806                                break;
    807807                        case "sum":
     
    912912                        }
    913913                       
    914                 } else {
     914                } else if(type=="boxplot") {
     915            return_data[ "series" ] = [];
     916            HashMap dataMap = new HashMap();
     917            groupedData[ xAxis ].eachWithIndex { category, i ->
     918                if(!dataMap.containsKey(category)) {
     919                    dataMap.put(category, []);
     920                }
     921                dataMap.put(category, dataMap.get(category)+groupedData[ yAxis ][i]);
     922            }
     923
     924            for ( String key : dataMap.keySet() ) {
     925                double dblMEAN = computeMean(dataMap.get(key));
     926                double dblSEM = computeSEM(dataMap.get(key),dblMEAN);
     927
     928                double Q1 = computePercentile(dataMap.get(key),25).get("value");
     929                double Q3 = computePercentile(dataMap.get(key),75).get("value");
     930
     931                /* DEBUG
     932                println("---");
     933                println("  dataMap["+key+"]:: "+dataMap.get(key));
     934                println("  dblMEAN:: "+dblMEAN);
     935                println("  dblSEM:: "+dblSEM);
     936                println("  Q1:: "+Q1);
     937                println("  Q3:: "+Q3);
     938                println("---");
     939                */
     940
     941                return_data[ "series" ] << [
     942                        "name": key,
     943                        "y" : [key, (dblMEAN-dblSEM), Q1, dblMEAN, Q3, (dblMEAN+dblSEM)]
     944                ];
     945            }
     946
     947            println(return_data);
     948
     949
     950        } else {
    915951                        // For a horizontal barchart, the two axes should be swapped
    916952                        if( type == "horizontal_barchart" ) {
     
    12461282
    12471283    /**
    1248          * Computes the median of the given values. Values that can not be parsed to a number
     1284         * Computes value of a percentile of the given values. Values that can not be parsed to a number
    12491285         * are ignored. If no values are given, null is returned.
    1250          * @param values        List of values to compute the median for
    1251          * @return                      Median of the values
    1252          */
    1253         protected def computeMedian( List values ) {
     1286         * @param values         List of values to compute the percentile for
     1287     * @param Percentile Integer that indicates which percentile to calculae
     1288     *                   Example: Percentile=50 calculates the median,
     1289     *                            Percentile=25 calculates Q1
     1290     *                            Percentile=75 calculates Q3
     1291         * @return                      The value at the Percentile of the values
     1292         */
     1293        protected def computePercentile( List values, int Percentile ) {
    12541294                def listOfValues = [];
    12551295                values.each { value ->
     
    12661306        def objReturn = null;
    12671307
     1308        def dblFactor = Percentile/100;
     1309
    12681310                if( listSize > 0 ) {
    1269             def listHalf = (int) Math.abs(listSize/2);
    1270             if(listSize%2==0) {
    1271                 // If the list is of an even size, take the mean of the middle two value's
     1311            def listHalf = (int) Math.abs(listSize*dblFactor);
     1312            if(listHalf==listSize*dblFactor) {
     1313                // If we don't exactly end up at an item, take the mean of the 2 adjecent values
    12721314                objReturn = (listOfValues.get(listHalf)+listOfValues.get(listHalf-1))/2;
    12731315            } else {
    1274                 // If the list is of an odd size, take the middle value
     1316                // If we exactly end up at an item, take this item
    12751317                objReturn = listOfValues.get(listHalf);
    12761318            }
  • trunk/grails-app/views/visualize/index.gsp

    r2124 r2129  
    1616        <g:javascript src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js" />
    1717    <g:javascript src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js" />
    18     <g:javascript src="jqplot/plugins/jqplot.ohlcRenderer.min.js" />
     18    <g:javascript src="jqplot/plugins/jqplot.boxplotRenderer.js" />
    1919    <g:javascript src="jqplot/plugins/jqplot.highlighter.min.js" />
    20 
    21     <!-- canvasXpress for boxplots -->
    22     <!--[if IE]><g:javascript src="canvasxpress/excanvas.js" /><![endif]-->
    23     <g:javascript src="canvasxpress/canvasXpress.min.js" />
    2420
    2521        <g:javascript src="visualization.js" />
  • trunk/web-app/css/visualization.css

    r2118 r2129  
    33#header{ position: relative; width: 960px; margin: 0 auto; }
    44#header .buildinfo{ display: none;}
    5 div#content { padding-top: 30px; padding-bottom: 0px;}
     5div#content { padding-top: 35px; padding-bottom: 0px;}
    66div#content p {text-align: left;}
    77
  • trunk/web-app/js/visualization.js

    r2125 r2129  
    3838    });
    3939
    40 
     40    $.jqplot.config.enablePlugins = true;
    4141});
    4242
     
    161161                    });
    162162
    163                     if($("#autovis").attr("checked")=="checked") {
    164                         visualize();
    165                     }
     163                    changeVis();
    166164                }
    167165
     
    210208    }
    211209
     210    changeVis();
     211
     212}
     213
     214function changeVis() {
    212215    if($("#autovis").attr("checked")=="checked") {
    213216        visualize();
    214217    }
    215 
    216218}
    217219
     
    243245
    244246                // Handle erroneous data
    245                 if( !checkCorrectData( data.returnData ) ) {
     247                if( !checkCorrectData( data.returnData ) && data.returnData.type!="boxplot" ) {
    246248                    showError( ["Unfortunately the server returned data in a format that we did not expect."], "message_error" );
    247249                    return;
     
    265267                            }
    266268                            dataPoints[ dataPoints.length ] = newArr;
     269                        } else if(returnData.type=="boxplot")  {
     270                            dataPoints[ dataPoints.length ] = element.y;
    267271                        } else {
    268272                            dataPoints[ dataPoints.length ] = element.y;
     
    502506                                break;
    503507                    case "boxplot":
     508                        /* code for canvasXpress
    504509                        var arrSmps = new Array();
    505510                        for(i=0; i<returnData.series[0].x.length; i++) {
     
    519524                            showDataValues: true,
    520525                            //title: 'Boxplots',
    521                             maxTextSize: 5,
     526                            //maxTextSize: 5,
    522527                            colorScheme: 'basic',
    523528                            blockFactor: 1.5,
     
    527532                            //showLegend: blnShowLegend
    528533                            showLegend: false
     534                        };*/
     535                        dataPoints = [dataPoints];
     536
     537                        plotOptions = {
     538                            series: [{
     539                                renderer: $.jqplot.BoxplotRenderer,
     540                                rendererOptions: {
     541
     542                                }
     543                            }]/*,
     544                            seriesDefaults:{
     545                                pointLabels: {show: blnShowDataValues}
     546                            }*/,
     547                            highlighter: {
     548                                show: !blnShowDataValues,
     549                                sizeAdjust: 7.5
     550                            },
     551                            axesDefaults: {
     552                                pad: 1.4
     553                            },
     554                            axes: {
     555                                xaxis: {
     556                                    renderer: $.jqplot.CategoryAxisRenderer,
     557                                    label: xlabel,
     558                                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
     559                                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
     560                                    tickOptions: {
     561                                        angle: xangle
     562                                    }
     563                                },
     564                                yaxis: {
     565                                    min: 0
     566                                }
     567                            }
    529568                        };
    530569                        break;
     
    533572                // If a chart has been created, show it
    534573                if( plotOptions != null ) {
    535                     /*
    536                     if(returnData.type!="table") {
    537                         if(returnData.xaxis.type=="numerical" && plotOptions.axes.xaxis.renderer==$.jqplot.CategoryAxisRenderer) {
    538                             delete plotOptions.axes.xaxis.renderer;
    539                         }
    540                         if(returnData.yaxis.type=="numerical" && plotOptions.axes.yaxis.renderer==$.jqplot.CategoryAxisRenderer) {
    541                             delete plotOptions.axes.yaxis.renderer;
    542                         }
    543                     }*/
    544574
    545575                    $( "#visualization" ).css("width",$( "#visualization_container" ).innerWidth()-2);
     
    547577
    548578                    $( "#visualization" ).empty();
    549                     if(bx!==undefined) {
     579                    /*if(bx!==undefined) {
    550580                        bx.destroy();
    551                     }
     581                    }*/
    552582                   
    553583                    if(returnData.type=="table") {
    554584                        $( "#visualization" ).html(plotOptions);
    555                     } else if(returnData.type=="boxplot") {
     585                    } /* else if(returnData.type=="boxplot") {
    556586                        $( "#visualization" ).html('<canvas id="boxplotcanvas"></canvas>');
    557587                        $( "#boxplotcanvas" ).css("width",$( "#visualization" ).innerWidth()-2);
     
    560590                        bx.groupSamples(['xdata'], 'iqr');
    561591                        bx.draw();
    562                     } else {
     592                    } */ else {
    563593                        console.log(dataPoints);
    564594                        visualization = $.jqplot('visualization', dataPoints, plotOptions );
     
    705735        }, ajaxParameters ) );
    706736}
    707 
    708737
    709738/*
Note: See TracChangeset for help on using the changeset viewer.