Changeset 2129

Show
Ignore:
Timestamp:
09-12-11 18:31:48 (2 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 modified

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/*