Changeset 2124


Ignore:
Timestamp:
Dec 5, 2011, 3:02:01 PM (5 years ago)
Author:
tjeerd@…
Message:

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

Location:
trunk
Files:
3 added
4 edited

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);
Note: See TracChangeset for help on using the changeset viewer.