search

danielkrizian / dygraphs

Interactive visualizations of time series using JavaScript and the HTML canvas tag. Issue tracker at http://code.google.com/p/dygraphs/issues/list
http://dygraphs.com
MIT License
3 stars 1 forks source link

Plugin: coloured ribbon #9

Closed danielkrizian closed 10 years ago

danielkrizian commented 10 years ago

Color regions that comprise the ribbon can be different for each date. User supplies an array of numeric values and color palette (gradient), where each numeric value encodes a position in the palette interval.

// input:
palette = ["none", "red", "green"];
encodedColors = [0, 0.5, 0.5, 1, 1, 1, 0, 0, 0]; // length must correspond to dates
// output:
colors = ["none", "red", "red", "green", "green", "green", "none", "none", "none"];

Simplified idea using underlayCallback is here: http://dygraphs.com/tests/highlighted-region.html

Desired result (when using red-green palette): colored-ribbon

przmv commented 10 years ago

https://github.com/danielkrizian/dygraphs/blob/ribbon/tests/ribbon.html

Like this but turned into a plugin?

danielkrizian commented 10 years ago

Yes, that's the idea. Maybe with some friendly default opacity to not interfere with series lines visibility. Information in encodedColors shall be part of the data argument, similar to canvasAnnotations solution, but simpler. Maybe array is not necessary, just column. For each row, a color code. If a code is missing for some rows, assume "none". New Dygraph option:

ribbon: {datacolumn, palette, height, position} //height as a fraction of canvas y height, position y coord where 0 is bottom of the canvas

What do you think?

przmv commented 10 years ago

I got your idea, seems doable.

przmv commented 10 years ago

Hello Daniel!

Please check the ribbon demo in tests/ribbon.html.

One note. I decided not to implement datacolumn option but implemented more generic ribbonDataParser function option instead. Also, I implemented the ability to provide ribbon colors array in ribbonData option parameter as well.

Please, let me know what do you think. Thanks!

danielkrizian commented 10 years ago

Hi Petr, good work! I agree it is better like that. I am assuming that you've updated http://danielkrizian.github.io/dygraphs/dygraph-combined.js and will test it on the real data.

I am closing this item now, thanks again!

przmv commented 10 years ago

I'll merge ribbon branch into master tomorrow morning and also I'll rebuild dygraph-combined.js. After that I'll close this issue.