diff --git a/js/Graph.js b/js/Graph.js index faaa33a6..9663faf2 100644 --- a/js/Graph.js +++ b/js/Graph.js @@ -290,6 +290,7 @@ Graph.prototype = { height : this.plotHeight, fontSize : this.options.fontSize, fontColor : this.options.fontColor, + plotOffset : this.plotOffset, textEnabled : this.textEnabled, htmlText : this.options.HtmlText, text : this._text, // TODO Is this necessary? diff --git a/js/types/markers.js b/js/types/markers.js index e3048afa..fd618d90 100644 --- a/js/types/markers.js +++ b/js/types/markers.js @@ -45,7 +45,10 @@ Flotr.addType('markers', { stackOffsetNeg, stackOffsetPos, stackOffset, - i, x, y, label; + i, x, y, label, + html = [], + plotOffset = options.plotOffset || {left: 0, top: 0}, + div; context.save(); context.lineJoin = 'round'; @@ -82,29 +85,39 @@ Flotr.addType('markers', { } label = options.labelFormatter({x: x, y: y, index: i, data : data}); - this.plot(options.xScale(x), options.yScale(y), label, options); + this.plot(options.xScale(x), options.yScale(y), label, options, html); } + + if (options.htmlText || !options.textEnabled) { + div = Flotr.DOM.node('
'); + Flotr.DOM.insert(div, html.join('')); + Flotr.DOM.insert(options.element, div); + } + context.restore(); }, - plot: function(x, y, label, options) { + plot: function(x, y, label, options, html) { var context = options.context; if (isImage(label) && !label.complete) { throw 'Marker image not loaded.'; } else { - this._plot(x, y, label, options); + this._plot(x, y, label, options, html); } }, - _plot: function(x, y, label, options) { + _plot: function(x, y, label, options, html) { var context = options.context, margin = 2, left = x, top = y, + htmlStyle = 'font-size:' + (options.fontSize * 1.3) + 'px;font-family:sans-serif;white-space:pre-line;', dim; if (isImage(label)) - dim = {height : label.height, width: label.width}; - else + dim = {height : label.height, width: label.width}; + else if (options.htmlText || !options.textEnabled) { + dim = options.text.html(label, options.element, htmlStyle, 'flotr-grid-label'); + } else dim = options.text.canvas(label); dim.width = Math.floor(dim.width+margin*2); @@ -128,7 +141,9 @@ Flotr.addType('markers', { if (isImage(label)) context.drawImage(label, parseInt(left+margin, 10), parseInt(top+margin, 10)); - else + else if (options.htmlText || !options.textEnabled) { + html.push('