Can I use Symbols for each points?

[Andres Zambrano]

Like in plotr (old version) I used symbols with jquery.flot.symbol.js

In flotr2 how can I use symbols??/

Thanks

[Andrew Smith]

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

            }