flrs / visavail

A D3.js Time Data Availability Visualization
https://flrs.github.io/visavail/docs/samples/basic.html
MIT License
310 stars 59 forks source link

Small intervals or time points cannot be seen #32

Closed vulantro closed 4 years ago

vulantro commented 5 years ago

If there is an interval with dates close to each other, or a time point (interval with the same startdate and enddate), it cannot be seen as the lib overlaps it with the next item as it will be placed to the same point where the time point starts/ends and the previous interval before the time point ends, assuming there are no gaps and intervals are countinous. Solving this issue would greatly improve the lib.

Ps.: If you set the code responsible for width tag with max(computed,1.5), time point will be wide enought to be able to be seen, but is still overlaped with the next iterval.

tanganellilore commented 5 years ago

Hi @corizoqo , the chart work for data in a time range, if the data overlap in the same time with same start-date and end-date it's normal this point overlap. The library work for point distribuited in the time, if one data overlap another one data in the same line/category the points are overlaped.

At the moment isn't possible to change this, the nature of library is moniteored avaiability in a timeframe, in the real world it's impossible that we have avaiability and unavaiability in the same time ( same millisecond).

In my fork I introduce another two type of graph but is a "point graph" for use this in a alarm/event scenario.

Good day

vulantro commented 5 years ago

Hi @tanganellilore , my task is to take timestamps (date and time) from database and represent them as vertical green lines and represent the gap (the pause) between them with yellow, if the gap is smaller in seconds than x, and with red if the gap is bigger or equal to x. I should see dates and times when mouseover, so I can't play with interval starts and stops. There are 3 categories for events with green, shorter intervals between events with yellow and red for longer ones. Gerenated data used with the lib from database is like: [2016.01.01 12:20, 2016.01.01 12:20] <- this is the first point [2016.01.01 12:20, 2016.01.01 13:25] <- interval between 1st and 2nd point [2016.01.01 13:25, 2016.01.01 13:25] <- an inner point [2016.01.01 13:25, 2016.01.01 17:33] <- interval between inner an last point [2016.01.01 17:33, 2016.01.01 17:33] <- last point

These are generated with php from the time points in database. Start and end times must overlap in data to show corrent info on mouseover event, but should not overlap on the graph. I would not mind if the next block is starting at the end of the prev instead of based ot the start time and it's place on the graph, and there is no timerange but onmouse info, so the blocks are just proportionate to each other and they are just color boxes next to each other. Thanks.

tanganellilore commented 5 years ago

The library work with second, if you have two point in the same second one of them will bw overlap or substituited (the first). The correct configuration is for example:

 var dataset = [{
        "measure": "Fat Bike",
        "categories": {
            "green": { "color": "green" },
            "yellow": { "color": "yellow" },
            "red": { "color": "red" },
        },
        "data": [
            ["2016-01-01 12:20:00", "green", "2016-01-01 12:20:01"],
            ["2016-01-01 12:20:01", "yellow", "2016-01-01 13:25:00"],
            ["2016-01-01 13:25:00", "green", "2016-01-01 13:25:01"],
            ["2016-01-01 13:25:01", "red", "2016-01-01 17:33:00"],
            ["2016-01-01 17:33:01", "green", "2016-01-01 17:33:02"]
        ]
}];

If you see I added the single point one second for tell to lib to use this. BUT the diplay range it's to hight and we can't see the green bar .

With my fork you have the zoom function and with zoom you can see the green bar. You can see here: jsfiddle with my fork (zoom and responsive enabled)

It's a library for data avaiability and at the moment we can't fuse two type of graph.

For create your effect you can manipulate the database data with adding some second in base of the timerange.

vulantro commented 5 years ago

Can be found a not too complex way to put boxes next to each other instead of putting them to an x coordinate based on the x timeline and the start date? In this case there won't be overlaps. Bigger intervals are just some minutes long, so now this lib is not for my task. Any idea? Thank you.

tanganellilore commented 5 years ago

Repeat, this Library is for visualize the avaiability in a timerange with timeline. So the width of the rectangle depend from trimerange and the differance from start-date (st) e and end-date (ed) . If trimerange is bigger and the differance from (st) and (ed) is small is normally that the point "disappear".

I think I don't understand what do you want to do.

If you can share what do you want do exactly with a draft or a sketch.

tanganellilore commented 4 years ago

Closure this issue since no update from 1 year