# Can I use Symbols for each points?

179 views
Skip to first unread message

### Andres Zambrano

unread,
May 18, 2013, 7:12:17 PM5/18/13
to flo...@googlegroups.com
Like in plotr (old version) I used symbols with jquery.flot.symbol.js

In flotr2 how can I use symbols??/

Thanks

### Andrew Smith

unread,
May 27, 2014, 7:10:03 PM5/27/14
to flo...@googlegroups.com
Making these simple modifications to flotr2 will allow you to draw any sort of polygon and not only a circle.  Hope this helps.

In flotr find the points type 'Flotr.addType('points','

Add a shape option after hitRadius like this:
shape: 'circle'        // => point shape, default is circle.  Valid shapes are triangle, square, pentagon, hexagon, octagon.

Make these mods to the plot method:
Add a yoff variable like this:
i, x, y, yoff;

Add the calculation for the offset before drawing the shape:
if (offset) {
yoff = y + offset;
}
else {
yoff = y;
}

Wrap the drawing of the current cirlce shape in a switch statement:
switch (options.shape) {
case 'triangle':
this.polygon(context, x, yoff, options.radius, 3, 0, false);
if (!offset && options.fill) {
context.fill();
}
break;
case 'square':
this.polygon(context, x, yoff, options.radius, 4, 0, false);
if (!offset && options.fill) {
context.fill();
}
break;
case 'pentagon':
this.polygon(context, x, yoff, options.radius, 5, 0, false);
if (!offset && options.fill) {
context.fill();
}
break;
case 'hexagon':
this.polygon(context, x, yoff, options.radius, 6, 0, false);
if (!offset && options.fill) {
context.fill();
}
break;
case 'octagon':
this.polygon(context, x, yoff, options.radius, 8, 0, false);
if (!offset && options.fill) {
context.fill();
}
break;
default:
context.beginPath();
if (offset) {
context.arc(x, y + offset, options.radius, 0, Math.PI, false);
} else {
context.arc(x, y, options.radius, 0, 2 * Math.PI, true);
if (options.fill) context.fill();
}
context.stroke();
context.closePath();
break;
}

Add the polygon method after the plot method:
polygon : function (ctx, x, y, radius, sides, startAngle, anticlockwise) {
if (sides < 3) return;
var a = (Math.PI * 2)/sides;
a = anticlockwise ? -a : a;
ctx.beginPath();
ctx.save();
ctx.translate(x,y);
ctx.rotate(startAngle);
ctx.moveTo(radius,0);
for (var i = 1; i < sides; i++) {
ctx.lineTo(radius * Math.cos(a * i), radius * Math.sin(a * i));
}
ctx.closePath();
ctx.restore();
ctx.stroke();
}
Reply all
Reply to author
Forward
0 new messages