Changeset 2124

Show
Ignore:
Timestamp:
05-12-11 15:02:01 (2 years ago)
Author:
tjeerd@…
Message:

VIS-33, first attempt. Using CanvasXpress? for the boxplots

Location:
trunk
Files:
3 added
4 modified

Legend:

Unmodified
Added
Removed
  • trunk/application.properties

    r2120 r2124  
    11#Grails Metadata file 
    2 #Mon Sep 19 16:27:26 CEST 2011 
     2#Mon Dec 05 09:39:07 CET 2011 
    33app.build.display.info=1 
    44app.build.svn.revision=1079 
  • trunk/grails-app/controllers/dbnp/visualization/VisualizeController.groovy

    r2114 r2124  
    15671567        } else {        // NUMERICALDATA 
    15681568            if(columnType == CATEGORICALDATA || columnType == DATE || columnType == RELTIME){ 
    1569                 types = [ [ "id": "barchart", "name": "Barchart"], [ "id": "linechart", "name": "Linechart"] ]; 
     1569                types = [ [ "id": "barchart", "name": "Barchart"], [ "id": "linechart", "name": "Linechart"], [ "id": "boxplot", "name": "Boxplot"] ]; 
    15701570            } else { 
    15711571                types = [ [ "id": "scatterplot", "name": "Scatterplot"], [ "id": "linechart", "name": "Linechart"] ]; 
  • trunk/grails-app/views/visualize/index.gsp

    r2119 r2124  
    1818    <g:javascript src="jqplot/plugins/jqplot.ohlcRenderer.min.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" /> 
    2024 
    2125        <g:javascript src="visualization.js" /> 
     
    100104                                <label for="vis_scatterplot">Scatterplot</label><input type="radio" name="types" id="vis_scatterplot" value="scatterplot" onClick="changeRadio(this);"/> 
    101105                                <label for="vis_table">Table</label><input type="radio" name="types" id="vis_table" value="table" onClick="changeRadio(this);"/> 
     106                                <label for="vis_boxplot">Boxplot</label><input type="radio" name="types" id="vis_boxplot" value="boxplot" onClick="changeRadio(this);"/> 
    102107                            </div> 
    103108                        </div> 
  • trunk/web-app/js/visualization.js

    r2123 r2124  
    183183            .find(".menu_header_count") 
    184184            .switchClass("menu_fill", "menu_done", 1000); 
    185         currAggr = $(that).id; 
     185        currAggr = $(that).val(); 
     186 
     187        if(currAggr!="none") { 
     188            $("#vis_boxplot").attr("disabled","disabled"); 
     189            if(currType=="boxplot") { 
     190                $("#vis_boxplot").attr("checked",false); 
     191            } 
     192        } else { 
     193            $("#vis_boxplot").attr("disabled",false); 
     194        } 
    186195    } else { 
    187196        $( "#select_types" ) 
     
    189198            .find(".menu_header_count") 
    190199            .switchClass("menu_fill", "menu_done", 1000); 
    191         currType = $(that).id; 
     200        currType = $(that).val(); 
     201 
     202        if($(that).val()=="boxplot") { 
     203            $( "#select_aggregation input[value=none]" ).attr("checked","checked"); 
     204            $( "#select_aggregation" ) 
     205                .parents(".menu_header") 
     206                .find(".menu_header_count") 
     207                .switchClass("menu_fill", "menu_done", 1000); 
     208            currAggr = "none"; 
     209        } 
    192210    } 
    193211 
     
    233251                var dataPoints = new Array(); 
    234252                var series = []; 
     253                 
     254                //data = {"returnData":{"type":null,"xaxis":{"title":"Gender","unit":"","type":"categorical"},"yaxis":{"title":"Weight","unit":"kg","type":"numerical"},"groupaxis":{"title":null,"unit":null,"type":"numerical"},"series":[{"name":"count","x":["Male","Male","Female","Male","Male","Male","Male","Male","Female","Female","Female"],"y":[1,2,3,4,2,2,3,1,2,3,5]}]}} 
    235255 
    236256                var returnData = data.returnData; 
     
    274294                var strLegendPlacement = $("#legendplacement").attr("checked")=="checked" && blnShowLegend ? "outsideGrid" : "insideGrid"; 
    275295                var xangle = $("#anglelabels").attr("checked")=="checked" ? -45 : 0; 
     296 
     297                returnData.type = "boxplot"; 
    276298 
    277299                switch( returnData.type ) { 
     
    481503                        plotOptions = table; 
    482504                                break; 
     505                    case "boxplot": 
     506                        var arrSmps = new Array(); 
     507                        for(i=0; i<returnData.series[0].x.length; i++) { 
     508                            arrSmps[i] = "Smp"+i; 
     509                        } 
     510                        plotOptions = { 
     511                              x: {xdata: returnData.series[0].x}, 
     512                              y: {vars:  ['blabla'], 
     513                                   smps:  arrSmps, 
     514                                   desc:  [ylabel], 
     515                                   data:  [returnData.series[0].y] 
     516                                 } 
     517                        }; 
     518                        var plotOptions2 = { 
     519                            graphType: 'Boxplot', 
     520                            graphOrientation: 'vertical', 
     521                            showDataValues: true, 
     522                            //title: 'Boxplots', 
     523                            maxTextSize: 5, 
     524                            colorScheme: 'basic', 
     525                            blockFactor: 1.5, 
     526                            smpLabelRotate: -xangle, 
     527                            legendBackgroundColor: false, 
     528                            blockSeparationFactor: 2, 
     529                            //showLegend: blnShowLegend 
     530                            showLegend: false 
     531                        }; 
     532                        break; 
    483533                } 
    484534                 
    485535                // If a chart has been created, show it 
    486536                if( plotOptions != null ) { 
    487  
     537                    /* 
    488538                    if(returnData.type!="table") { 
    489539                        if(returnData.xaxis.type=="numerical" && plotOptions.axes.xaxis.renderer==$.jqplot.CategoryAxisRenderer) { 
     
    493543                            delete plotOptions.axes.yaxis.renderer; 
    494544                        } 
    495                     } 
     545                    }*/ 
     546 
     547                    $( "#visualization" ).css("width",$( "#visualization_container" ).innerWidth()-2); 
     548                    $( "#visualization" ).css("height",$( "#visualization_container" ).innerHeight()-2); 
    496549 
    497550                    $( "#visualization" ).empty(); 
    498551                    if(returnData.type=="table") { 
    499552                        $( "#visualization" ).html(plotOptions); 
     553                    } else if(returnData.type=="boxplot") { 
     554                        $( "#visualization" ).html('<canvas id="boxplotcanvas"></canvas>'); 
     555                        $( "#boxplotcanvas" ).css("width",$( "#visualization" ).innerWidth()-2); 
     556                        $( "#boxplotcanvas" ).css("height",$( "#visualization" ).innerHeight()-2); 
     557                        var bx = new CanvasXpress('boxplotcanvas',plotOptions, plotOptions2); 
     558                        bx.groupSamples(['xdata'], 'iqr'); 
     559                        bx.draw(); 
    500560                    } else { 
    501561                        console.log(dataPoints);