Commits

Anonymous committed 862d802

Image exporting of div plot elements now handles text color and text-align. Added classes to table legends to make image exporting easier.

Comments (0)

Files changed (3)

src/jqplot.tableLegendRenderer.js

 
         if (this.showSwatches) {
             td = $(document.createElement('td'));
-            td.addClass('jqplot-table-legend');
+            td.addClass('jqplot-table-legend jqplot-table-legend-swatch');
             td.css({textAlign: 'center', paddingTop: rs});
 
             div0 = $(document.createElement('div'));
+            div0.addClass('jqplot-table-legend-swatch-outline');
             div1 = $(document.createElement('div'));
             div1.addClass('jqplot-table-legend-swatch');
             div1.css({backgroundColor: color, borderColor: color});
         }
         if (this.showLabels) {
             td = $(document.createElement('td'));
-            td.addClass('jqplot-table-legend');
+            td.addClass('jqplot-table-legend jqplot-table-legend-label');
             td.css('paddingTop', rs);
             tr.append(td);
 

src/jqplot.toImage.js

             var css = window.getComputedStyle ?  window.getComputedStyle(el) : el.currentStyle; // for IE < 9
             var left = x_offset + p.left + parseInt(css.marginLeft) + parseInt(css.borderLeftWidth) + parseInt(css.paddingLeft);
             var top = y_offset + p.top + parseInt(css.marginTop) + parseInt(css.borderTopWidth)+ parseInt(css.paddingTop);
+            // var left = x_offset + p.left + $(el).css('marginLeft') + $(el).css('borderLeftWidth') 
 
             if ((tagname == 'div' || tagname == 'span') && !$(el).hasClass('jqplot-highlighter-tooltip')) {
                 $(el).children().each(function() {
 
                 if (text) {
                     newContext.font = $(el).jqplotGetComputedFontStyle();
+                    newContext.fillStyle = $(el).css('color');
+                    // center text if necessary
+                    if ($(el).css('textAlign') === 'center') {
+                        left += (newCanvas.width - newContext.measureText(text).width)/2;
+                    }
                     newContext.fillText(text, left, top);
-                    // For debugging.
-                    //newContext.strokeRect(left, top, $(el).width(), $(el).height());
                 }
             }
+
+            // handle the standard table legend
+
+            else if (tagname === 'table' && $(el).hasClass('jqplot-table-legend')) {
+                newContext.strokeStyle = $(el).css('border-top-color');
+                newContext.fillStyle = $(el).css('background-color');
+                newContext.fillRect(left, top, $(el).innerWidth(), $(el).innerHeight());
+                newContext.strokeRect(left, top, $(el).innerWidth(), $(el).innerHeight());
+
+
+
+                // find all the swatches
+                $(el).find('div.jqplot-table-legend-swatch-outline').each(function() {
+                    // get the first div and stroke it
+                    var elem = $(this);
+                    newContext.strokeStyle = elem.css('border-top-color');
+                    var l = left + elem.position().left;
+                    var t = top + elem.position().top;
+                    newContext.strokeRect(l, t, elem.innerWidth(), elem.innerHeight());
+
+                    // now fill the swatch
+                    
+                    l += parseInt(elem.css('padding-left'));
+                    t += parseInt(elem.css('padding-top'));
+                    var h = elem.innerHeight() - 2 * parseInt(elem.css('padding-top'));
+                    var w = elem.innerWidth() - 2 * parseInt(elem.css('padding-left'));
+
+                    var swatch = elem.children('div.jqplot-table-legend-swatch');
+                    newContext.fillStyle = swatch.css('background-color');
+                    newContext.fillRect(l, t, w, h);
+                });
+
+
+                // now add text
+
+                $(el).find('td.jqplot-table-legend-label').each(function(){
+                    var elem = $(this);
+                    l = left + elem.position().left;
+                    t = top + elem.position().top;
+                    newContext.font = elem.jqplotGetComputedFontStyle();
+                    newContext.fillStyle = elem.css('color');
+                    newContext.fillText(elem.text(), l, t);
+                });
+
+                elem = null;
+            }
+
             else if (tagname == 'canvas') {
                 newContext.drawImage(el, left, top);
             }

src/plugins/jqplot.enhancedLegendRenderer.js

                 nc = 1;
             }
                 
-            var i, j, tr, td1, td2, lt, rs;
+            var i, j, tr, td1, td2, lt, rs, div0, div1;
             var idx = 0;
             // check to see if we need to reverse
             for (i=series.length-1; i>=0; i--) {
             }    
                 
             for (i=0; i<nr; i++) {
+                tr = $(document.createElement('tr'));
+                tr.addClass('jqplot-table-legend');
                 if (reverse){
-                    tr = $('<tr class="jqplot-table-legend"></tr>').prependTo(this._elem);
+                    tr.prependTo(this._elem);
                 }
                 else{
-                    tr = $('<tr class="jqplot-table-legend"></tr>').appendTo(this._elem);
+                    tr.appendTo(this._elem);
                 }
                 for (j=0; j<nc; j++) {
                     if (idx < series.length && series[idx].show && series[idx].showLabel){
                                 }
                             }
                             rs = (pad) ? this.rowSpacing : '0';
+
+                            td1 = $(document.createElement('td'));
+                            td1.addClass('jqplot-table-legend jqplot-table-legend-swatch');
+                            td1.css({textAlign: 'center', paddingTop: rs});
+
+                            div0 = $(document.createElement('div'));
+                            div0.addClass('jqplot-table-legend-swatch-outline');
+                            div1 = $(document.createElement('div'));
+                            div1.addClass('jqplot-table-legend-swatch');
+                            div1.css({backgroundColor: color, borderColor: color});
+
+                            td1.append(div0.append(div1));
+
+                            td2 = $(document.createElement('td'));
+                            td2.addClass('jqplot-table-legend jqplot-table-legend-label');
+                            td2.css('paddingTop', rs);
                     
-                            td1 = $('<td class="jqplot-table-legend" style="text-align:center;padding-top:'+rs+';">'+
-                                '<div><div class="jqplot-table-legend-swatch" style="background-color:'+color+';border-color:'+color+';"></div>'+
-                                '</div></td>');
-                            td2 = $('<td class="jqplot-table-legend" style="padding-top:'+rs+';"></td>');
+                            // td1 = $('<td class="jqplot-table-legend" style="text-align:center;padding-top:'+rs+';">'+
+                            //     '<div><div class="jqplot-table-legend-swatch" style="background-color:'+color+';border-color:'+color+';"></div>'+
+                            //     '</div></td>');
+                            // td2 = $('<td class="jqplot-table-legend" style="padding-top:'+rs+';"></td>');
                             if (this.escapeHtml){
                                 td2.text(lt);
                             }
                         }
                     }
                     idx++;
-                }   
+                }
+                
+                td1 = td2 = div0 = div1 = null;   
             }
         }
         return this._elem;