Saturday, February 25, 2012

New feature: custom points

I'm very excited about many of the new features coming to Dygraphs. Here's one that's available today: custom points via drawPointCallback and drawHighlightPointCallback.

Dygraphs already provides a two options, drawPoints and pointSize, which will draw a small circle at every data point. Dygraphs will also draw points when hovering near a data set, and that circles size is determined by the option highlightCircleSize.

But who wants to be stuck with circles?

The drawPointCallback and drawHighlightPointCallback options both accept a function which draws the shape you want right on the canvas. As a starting point, Dygraphs now supplies a set of basic images. You can see all of them below:

Dygraph.Circles.DEFAULT
Dygraph.Circles.TRIANGLE
Dygraph.Circles.SQUARE
Dygraph.Circles.DIAMOND
Dygraph.Circles.PENTAGON
Dygraph.Circles.HEXAGON
Dygraph.Circles.CIRCLE
Dygraph.Circles.STAR
Dygraph.Circles.PLUS
Dygraph.Circles.EX

The demo, which can be found here, also demonstrates drawing your own custom points, by drawing adorable little smiling and frowning faces.
More features are coming, so keep your eyes out for updates!

6 comments:

  1. Hi Robert,

    This is a great library. Is it possible to customize this further in a way that depending upon the value of data on a given time series, the image changes? so say, when y = 2, we draw a circle, , y = 4, we draw a triangle and for y =6 , we draw a square for the same time series.

    Awesome job !!

    ReplyDelete
  2. In theory, you should be able to identify x and y values from cx and cy using toDataXCoord and toDataYCoord. Would that be sufficient for you?

    ReplyDelete
  3. Hello Robert,

    I have found Dygraphs to be excellent for plotting time series data.

    I have recently wanted to have BAR chart style plots and have looked at various solutions suggested in forums.

    After Looking at this blog article I decided to try some simple (to some) javascipt coding with the drawPointCallback. Fortunately my limited javascipt got to the point of hacking your examples until I got what I needed.
    I created the callback function below and used the drawPointCallback : bargraph, option.
    var bargraph = function(g, series, ctx, cx, cy, color, radius) {
    ctx.lineWidth = 1;
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx, ctx.canvas.height);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    };

    I don’t know if this is the best solution but it does what I need with just one data series.

    I don't know how useful this is for others.

    Thank you for Dygraphs.

    ReplyDelete
    Replies
    1. I found that on my Android tablet that as the graph was panned down that the lines extended into the negative y values. I changed the ctx.lineTo(cx, ctx.canvas.height); to ctx.lineTo(cx, g.toDomYCoord(0));
      and this appears to work.

      Using drawPointCallback to create vertical bars(simple bar chart) to data point example based on Minimal Example http://dygraphs.com/tests/dygraph.html

      < s cript type="text/javascript"> // inserted space to get into blog
      var bargraph = function(g, series, ctx, cx, cy, color, radius) {
      ctx.lineWidth = 1; // Change as needed. Could use radius
      ctx.strokeStyle = color;
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.lineTo(cx, g.toDomYCoord(0));
      ctx.closePath();
      ctx.stroke();
      ctx.fill();
      };

      g = new Dygraph(document.getElementById("graphdiv"),
      "Date,Temperature\n" +
      "2008-05-07,75\n" +
      "2008-05-08,70\n" +
      "2008-05-09,80\n",
      {
      drawPoints:true,
      drawPointCallback : bargraph,
      strokeWidth: 0.0
      }
      );
      // inserted space to get into blog

      I also noted that on the Android table that the bars extended over the x-axis labels. I have looked at the blog Dygraphs Coordinate Systems, 1/3 (http://blog.dygraphs.com/2011/10/dygraphs-coordinate-systems-13.html) but I don't see what is wrong.

      Delete
  4. Peter, your question is better suited for the Dygraphs mailing list: https://groups.google.com/forum/?fromgroups#!forum/dygraphs-users

    ReplyDelete
  5. I have recently started using the R interface to Dygraphs but have been unable to use custom points. Is there an example that you can point me to. That would be much appreciated.

    thanks

    ReplyDelete