Changeset 2135


Ignore:
Timestamp:
Dec 22, 2011, 12:43:23 PM (11 years ago)
Author:
tjeerd@…
Message:

VIS-75 and VIS-33, most boxplot issues should be resolved now

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/views/visualize/index.gsp

    r2133 r2135  
    66       
    77        <!--[if lt IE 9]><g:javascript src="jqplot/excanvas.min.js" /><![endif]-->
    8         <g:javascript src="jqplot/jquery.jqplot.js" />
     8        <g:javascript src="jqplot/jquery.jqplot.min.js" />
    99        <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='jquery.jqplot.min.css' />" />
    1010       
  • trunk/web-app/js/jqplot/plugins/jqplot.boxplotRenderer.js

    r2133 r2135  
    3535   
    3636    // called with scope of series.
    37     $.jqplot.BoxplotRenderer.prototype.init = function(options) {
     37    $.jqplot.BoxplotRenderer.prototype.init = function(options, plot) {
     38
     39        plot.postDrawHooks.add($.jqplot.BoxplotRenderer.removePointerLabels);
     40
    3841        this.lineWidth = options.lineWidth || this.renderer.lineWidth;
    3942        $.jqplot.LineRenderer.prototype.init.call(this, options);
     
    6164        var d = this.data;
    6265        var r = this.renderer;
     66        // set the shape renderer options
    6367        var xp = this._xaxis.series_u2p;
    6468        var yp = this._yaxis.series_u2p;
     
    7377        var endW = boxW / 2; // min and max ticks are half the box width
    7478        boxW -= this.lineWidth*2;
     79
     80        var sctx = this.canvas._ctx;
     81
    7582        ctx.save();
    7683        if (this.show) {
    7784            for (var i=0, di=d[i]; i<d.length; di=d[++i]) {
    7885               var  x = xp(di[0]),
    79                   min = yp(di[6]),
    80                    q1 = yp(di[5]),
    81                   med = yp(di[4]),
    82                    q3 = yp(di[3]),
    83                   max = yp(di[2]);
     86                  min = yp(di[7]),
     87                   q1 = yp(di[6]),
     88                  med = yp(di[5]),
     89                   q3 = yp(di[4]),
     90                  max = yp(di[3]);
    8491
    85                 var endL = x - endW/2; // start (left) x coord of min/max ticks
    86                 var endR = x + endW/2; // end (right) x coord of min/max ticks
    87                 var medL = x - boxW/2; // start (left) x coord of median tick
    88                 var medR = x + boxW/2; // end (right) x coord of median tick
     92               var endL = x - endW/2; // start (left) x coord of min/max ticks
     93               var endR = x + endW/2; // end (right) x coord of min/max ticks
     94               var medL = x - boxW/2; // start (left) x coord of median tick
     95               var medR = x + boxW/2; // end (right) x coord of median tick
    8996
    90                 // median tick is full box width
    91                 r.shapeRenderer.draw(ctx, [[medL, med], [medR, med]], options);
     97               // median tick is full box width
     98               r.shapeRenderer.draw(ctx, [[medL, med], [medR, med]], options);
    9299               
    93                 // draw whiskers
    94                 r.shapeRenderer.draw(ctx, [[x, min], [x, q1]], options);
    95                 r.shapeRenderer.draw(ctx, [[x, q3], [x, max]], options);
     100               // draw whiskers
     101               r.shapeRenderer.draw(ctx, [[x, min], [x, q1]], options);
     102               r.shapeRenderer.draw(ctx, [[x, q3], [x, max]], options);
    96103
    97                 // draw min and max ticks
    98                 r.shapeRenderer.draw(ctx, [[endL, min], [endR, min]], options);
    99                 r.shapeRenderer.draw(ctx, [[endL, max], [endR, max]], options);
     104               // draw min and max ticks
     105               r.shapeRenderer.draw(ctx, [[endL, min], [endR, min]], options);
     106               r.shapeRenderer.draw(ctx, [[endL, max], [endR, max]], options);
    100107
    101                 // draw box
    102                 boxH = q1 - q3;
    103                 boxpoints = [medL, q3, boxW, boxH];
    104                 r.shapeRenderer.draw(ctx, boxpoints, boxopts);
     108               // draw box
     109               boxH = q1 - q3;
     110               boxpoints = [medL, q3, boxW, boxH];
     111               r.shapeRenderer.draw(ctx, boxpoints, boxopts);
    105112            }
    106113        }
     
    112119    };
    113120   
    114     // called with scope of plot.
    115     $.jqplot.BoxplotRenderer.checkOptions = function(target, data, options) {
    116         // provide some sensible highlighter options by default
    117         console.log("checkOptions");
    118         hldefaults = {
    119             showMarker: true,
    120             tooltipAxes: 'y',
    121             yvalues: 7,
    122             formatString: '<table class="jqplot-highlighter">' +
    123                           '<tr><td>Maximum:</td><td>%s</td></tr>' +
    124                           '<tr><td>Median + 1.5*IQR:</td><td>%s</td></tr>' +
    125                           '<tr><td>Q3:</td><td>%s</td></tr>' +
    126                           '<tr><td>Median:</td><td>%s</td></tr>' +
    127                           '<tr><td>Q1:</td><td>%s</td></tr>' +
    128                           '<tr><td>Median - 1.5*IQR:</td><td>%s</td></tr>' +
    129                           '<tr><td>Minimum:</td><td>%s</td></tr>' +
    130                           '</table>'
    131             };
    132         if (!options.highlighter)
    133             options.highlighter = {show: true};
    134         if (options.highlighter.show) {
    135             for (opt in hldefaults) {
    136                 if (!(opt in options.highlighter)) {
    137                     options.highlighter[opt] = hldefaults[opt];
    138                 }
    139             }
    140         }
    141         if (!options.axesDefaults.pad) {
    142             options.axesDefaults.pad = 1;
    143         }
    144     };
     121    $.jqplot.BoxplotRenderer.removePointerLabels = function() {
     122        $(".jqplot-point-label").each(function() {
     123           $(this).hide();
     124        });
     125    }
    145126   
    146     $.jqplot.preInitHooks.push($.jqplot.BoxplotRenderer.checkOptions);
     127
    147128   
    148129})(jQuery);
  • trunk/web-app/js/visualization.js

    r2129 r2135  
    268268                            dataPoints[ dataPoints.length ] = newArr;
    269269                        } else if(returnData.type=="boxplot")  {
    270                             dataPoints[ dataPoints.length ] = element.y;
     270                            var tempArr = element.y;
     271                            tempArr = [tempArr[0],tempArr[4],tempArr[1],tempArr[2],tempArr[3],tempArr[4],tempArr[5],tempArr[6],tempArr[7]];
     272                            dataPoints[ dataPoints.length ] = tempArr;
    271273                        } else {
    272274                            dataPoints[ dataPoints.length ] = element.y;
     
    546548                            }*/,
    547549                            highlighter: {
    548                                 show: !blnShowDataValues,
    549                                 sizeAdjust: 7.5
     550                                show: true,
     551                                sizeAdjust: 7.5,
     552                                showMarker: true,
     553                                tooltipAxes: 'y',
     554                                yvalues: 8,
     555                                formatString: '<table class="jqplot-highlighter dummy%s">' +
     556                                              '<tr><td>Maximum:</td><td>%s</td></tr>' +
     557                                              '<tr><td>Median + 1.5*IQR:</td><td>%s</td></tr>' +
     558                                              '<tr><td>Q3:</td><td>%s</td></tr>' +
     559                                              '<tr><td>Median:</td><td>%s</td></tr>' +
     560                                              '<tr><td>Q1:</td><td>%s</td></tr>' +
     561                                              '<tr><td>Median - 1.5*IQR:</td><td>%s</td></tr>' +
     562                                              '<tr><td>Minimum:</td><td>%s</td></tr>' +
     563                                              '</table>'
    550564                            },
    551565                            axesDefaults: {
     
    591605                        bx.draw();
    592606                    } */ else  {
    593                         console.log(dataPoints);
     607                        //console.log(dataPoints);
    594608                        visualization = $.jqplot('visualization', dataPoints, plotOptions );
    595609                    }
Note: See TracChangeset for help on using the changeset viewer.