Can I use Symbols for each points?

175 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