Request for comment: custom circles

[Robert Konigsberg]

I've got a change ready to push to my local repository, but I'd like some feedback.

A screenshot showing before/after is at [1], below.

The idea is that instead of just drawing circles at points, you define a callback that lets you draw whatever you like. You can do this with both the points themselves, as well as those which are drawn when hovered over with the mouse.

I could put the code on github, but for now I'm using pastebin; I'd want feedback first. The code sample that built the image can be seen at [2], below.

You can define one of two new callback options:

* drawPointCallback - called when each point is drawn (when option drawPoints is true. option pointSize is supplied so callback knows how big it should be.)

* highlightCircleCallback - called when each circle is drawn when hovering over points. (highlightCircleSize is supplied so callback knows how big it should be.)

The consistency with existing options makes for inconsistent names. (ADVICE HERE PLEASE)

Each callback takes the following set of parameters. The order can be adjusted, but I don't like how many there are:
g - the graph
series - the series name
ctx - the drawing context
cx, cy - center x and y
color - the series color
radius (aka size)

You could, for instance, remove series, color and radius, but having them supplied back to you could be useful. radius is kind of important because the callback is supposed to adhere to the pointSize (or highlightCircleSize). (ADVICE HERE PLEASE)

I wrote a useful little thingy for drawing regular convex shapes (e.g. triangle, square, pentagon, etc). Right now it lives right in the demo (source at the pastebin link above) but should it be provided by Dygraphs? (ADVICE HERE PLEASE)


[1] Image: http://i.imgur.com/4LnNW.jpg
[2] Code Sample: http://pastebin.com/aixaN7ph

--

Robert Konigsberg | Google NY | http://go/monarch

[sam]

I think this is a nice featue.

To make it simpler for the end user would you consider just
making the following two DataLineDisplay options called
pointSymbol:
highlightSymbol:

which could take the values
- dot (which is the current default)
- triangle (this is your side=3)
- square (this is side =4)
- pentagon (sides =5)
- hexagon (sides = 6)
- circle
- smileyface
- frown
- diamond (a rotated square)
And these symbols would just be the size associated with pointSize
option
I think your algorithm implements all of the above.

Some other interesting symbols could be:
- star ( * )
- plus ( + )
- xmark ( x or X )
but i'm not sure if your current algorithm can present these.

Steve

[Klaus Weidner]

I like the idea in general, but I'm a bit worried about performance when it runs the callback once per point being drawn. While Javascript compilers are getting increasingly smart, I think this type of indirection would be likely to interfere with optimization opportunities. It works fine for small numbers of points, but I'd be curious if the additional hooks would cause a noticeable slowdown for graphs with lots of points even for people who don't have the feature active.

Do you currently draw one symbol per data point? If using the symbols to help distinguish lots of timeseries in one graph, I think it would be nice to be able to use a lower density, for example one symbol per 5 data points. Ideally they could use staggered offsets to help avoid overlapping symbols.

Is it feasible to integrate this with the existing generateLegendDashHTML_ functionality? Probably it would be easiest to add a canvas to the legend div and re-use the same drawing code instead of the current div trickery.

FYI, have you seen my proposed patch for interactive series highlighting in http://code.google.com/p/dygraphs/issues/detail?id=75 ? It includes some refactoring for the attrs lookup that makes it easier to add overrides. For example, instead of the highlightCircleSize oddball option, we could make it more generic to support arbitrary options, for example:

