Time Graph

[gabriela-sartori]

Is there a graph for time periods? In a period of 24h, I'd like to draw session durations with start/end from different users. Would it be better to draw it myself because it is too specific or to reuse and adapt a graph from elm-visualization?

Edit: I found a cool example of what I am thinking. Ignore instrument colors at bottom and album black vertical bars.

[deciob]

elm-visalisation is quite low level and doesn't lock you into any specific graph. I would imagine that what you want to achieve could be done with some help from the Axis and the Scale modules. The Y axis in this case would have an ordinal scale and the X axis a continuous scale, more specifically a time scale or even a linear scale. The scales will then help you create and position the svg rect elements for your graph. If you still have doubts, I might be able to help you out with a simple proof of concept this evening.

[gampleman]

(Also, if you do come up with a solution, feel free to share the code here for any future users with the same question. Thanks)

[gabriela-sartori]

I am using Scale.time from an example I find on elm-visualization site, but I would like to display names instead of numbers in Y, is that possible? I am trying atm, first contact with graphs.

https://pastebin.com/TC6qMdUg

[deciob]

@g4bb3r if you want to display names instead of numbers, you can use https://package.elm-lang.org/packages/gampleman/elm-visualization/latest/Axis#tickFormat, but I think you could do this differently. In place of lines you could use bars and the Y scale could be an ordinal one. Depending on time, I might be able to send you an alternative example this evening for you to look at.

[deciob]

@g4bb3r I have an example that hopefully resembles what you want: https://ellie-app.com/bNRBPyRZX5Fa1
Note that the tuple is now (xStart, xEnd, y).
If you also want the bars to overlap with different thickness (like the example you show), then easiest way that I can think of is to use scales with different paddingInner.
I hope this helps.