"Scale diagrams": emulate via timeline?

[YakovL]

Hi,

I'm looking for a library to draw "scale diagrams" like these: energy/wavelengths: http://optika-novak.cz/wp-content/uploads/2010/06/videni.jpg ph (chemistry): https://commons.wikimedia.org/wiki/File:PKa_of_Alcohols.png

I've searched among demos of several JS diagramming libraries and haven't found anything similar enough to that. So, first, if there's a special name for such diargams, please let me know. And second, that made me thinking that the easiest way would be using timeline diagrams to "emulate" these.

Now, I've got some specific questions about vis.js (Timeline):

• is there a simple way to substitute axis labels (time) with other stuff (energy units, log scale, additinal labels like in the ph example (including the axis arrow and label)?
• is there a way to add "breaks" in the axis like in the left part of the ph example?
• is it possible to put stuff both above and below the axis?
• is it possible to add labels not directly above the items (ph example, blue labels)?
• is there a way to add "zoomed in parts" like in the wavelengths example (for visible spectrum, there's an additional axis and also colouring)?
• is it possible to draw a graph above the "scale diagram" when both Timeline and Graph2d components are both installed?

Best regards, Yakov.

[josdejong]

This does not sound like a perfect fit to use the Timeline, but maybe you can get it working like you want.

That's a lot of questions. I will answer them shortly but please study the docs and examples, and just play around with the Timeline.

is there a simple way to substitute axis labels (time) with other stuff (energy units, log scale, additinal labels like in the ph example (including the axis arrow and label)?

no

is there a way to add "breaks" in the axis like in the left part of the ph example?

yes, search docs/examples for hiddenDates, though there is no clear visual distinction. See also #1468.

is it possible to put stuff both above and below the axis?

no, but you could mimic something like it by creating two vertically stacked Timelines, one without visible axis, and keep their windows synchronized so it looks like a single Timeline.

is it possible to add labels not directly above the items (ph example, blue labels)?

yes you can put your own HTML in your items contents.

is there a way to add "zoomed in parts" like in the wavelengths example (for visible spectrum, there's

no but you could mimic it I guess with a second Timeline or something?

an additional axis and also colouring)?

that's not so easy, you could apply your own background image or something but it has to move/zoom correctly when you move/zoom the Timeline.

is it possible to draw a graph above the "scale diagram" when both Timeline and Graph2d components are both installed?

yes

[khanshakeeb]

Regarding Question#1. Is it possible to show day count instead of date? e.g start= 04/12/2015 - 10/12/2015. Difference is 6 days, I want to show it like Day 1,.....Day3,..,Day6 on X axis?

Thanks

[josdejong]

Please check out the docs regarding configuration options format and timeAxis.

http://visjs.org/docs/timeline/