Changeset 2135

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:

• grails-app/views/visualize/index.gsp (modified) (1 diff)
• web-app/js/jqplot/plugins/jqplot.boxplotRenderer.js (modified) (4 diffs)
• web-app/js/visualization.js (modified) (3 diffs)

trunk/grails-app/views/visualize/index.gsp

@@ -6 +6 @@
         
         <!--[if lt IE 9]><g:javascript src="jqplot/excanvas.min.js" /><![endif]-->
-        <g:javascript src="jqplot/jquery.jqplot.js" />
+        <g:javascript src="jqplot/jquery.jqplot.min.js" />
         <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='jquery.jqplot.min.css' />" />
         

trunk/web-app/js/jqplot/plugins/jqplot.boxplotRenderer.js

@@ -35 +35 @@
     
     // called with scope of series.
-    $.jqplot.BoxplotRenderer.prototype.init = function(options) {
+    $.jqplot.BoxplotRenderer.prototype.init = function(options, plot) {
+
+        plot.postDrawHooks.add($.jqplot.BoxplotRenderer.removePointerLabels);
+
         this.lineWidth = options.lineWidth || this.renderer.lineWidth;
         $.jqplot.LineRenderer.prototype.init.call(this, options);
@@ -61 +64 @@
         var d = this.data;
         var r = this.renderer;
+        // set the shape renderer options
         var xp = this._xaxis.series_u2p;
         var yp = this._yaxis.series_u2p;
@@ -73 +77 @@
         var endW = boxW / 2; // min and max ticks are half the box width
         boxW -= this.lineWidth*2;
+
+        var sctx = this.canvas._ctx;
+
         ctx.save();
         if (this.show) {
             for (var i=0, di=d[i]; i<d.length; di=d[++i]) {
                var  x = xp(di[0]),
-                  min = yp(di[6]),
-                   q1 = yp(di[5]),
-                  med = yp(di[4]),
-                   q3 = yp(di[3]),
-                  max = yp(di[2]);
+                  min = yp(di[7]),
+                   q1 = yp(di[6]),
+                  med = yp(di[5]),
+                   q3 = yp(di[4]),
+                  max = yp(di[3]);
 
-                var endL = x - endW/2; // start (left) x coord of min/max ticks
-                var endR = x + endW/2; // end (right) x coord of min/max ticks
-                var medL = x - boxW/2; // start (left) x coord of median tick
-                var medR = x + boxW/2; // end (right) x coord of median tick
+               var endL = x - endW/2; // start (left) x coord of min/max ticks
+               var endR = x + endW/2; // end (right) x coord of min/max ticks
+               var medL = x - boxW/2; // start (left) x coord of median tick
+               var medR = x + boxW/2; // end (right) x coord of median tick
 
-                // median tick is full box width
-                r.shapeRenderer.draw(ctx, [[medL, med], [medR, med]], options);
+               // median tick is full box width
+               r.shapeRenderer.draw(ctx, [[medL, med], [medR, med]], options);
                 
-                // draw whiskers
-                r.shapeRenderer.draw(ctx, [[x, min], [x, q1]], options);
-                r.shapeRenderer.draw(ctx, [[x, q3], [x, max]], options);
+               // draw whiskers
+               r.shapeRenderer.draw(ctx, [[x, min], [x, q1]], options);
+               r.shapeRenderer.draw(ctx, [[x, q3], [x, max]], options);
 
-                // draw min and max ticks
-                r.shapeRenderer.draw(ctx, [[endL, min], [endR, min]], options);
-                r.shapeRenderer.draw(ctx, [[endL, max], [endR, max]], options);
+               // draw min and max ticks
+               r.shapeRenderer.draw(ctx, [[endL, min], [endR, min]], options);
+               r.shapeRenderer.draw(ctx, [[endL, max], [endR, max]], options);
 
-                // draw box
-                boxH = q1 - q3;
-                boxpoints = [medL, q3, boxW, boxH];
-                r.shapeRenderer.draw(ctx, boxpoints, boxopts);
+               // draw box
+               boxH = q1 - q3;
+               boxpoints = [medL, q3, boxW, boxH];
+               r.shapeRenderer.draw(ctx, boxpoints, boxopts);
             }
         }
@@ -112 +119 @@
     };
     
-    // called with scope of plot.
-    $.jqplot.BoxplotRenderer.checkOptions = function(target, data, options) {
-        // provide some sensible highlighter options by default
-        console.log("checkOptions");
-        hldefaults = {
-            showMarker: true,
-            tooltipAxes: 'y',
-            yvalues: 7,
-            formatString: '<table class="jqplot-highlighter">' +
-                          '<tr><td>Maximum:</td><td>%s</td></tr>' +
-                          '<tr><td>Median + 1.5*IQR:</td><td>%s</td></tr>' +
-                          '<tr><td>Q3:</td><td>%s</td></tr>' +
-                          '<tr><td>Median:</td><td>%s</td></tr>' +
-                          '<tr><td>Q1:</td><td>%s</td></tr>' +
-                          '<tr><td>Median - 1.5*IQR:</td><td>%s</td></tr>' +
-                          '<tr><td>Minimum:</td><td>%s</td></tr>' +
-                          '</table>'
-            };
-        if (!options.highlighter)
-            options.highlighter = {show: true};
-        if (options.highlighter.show) {
-            for (opt in hldefaults) {
-                if (!(opt in options.highlighter)) {
-                    options.highlighter[opt] = hldefaults[opt];
-                }
-            }
-        }
-        if (!options.axesDefaults.pad) {
-            options.axesDefaults.pad = 1;
-        }
-    };
+    $.jqplot.BoxplotRenderer.removePointerLabels = function() {
+        $(".jqplot-point-label").each(function() {
+           $(this).hide();
+        });
+    }
     
-    $.jqplot.preInitHooks.push($.jqplot.BoxplotRenderer.checkOptions);
+
     
 })(jQuery);

