Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

More possibilities #53

Closed
wants to merge 6 commits into from

2 participants

@apsavin

Some small, but usefull changes, I think.

@cesutherland

Ultimately we would like to manage all this with a stylesheet. See #44. It'll cut down a bit on code size / complexity, simplify the API some, and make these types of customizations easier.

@cesutherland

This will always draw grid lines for x2 and y2, so the change would be an API change for anyone already using two vertical or two horizontal axes. Maybe there's another way?

@cesutherland

Got a use case for this one? I think dashed grid lines would just add noise.

@cesutherland

Looks good but not sure about the dashed grid lines or 2nd axis lines.

Can you add a regression test case for the candles outlines so I can see it? Give it a type test (you can follow along with this guy: /examples/js/examples/basic-stepped.js) and add the include to the SpecRunner.html and jasmine.yml in /spec/. The test should fail because your changes aren't in the stable version; I'll clean that up myself.

Also feel free to use branches for the individual features and send pull requests one at a time. I can get labelsAlign in right now.

@apsavin

Thank you for quick answer and for advice about new branches for new features.

  1. labelsAlign is not managed by CSS, because its canvas text.
  2. But how i can draw grid with y2axis, without use of yaxis?
  3. Dashed lines is not my idea, its just opinion of my boss and I cant change this opinion. I just think, if i need it, anyone also, may be, need it too.

I'll write a regression test case for the candles outlines soon.

@cesutherland
@apsavin

Well, I agree, its all isnt necessary for the lib.

