1 /** 2 * Ruler, with ticks and numbers, drawn with HTML elements. Can be 3 * stretched to any length. 4 * 5 * @class 6 * @constructor 7 * 8 * @param {Number} args.min 9 * @param {Number} args.max 10 * @param {String} [args.direction="up"] The direction of increasing numbers. 11 * Either "up" or "down". 12 * 13 */ 14 15 function Ruler(args) { 16 dojo.mixin( this, args ); 17 }; 18 19 Ruler.prototype.render_to = function( target_div ) { 20 if( typeof target_div == 'string' ) 21 target_div = dojo.byId( target_div ); 22 23 var target_dims = dojo.coords( target_div ); 24 25 //target_div.style.overflow = "hidden"; 26 var container = document.createElement('div'); 27 // make an inner container that's styled to compensate for the 28 // 12px edge-padding that dojox.charting has builtin that we can't 29 // change, making the tick marks align correctly with the images 30 var label_digits = Math.floor( Math.log(this.max+1)/Math.log(10))+1; 31 32 33 dojo.style(container,{ 34 position: 'absolute', 35 left: "-9px", 36 bottom: "-13px", 37 width: (40+4*label_digits)+"px", 38 height: (target_dims.h+26)+"px" 39 }); 40 target_div.appendChild(container); 41 42 try { 43 dojo.require('dojox.charting.Chart2D'); 44 var chart1 = new dojox.charting.Chart2D( container, {fill: 'transparent'} ); 45 chart1.addAxis( "y", { 46 vertical: true, 47 fill: 'transparent', 48 min: this.min, 49 max: this.max 50 // minorTickStep: 0.5, 51 // majorTickStep: 1 52 //labels: [{value: 1, text: "One"}, {value: 3, text: "Ten"}] 53 }); 54 chart1.addPlot("default", {type: "Bubble", fill: 'transparent'}); 55 chart1.render(); 56 57 // hack to remove a undesirable opaque white rectangle i can't 58 // coax dojox.charting to leave out 59 var undesirable_rect = container.childNodes[0].childNodes[1]; 60 if( undesirable_rect ) 61 undesirable_rect.setAttribute('fill-opacity',0); 62 63 } catch (x) { 64 console.error(x+''); 65 console.error("Failed to draw Ruler with SVG, your browser may not support the necessary technology."); 66 target_div.removeChild( container ); 67 } 68 69 };