# Can I use Symbols for each points?

178 views

### Andres Zambrano

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

In flotr2 how can I use symbols??/

Thanks

### Andrew Smith

May 27, 2014, 7:10:03 PM5/27/14
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','

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);