|
@ -44,6 +44,7 @@ function Graph3d(container, data, options) { |
|
|
|
|
|
|
|
|
this.filterLabel = 'time'; |
|
|
this.filterLabel = 'time'; |
|
|
this.legendLabel = 'value'; |
|
|
this.legendLabel = 'value'; |
|
|
|
|
|
this.showLegend = undefined; // auto by default (based on graph style)
|
|
|
|
|
|
|
|
|
this.style = Graph3d.STYLE.DOT; |
|
|
this.style = Graph3d.STYLE.DOT; |
|
|
this.showPerspective = true; |
|
|
this.showPerspective = true; |
|
@ -494,7 +495,11 @@ Graph3d.prototype._dataInitialize = function (rawData, style) { |
|
|
this.valueMax = (this.defaultValueMax !== undefined) ? this.defaultValueMax : valueRange.max; |
|
|
this.valueMax = (this.defaultValueMax !== undefined) ? this.defaultValueMax : valueRange.max; |
|
|
if (this.valueMax <= this.valueMin) this.valueMax = this.valueMin + 1; |
|
|
if (this.valueMax <= this.valueMin) this.valueMax = this.valueMin + 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// these styles default to having legends
|
|
|
|
|
|
var isLegendGraphStyle = this.style === Graph3d.STYLE.DOTCOLOR || this.style === Graph3d.STYLE.DOTSIZE; |
|
|
|
|
|
this.showLegend = (this.defaultShowLegend !== undefined) ? this.defaultShowLegend : isLegendGraphStyle; |
|
|
|
|
|
|
|
|
// set the scale dependent on the ranges.
|
|
|
// set the scale dependent on the ranges.
|
|
|
this._setScale(); |
|
|
this._setScale(); |
|
|
}; |
|
|
}; |
|
@ -838,6 +843,7 @@ Graph3d.prototype.setOptions = function (options) { |
|
|
|
|
|
|
|
|
if (options.filterLabel !== undefined) this.filterLabel = options.filterLabel; |
|
|
if (options.filterLabel !== undefined) this.filterLabel = options.filterLabel; |
|
|
if (options.legendLabel !== undefined) this.legendLabel = options.legendLabel; |
|
|
if (options.legendLabel !== undefined) this.legendLabel = options.legendLabel; |
|
|
|
|
|
if (options.showLegend !== undefined) this.defaultShowLegend = options.showLegend; |
|
|
if (options.xLabel !== undefined) this.xLabel = options.xLabel; |
|
|
if (options.xLabel !== undefined) this.xLabel = options.xLabel; |
|
|
if (options.yLabel !== undefined) this.yLabel = options.yLabel; |
|
|
if (options.yLabel !== undefined) this.yLabel = options.yLabel; |
|
|
if (options.zLabel !== undefined) this.zLabel = options.zLabel; |
|
|
if (options.zLabel !== undefined) this.zLabel = options.zLabel; |
|
@ -972,46 +978,64 @@ Graph3d.prototype._redrawClear = function() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* Redraw the legend showing the colors |
|
|
|
|
|
|
|
|
* Get legend width |
|
|
*/ |
|
|
*/ |
|
|
Graph3d.prototype._redrawLegend = function() { |
|
|
|
|
|
var y; |
|
|
|
|
|
|
|
|
|
|
|
if (this.style === Graph3d.STYLE.DOTCOLOR || |
|
|
|
|
|
this.style === Graph3d.STYLE.DOTSIZE) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Graph3d.prototype._getLegendWidth = function() { |
|
|
|
|
|
var width; |
|
|
|
|
|
if (this.style === Graph3d.STYLE.DOTSIZE) { |
|
|
var dotSize = this.frame.clientWidth * this.dotSizeRatio; |
|
|
var dotSize = this.frame.clientWidth * this.dotSizeRatio; |
|
|
|
|
|
width = dotSize / 2 + dotSize * 2; |
|
|
|
|
|
} else if (this.style === Graph3d.STYLE.BARSIZE) { |
|
|
|
|
|
width = this.xBarWidth ; |
|
|
|
|
|
} else { |
|
|
|
|
|
width = 20; |
|
|
|
|
|
} |
|
|
|
|
|
return width; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
var widthMin, widthMax; |
|
|
|
|
|
if (this.style === Graph3d.STYLE.DOTSIZE) { |
|
|
|
|
|
widthMin = dotSize / 2; // px
|
|
|
|
|
|
widthMax = dotSize / 2 + dotSize * 2; // Todo: put this in one function
|
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
widthMin = 20; // px
|
|
|
|
|
|
widthMax = 20; // px
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
var height = Math.max(this.frame.clientHeight * 0.25, 100); |
|
|
|
|
|
var top = this.margin; |
|
|
|
|
|
var right = this.frame.clientWidth - this.margin; |
|
|
|
|
|
var left = right - widthMax; |
|
|
|
|
|
var bottom = top + height; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* Redraw the legend based on size, dot color, or surface height |
|
|
|
|
|
*/ |
|
|
|
|
|
Graph3d.prototype._redrawLegend = function() { |
|
|
|
|
|
|
|
|
|
|
|
//Return without drawing anything, if no legend is specified
|
|
|
|
|
|
if (this.showLegend !== true) {return;} |
|
|
|
|
|
|
|
|
|
|
|
// Do not draw legend when graph style does not support
|
|
|
|
|
|
if (this.style === Graph3d.STYLE.LINE |
|
|
|
|
|
|| this.style === Graph3d.STYLE.BARSIZE //TODO add legend support for BARSIZE
|
|
|
|
|
|
){return;} |
|
|
|
|
|
|
|
|
|
|
|
// Legend types - size and color. Determine if size legend.
|
|
|
|
|
|
var isSizeLegend = (this.style === Graph3d.STYLE.BARSIZE |
|
|
|
|
|
|| this.style === Graph3d.STYLE.DOTSIZE) ; |
|
|
|
|
|
|
|
|
|
|
|
// Legend is either tracking z values or style values. This flag if false means use z values.
|
|
|
|
|
|
var isValueLegend = (this.style === Graph3d.STYLE.DOTSIZE |
|
|
|
|
|
|| this.style === Graph3d.STYLE.DOTCOLOR |
|
|
|
|
|
|| this.style === Graph3d.STYLE.BARCOLOR); |
|
|
|
|
|
|
|
|
|
|
|
var height = Math.max(this.frame.clientHeight * 0.25, 100); |
|
|
|
|
|
var top = this.margin; |
|
|
|
|
|
var width = this._getLegendWidth() ; // px - overwritten by size legend
|
|
|
|
|
|
var right = this.frame.clientWidth - this.margin; |
|
|
|
|
|
var left = right - width; |
|
|
|
|
|
var bottom = top + height; |
|
|
|
|
|
|
|
|
var canvas = this.frame.canvas; |
|
|
var canvas = this.frame.canvas; |
|
|
var ctx = canvas.getContext('2d'); |
|
|
var ctx = canvas.getContext('2d'); |
|
|
ctx.lineWidth = 1; |
|
|
ctx.lineWidth = 1; |
|
|
ctx.font = '14px arial'; // TODO: put in options
|
|
|
ctx.font = '14px arial'; // TODO: put in options
|
|
|
|
|
|
|
|
|
if (this.style === Graph3d.STYLE.DOTCOLOR) { |
|
|
|
|
|
|
|
|
if (isSizeLegend === false) { |
|
|
// draw the color bar
|
|
|
// draw the color bar
|
|
|
var ymin = 0; |
|
|
var ymin = 0; |
|
|
var ymax = height; // Todo: make height customizable
|
|
|
var ymax = height; // Todo: make height customizable
|
|
|
|
|
|
var y; |
|
|
|
|
|
|
|
|
for (y = ymin; y < ymax; y++) { |
|
|
for (y = ymin; y < ymax; y++) { |
|
|
var f = (y - ymin) / (ymax - ymin); |
|
|
var f = (y - ymin) / (ymax - ymin); |
|
|
|
|
|
|
|
|
//var width = (dotSize / 2 + (1-f) * dotSize * 2); // Todo: put this in one function
|
|
|
|
|
|
var hue = f * 240; |
|
|
var hue = f * 240; |
|
|
var color = this._hsv2rgb(hue, 1, 1); |
|
|
var color = this._hsv2rgb(hue, 1, 1); |
|
|
|
|
|
|
|
@ -1021,55 +1045,63 @@ Graph3d.prototype._redrawLegend = function() { |
|
|
ctx.lineTo(right, top + y); |
|
|
ctx.lineTo(right, top + y); |
|
|
ctx.stroke(); |
|
|
ctx.stroke(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
ctx.strokeStyle = this.axisColor; |
|
|
ctx.strokeStyle = this.axisColor; |
|
|
ctx.strokeRect(left, top, widthMax, height); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
ctx.strokeRect(left, top, width, height); |
|
|
|
|
|
|
|
|
if (this.style === Graph3d.STYLE.DOTSIZE) { |
|
|
|
|
|
// draw border around color bar
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
|
|
|
|
// draw the size legend box
|
|
|
|
|
|
var widthMin; |
|
|
|
|
|
if (this.style === Graph3d.STYLE.DOTSIZE) { |
|
|
|
|
|
var dotSize = this.frame.clientWidth * this.dotSizeRatio; |
|
|
|
|
|
widthMin = dotSize / 2; // px
|
|
|
|
|
|
} else if (this.style === Graph3d.STYLE.BARSIZE) { |
|
|
|
|
|
//widthMin = this.xBarWidth * 0.2 this is wrong - barwidth measures in terms of xvalues
|
|
|
|
|
|
} |
|
|
ctx.strokeStyle = this.axisColor; |
|
|
ctx.strokeStyle = this.axisColor; |
|
|
ctx.fillStyle = this.dataColor.fill; |
|
|
ctx.fillStyle = this.dataColor.fill; |
|
|
ctx.beginPath(); |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(left, top); |
|
|
ctx.moveTo(left, top); |
|
|
ctx.lineTo(right, top); |
|
|
ctx.lineTo(right, top); |
|
|
ctx.lineTo(right - widthMax + widthMin, bottom); |
|
|
|
|
|
|
|
|
ctx.lineTo(right - width + widthMin, bottom); |
|
|
ctx.lineTo(left, bottom); |
|
|
ctx.lineTo(left, bottom); |
|
|
ctx.closePath(); |
|
|
ctx.closePath(); |
|
|
ctx.fill(); |
|
|
ctx.fill(); |
|
|
ctx.stroke(); |
|
|
ctx.stroke(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (this.style === Graph3d.STYLE.DOTCOLOR || |
|
|
|
|
|
this.style === Graph3d.STYLE.DOTSIZE) { |
|
|
|
|
|
// print values along the color bar
|
|
|
|
|
|
var gridLineLen = 5; // px
|
|
|
|
|
|
var step = new StepNumber(this.valueMin, this.valueMax, (this.valueMax-this.valueMin)/5, true); |
|
|
|
|
|
step.start(); |
|
|
|
|
|
if (step.getCurrent() < this.valueMin) { |
|
|
|
|
|
step.next(); |
|
|
|
|
|
} |
|
|
|
|
|
while (!step.end()) { |
|
|
|
|
|
y = bottom - (step.getCurrent() - this.valueMin) / (this.valueMax - this.valueMin) * height; |
|
|
|
|
|
|
|
|
|
|
|
ctx.beginPath(); |
|
|
|
|
|
ctx.moveTo(left - gridLineLen, y); |
|
|
|
|
|
ctx.lineTo(left, y); |
|
|
|
|
|
ctx.stroke(); |
|
|
|
|
|
|
|
|
|
|
|
ctx.textAlign = 'right'; |
|
|
|
|
|
ctx.textBaseline = 'middle'; |
|
|
|
|
|
ctx.fillStyle = this.axisColor; |
|
|
|
|
|
ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y); |
|
|
|
|
|
|
|
|
// print value text along the legend edge
|
|
|
|
|
|
var gridLineLen = 5; // px
|
|
|
|
|
|
|
|
|
|
|
|
var legendMin = isValueLegend ? this.valueMin : this.zMin; |
|
|
|
|
|
var legendMax = isValueLegend ? this.valueMax : this.zMax; |
|
|
|
|
|
var step = new StepNumber(legendMin, legendMax, (legendMax-legendMin)/5, true); |
|
|
|
|
|
step.start(); |
|
|
|
|
|
if (step.getCurrent() < legendMin) { |
|
|
|
|
|
step.next(); |
|
|
|
|
|
} |
|
|
|
|
|
var y; |
|
|
|
|
|
while (!step.end()) { |
|
|
|
|
|
y = bottom - (step.getCurrent() - legendMin) / (legendMax - legendMin) * height; |
|
|
|
|
|
|
|
|
step.next(); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
ctx.beginPath(); |
|
|
|
|
|
ctx.moveTo(left - gridLineLen, y); |
|
|
|
|
|
ctx.lineTo(left, y); |
|
|
|
|
|
ctx.stroke(); |
|
|
|
|
|
|
|
|
ctx.textAlign = 'right'; |
|
|
ctx.textAlign = 'right'; |
|
|
ctx.textBaseline = 'top'; |
|
|
|
|
|
var label = this.legendLabel; |
|
|
|
|
|
ctx.fillText(label, right, bottom + this.margin); |
|
|
|
|
|
|
|
|
ctx.textBaseline = 'middle'; |
|
|
|
|
|
ctx.fillStyle = this.axisColor; |
|
|
|
|
|
ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y); |
|
|
|
|
|
|
|
|
|
|
|
step.next(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
ctx.textAlign = 'right'; |
|
|
|
|
|
ctx.textBaseline = 'top'; |
|
|
|
|
|
var label = this.legendLabel; |
|
|
|
|
|
ctx.fillText(label, right, bottom + this.margin); |
|
|
|
|
|
|
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|