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.
Hi Robert,
ReplyDeleteThis 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 !!
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?
ReplyDeleteHello Robert,
ReplyDeleteI 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.
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));
Deleteand 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.
Peter, your question is better suited for the Dygraphs mailing list: https://groups.google.com/forum/?fromgroups#!forum/dygraphs-users
ReplyDeleteI 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.
ReplyDeletethanks