@apsavin apsavin closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
2  js/Axis.js
@@ -173,7 +173,7 @@ Axis.prototype = {
v = tick;
label = options.tickFormatter(v, {min : this.min, max : this.max});
}
- axisTicks[i] = { v: v, label: label };
+ axisTicks[i] = { v: v, label: label, options: tick[2] };
}
},
View
75 js/plugins/grid.js
@@ -48,21 +48,70 @@ Flotr.addPlugin('graphGrid', {
}
}
function drawGridLines (ticks, callback) {
- _.each(_.pluck(ticks, 'v'), function(v){
+ _.each(ticks, function(tick){
+ var v = tick.v;
// Don't show lines on upper and lower bounds.
- if ((v <= a.min || v >= a.max) ||
+ if ((v <= a.min || v >= a.max) ||
(v == a.min || v == a.max) && grid.outlineWidth)
return;
- callback(Math.floor(a.d2p(v)) + ctx.lineWidth/2);
+ var value = Math.floor(a.d2p(v)) + ctx.lineWidth/2;
+ if(!isNaN(value)){
+ callback(value, tick.options);
+ }
});
}
- function drawVerticalLines (x) {
- ctx.moveTo(x, 0);
- ctx.lineTo(x, plotHeight);
+ function drawVerticalLines (x, options) {
+ if(options === undefined){
+ ctx.moveTo(x, 0);
+ ctx.lineTo(x, plotHeight);
+ }
+ else if(options.type === 'dashed'){
+ dashedLineTo.call(ctx, x, 0, x, plotHeight, options.pattern);
+ }
}
- function drawHorizontalLines (y) {
- ctx.moveTo(0, y);
- ctx.lineTo(plotWidth, y);
+ function drawHorizontalLines (y, options) {
+ if(options === undefined){
+ ctx.moveTo(0, y);
+ ctx.lineTo(plotWidth, y);
+ }
+ else if(options.type === 'dashed'){
+ dashedLineTo.call(ctx, 0, y, plotWidth, y, options.pattern);
+ }
+ }
+ function dashedLineTo(fromX, fromY, toX, toY, pattern) {
+ var lt = function (a, b) { return a <= b; },
+ gt = function (a, b) { return a >= b; },
+ capmin = function (a, b) { return Math.min(a, b); },
+ capmax = function (a, b) { return Math.max(a, b); },
+ checkX = { thereYet: gt, cap: capmin },
+ checkY = { thereYet: gt, cap: capmin };
+
+ if (fromY - toY > 0) {
+ checkY.thereYet = lt;
+ checkY.cap = capmax;
+ }
+ if (fromX - toX > 0) {
+ checkX.thereYet = lt;
+ checkX.cap = capmax;
+ }
+
+ this.moveTo(fromX, fromY);
+ var offsetX = fromX,
+ offsetY = fromY,
+ idx = 0, dash = true;
+ while (!(checkX.thereYet(offsetX, toX) && checkY.thereYet(offsetY, toY))) {
+ var ang = Math.atan2(toY - fromY, toX - fromX);
+ var len = pattern[idx];
+
+ offsetX = checkX.cap(toX, offsetX + (Math.cos(ang) * len));
+ offsetY = checkY.cap(toY, offsetY + (Math.sin(ang) * len));
+
+ if (dash) this.lineTo(offsetX, offsetY);
+ else this.moveTo(offsetX, offsetY);
+
+ idx = (idx + 1) % pattern.length;
+ dash = !dash;
+ }
}
if (grid.circular) {
@@ -110,6 +159,14 @@ Flotr.addPlugin('graphGrid', {
a = this.axes.y;
if (horizontalLines) drawGridLines(a.ticks, drawHorizontalLines);
if (minorHorizontalLines) drawGridLines(a.minorTicks, drawHorizontalLines);
+
+ a = this.axes.x2;
+ if (verticalLines) drawGridLines(a.ticks, drawVerticalLines);
+ if (minorVerticalLines) drawGridLines(a.minorTicks, drawVerticalLines);
+
+ a = this.axes.y2;
+ if (horizontalLines) drawGridLines(a.ticks, drawHorizontalLines);
+ if (minorHorizontalLines) drawGridLines(a.minorTicks, drawHorizontalLines);
ctx.stroke();
}
View
8 js/plugins/labels.js
@@ -45,10 +45,10 @@ Flotr.addPlugin('labels', {
}
if (!options.HtmlText && this.textEnabled) {
- drawLabelNoHtmlText(this, a.x, 'center', 'top');
- drawLabelNoHtmlText(this, a.x2, 'center', 'bottom');
- drawLabelNoHtmlText(this, a.y, 'right', 'middle');
- drawLabelNoHtmlText(this, a.y2, 'left', 'middle');
+ drawLabelNoHtmlText(this, a.x, a.x.options.labelsAlign || 'center', 'top');
+ drawLabelNoHtmlText(this, a.x2, a.x2.options.labelsAlign || 'center', 'bottom');
+ drawLabelNoHtmlText(this, a.y, a.y.options.labelsAlign || 'right', 'middle');
+ drawLabelNoHtmlText(this, a.y2, a.y2.options.labelsAlign || 'left', 'middle');
} else if ((
a.x.options.showLabels ||
View
13 js/types/candles.js
@@ -8,6 +8,8 @@ Flotr.addType('candles', {
fill: true, // => true to fill the area from the line to the x axis, false for (transparent) no fill
upFillColor: '#00A8F0',// => up sticks fill color
downFillColor: '#CB4B4B',// => down sticks fill color
+ upLineColor: false, // => up sticks line color, false to be equal upFillColor
+ downLineColor: false, // => down sticks line color, false to be equal downFillColor
fillOpacity: 0.5, // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill
// TODO Test this barcharts option.
barcharts: false // => draw as barcharts (not standard bars but financial barcharts)
@@ -68,7 +70,14 @@ Flotr.addType('candles', {
continue;
*/
- color = options[open > close ? 'downFillColor' : 'upFillColor'];
+ if(open > close){
+ color = options['downFillColor'];
+ lineColor = options['downLineColor'] ? options['downLineColor'] : color;
+ }
+ else {
+ color = options['upFillColor'];
+ lineColor = options['upLineColor'] ? options['upLineColor'] : color;
+ }
// Fill the candle.
// TODO Test the barcharts option
@@ -87,7 +96,7 @@ Flotr.addType('candles', {
x = Math.floor((left + right) / 2) + pixelOffset;
- context.strokeStyle = color;
+ context.strokeStyle = lineColor;
context.beginPath();
// TODO Again with the bartcharts
Something went wrong with that request. Please try again.