trunk/web-app/js/visualization.js

@@ -268 +268 @@
                             dataPoints[ dataPoints.length ] = newArr;
                         } else if(returnData.type=="boxplot")  {
-                            dataPoints[ dataPoints.length ] = element.y;
+                            var tempArr = element.y;
+                            tempArr = [tempArr[0],tempArr[4],tempArr[1],tempArr[2],tempArr[3],tempArr[4],tempArr[5],tempArr[6],tempArr[7]];
+                            dataPoints[ dataPoints.length ] = tempArr;
                         } else {
                             dataPoints[ dataPoints.length ] = element.y;
@@ -546 +548 @@
                             }*/,
                             highlighter: {
-                                show: !blnShowDataValues,
-                                sizeAdjust: 7.5
+                                show: true,
+                                sizeAdjust: 7.5,
+                                showMarker: true,
+                                tooltipAxes: 'y',
+                                yvalues: 8,
+                                formatString: '<table class="jqplot-highlighter dummy%s">' +
+                                              '<tr><td>Maximum:</td><td>%s</td></tr>' +
+                                              '<tr><td>Median + 1.5*IQR:</td><td>%s</td></tr>' +
+                                              '<tr><td>Q3:</td><td>%s</td></tr>' +
+                                              '<tr><td>Median:</td><td>%s</td></tr>' +
+                                              '<tr><td>Q1:</td><td>%s</td></tr>' +
+                                              '<tr><td>Median - 1.5*IQR:</td><td>%s</td></tr>' +
+                                              '<tr><td>Minimum:</td><td>%s</td></tr>' +
+                                              '</table>'
                             },
                             axesDefaults: {
@@ -591 +605 @@
                         bx.draw();
                     } */ else  {
-                        console.log(dataPoints);
+                        //console.log(dataPoints);
                         visualization = $.jqplot('visualization', dataPoints, plotOptions );
                     }