new Dygraph(data, {

  pointSize: 0,

  highlightRowOpts: { pointSize: 2 }

  highlightSeriesOpts: {pointSize: 4 }

}

Then you'd get no points by default, size 2 points for the highlighted data row, and size 4 points for the closest series.

Micro-optimization: instead of creating a RegularConvex once per data point, I think it should create a RegularConvexDrawer once and reuse it in the callback. Your code is already structured to support that, but we shouldn't encourage users to make single-use temporary objects in an inner loop.

[red-fox]

I like your highlightning solution directly in the dygraph, but when
there are too many series, even the strokewidth isn't enough.

perhaps you can think about the highlightning i chose at
http://pages.kunzt.info/tests/medview2_entwurf.html when you hover
over the legend.
there the other series are "greyed out" and the active series has a
bigger strokewidth. then it's clear even for a big amount of series.

greets Christian

On 9 Feb., 22:07, Klaus Weidner <kla...@google.com> wrote:
> I like the idea in general, but I'm a bit worried about performance when it
> runs the callback once per point being drawn. While Javascript compilers
> are getting increasingly smart, I think this type of indirection would be
> likely to interfere with optimization opportunities. It works fine for
> small numbers of points, but I'd be curious if the additional hooks would
> cause a noticeable slowdown for graphs with lots of points even for people
> who don't have the feature active.
>
> Do you currently draw one symbol per data point? If using the symbols to
> help distinguish lots of timeseries in one graph, I think it would be nice
> to be able to use a lower density, for example one symbol per 5 data
> points. Ideally they could use staggered offsets to help avoid overlapping
> symbols.
>
> Is it feasible to integrate this with the existing generateLegendDashHTML_
> functionality? Probably it would be easiest to add a canvas to the legend
> div and re-use the same drawing code instead of the current div trickery.
>

> FYI, have you seen my proposed patch for interactive series highlighting inhttp://code.google.com/p/dygraphs/issues/detail?id=75? It includes some

[Dan Vanderkam]

The only thing we can really trust in a discussion of performance is
numbers. But my gut says that the cost of throwing lots of pixels onto
a canvas is large compared to the cost of some javascript function
calls.

I like the callback, but it would be nice to have some pre-built ones, e.g.

Dygraph.SQUARE = function() { … };
Dygraph.TRIANGLE = function() { … };

- dan

[sam]

I agree:
- triangle
- square
- circle

- diamond (a rotated square)

- asterisk/star ( * )

- plus ( + )

- xmark ( x )
where the closed symbols
could have options of being either
filled or un-filled.

steve

> > encourage users to make single-use temporary objects in an inner loop.- Hide quoted text -
>
> - Show quoted text -

[Klaus Weidner]

For bonus points, it could supply an array of shapes and automatically assign symbols to lines sequentially from that, similar to Gnuplot's points / linespoints setting.

[Robert Konigsberg]

Hi all,

Thanks for all the discussion!

This is my first day back from an extended vacation, so I will reply en masse.

Sam:
* The algorithm allows you to draw whatever you want. You're not limited to drawing something with the point size provided - you can do anything you want. Of course, drawing something reasonable is better than drawing something unreasonable.
* pointSymbol, highlightSymbol is nice, but if the options are callbacks, then perhaps pointSymbolCallback and highlightSymbolCallback.
* Star, plus, cross, xmark, all are possible.

Klaus:
* The performance with the default value should be exactly the same as before, save one function call indirection, and possibly some pre-drawing calculations. But drawing custom symbols per point can certainly be expensive, but providers can optimize by drawing simpler icons, or perhaps using a pre-loaded image. But to be honest, I have no idea how that impacts performance.
* Staggering is not currently implemented, but TBH that problem already exists, custom callbacks or not.
* I don't know what generateLegendDashHTML_ is.
* I haven't read your proposed patch yet.
* Providing series->symbol should be possible with the callback as already defined, since they accept the seriesName as a parameter.

Dan:
* Agree re: predefined values, but only as. I disagree about putting it in the global namespace, Dygraph.Symbol.SQUARE,CIRCLE, etc?

[Robert Konigsberg]

If you are interested, a pull request can be found here:

https://github.com/danvk/dygraphs/pull/123

There's a small bug still; highlighting isn't working suddenly. I'll figure it out shortly. In the meantime, here's a screen cap for those of you who are interested: http://imgur.com/JKxPw

If you have questions, please read the code first. Thanks!

[Klaus Weidner]

On Wednesday, February 15, 2012 9:43:06 AM UTC-8, konigsberg wrote:

Klaus:

* I don't know what generateLegendDashHTML_ is.

See https://github.com/danvk/dygraphs/blob/master/dygraph.js#L1562 and the second demo here: http://dygraphs.com/tests/per-series.html

It draws a small sample of the line stroke pattern inside the legend when using dashed lines, and I think this would also work nicely with the styled points. 

But the current code appears to use div borders to draw the sample lines, and I think it may be easier to draw them on a canvas using the same drawing logic as the main plotting code.

[Robert Konigsberg]

I see. I think it's brand-new which is why I wasn't aware of it. I see that as a v2 issue, but worth being aware of.

[sam]

I downloaded the current repository.
It works nicely.

I only had to remove the extra "comma" after the bracket } at the end
of 'custom':
for custom_circle.html to generate output.

'custom' : {
drawPointCallback : frown,
drawHighlightCallback : smile
drawHighlightPointCallback : smile
},
}

Thanks,
steve

> Robert Konigsberg | Google NY |http://go/monarch- Hide quoted text -

[Robert Konigsberg]

Thanks for the catch. I'll fix it momentarily.

[Robert Konigsberg]

If you're not sure of the error, then you'll have to start with finding that out. Chrome has a Javascript console built in. I think Firefox's is built in, but I can't be sure. Googling for [chrome javascript console], et cetera, should help you find that out.

Or am I misunderstanding your question?

On Mon, May 14, 2012 at 1:59 PM, sam <s...@monetti.com> wrote:

Hi Robert,
In the gallery demos the draw-points.html example uses data.js
and I'm trying to add custom circles to the two line plots from this
example.

I'm not exactly sure how to modify draw-points.html and keep getting
an error.

"NY" is defined in data.js ; i.e.
function data_temp() {
return "" +
"Date,NY,SF\n" +
"20070101,46;51;56,43;45;48\n" +

And, I tried to add the following line to the html but I'm not sure
what my error is:
  "NY" : {drawPointCallback : Dygraph.Circles.CIRCLE}

Can you help?

Thanks,
Steve

> > > Robert Konigsberg | Google NY |http://go/monarch-Hide quoted text -

>
> > > - Show quoted text -
>
> --
> Robert Konigsberg | Google NY |http://go/monarch- Hide quoted text -
>
> - Show quoted text -

[Steven A Monetti]

Sorry all,

I had a typo in my logic, I have the custom circles working now in my plots.

Thanks,

Steve

 

---

From: Robert Konigsberg [mailto:konig...@google.com]
Sent: Monday, May 14, 2012 2:48 PM
To: dygraphs-users
Cc: sam
Subject: Re: Request for comment: custom circles

[Vijay Bhandari]

Is this feature available via the R interface to dygraphs?  Would really appreciate if someone would point me to an example.

thanks

[Petr Shevtsov]

Hello Vijay,

Please wait for updates on http://rstudio.github.io/dygraphs/ I'm currently workin on adding this feature to Dygraphs for R.

Best,

Petr