Items disappear when scrolling

[nution101]

Just using the default values from the demo, if I add my own data, I get a strange effect where items will disappear from the graph when I scroll left to right. On the right side, they show all the items contained i na section like 1 year timespan. Say 2016 - 2017. As I scroll them to the left, the markers start to disappear steadily.

Here is my result, again, just scrolling from right to left, not zooming in or out, and taking screenshots along the way.

image of the issue

This is my array of data:

[{"timestamp":"2019-07-11","type":"milestone","devicename":"BrianAsh-W8","description":"Test description for a milestone 2","capex":null,"opex":null,"priority":null},{"timestamp":"2017-01-01","type":"milestone","devicename":"BrianAsh-W8","description":"This is a test milestone to see what happens","capex":null,"opex":null,"priority":null},{"timestamp":"2018-01-01","type":"milestone","devicename":"BrianAsh-W8","description":"This is ANOTHER test milestone to see what happens","capex":null,"opex":null,"priority":null},{"timestamp":"2019-01-01","type":"milestone","devicename":"BrianAsh-W8","description":"This is yet ANOTHER test milestone to see what happens","capex":null,"opex":null,"priority":null},{"timestamp":"2016-08-10","type":"risk","devicename":"BrianAsh-W8","description":"description","capex":"","opex":"","priority":"True"},{"timestamp":"2016-09-13","type":"reco","devicename":"BrianAsh-W8","description":"shows the tooltip plug-in being applied to the table after initialization.","capex":"","opex":"","priority":"True"},{"timestamp":"2016-09-06","type":"risk","devicename":"BrianAsh-W8","description":"Upgrade PC","capex":"$2,000","opex":"$3,000","priority":"True"},{"timestamp":"2016-10-04","type":"risk","devicename":"BrianAsh-W8","description":"Add another monitor","capex":"$300","opex":"$400","priority":"True"},{"timestamp":"2016-08-10","type":"risk","devicename":"CTSI - Switch Stack","description":"This method can be accomplished with either a Web Deploy package migration using the Inetmgr GUI, or the Web Deploy command line to copy the files and settings to the new server.","capex":"","opex":"","priority":"False"},{"timestamp":"2015-07-14","type":"reco","devicename":"CTSIDC1","description":"Unsupported OS","capex":"","opex":"","priority":"False"},{"timestamp":"2016-07-21","type":"reco","devicename":"NS1","description":"Replace hardware","capex":"","opex":"","priority":"True"},{"timestamp":"2016-07-21","type":"reco","devicename":"NS2","description":"Replace hardware","capex":"","opex":"","priority":"True"},{"timestamp":"2016-11-13","type":"milestone","devicename":"Updates-VMhost","description":"Warranty Expiration\n","capex":null,"opex":null,"priority":null}]};

This is the function altered to fit the new "type" I am using. NOTE: for the data property, "timelineData" is a variable that holds the json array above, converted to a regular array like your using.

$('.eventcontrol').EventControl({
onhover: function (item, element, event, inout) {
if (inout == 'out') {
$('.eventcontrol-target').html('');
element.css('color', element.data('clr'));
} else {
var x = ['', moment(item.timestamp).format('YYYY-MM-DD'), '' +
' ' + item.devicename + ' ' + item.description
];
$('.eventcontrol-target').html(x.join(''));
$('.eventcontrol-target').css('color', element.css('color'));
element.data('clr', element.css('color'));
element.css('color', '#9b59b6');
}
},
oncreate: function (item, element) {
if (item.type == 'risk') {
element.css('color', '#ae4242');
} else if (item.type == 'reco') {
element.css('color', '#bab804'); // yell = bab804 orng = e67e22
} else {
element.css('color', '#486c8b');
}
},
onclick: function (item, element, event) {
alert(item.timestamp);
},
data: timelineData, // An array of objects with a timestamp key.
hammertime: false, // Enable use of hammer.js to support touch devices
items_height: 135, // height in px of item/event area
markers_height: 31 // height in px of markers area
});

Im also trying to limit the whole time span to one year max, and 1 month min zoom. I dont need multiple years on the chart, just one year, but before I jump into that, I need to make sure this even works cause currently Im getting this strange issue above. Let me know if I can provide any more specific info.

[krig]

Wow, yeah, that's really odd.

[krig]

Ah, right, yes:

The data array has to be sorted by time. I should probably sort it myself before using the data...

Adding this to the end of the array fixes the problem:

.sort(function(a, b) {
  var ta = moment(a.timestamp).format('YYYY-MM-DD');
  var tb = moment(b.timestamp).format('YYYY-MM-DD');
  if (ta < tb) {
    return -1;
  } else if (ta > tb) {
    return 1;
  } else {
    return 0;
  }
})

[nution101]

Ahh, brilliant! Works like a charm.

So would limiting the max time span to 365 days be a chore? I'm trying to get a grasp on all the global time values for min_span, max_span, MajUnits, MajSpans and MinUnits. To customize for instance not just the overall max of the timeline, but how far "in" you can zoom and the size of the "time blocks" when zooming in. However you seem to be much batter at arithmetic than I, so I cant make heads or tails of it lol. Aside that you mentioned in another post that it is calculating out to milliseconds.

[nution101]

Something that could be very very useful actually, is to just limit the timeline to the min and max value of dates that come in. Since say if you have 20 dates clustering inside of 2015 - 2018, there is no need to be able to scroll out to 2050+ for instance, or back to 1990+. I can see where dynamically adding dates this could be useful to have the range available, but it can be somewhat confusing if items are sparse, someone might keep scrolling and scrolling thinking something else might be coming up.

[krig]

Hmm, it should already be limiting it to the min and max values (plus a bit)! I'll have to check to see if this works as it should.

[nution101]

Yeah I just scrolled back to 1750 on the demo you have up here 😄 ... Something is also weird with the dates themselves. Its very hard to explain, but just scroll all the way out, hover over a dot and think about where its lining up and the year its "part of". Things that are in say 2016 line up in 2015, until some point when zooming in they start to align properly. If you take times out and just use dates, its more evident. I cant really explain it that well, but for instance on mine, zoomed all the way out, every date that is 2016 for instance, shows up before the 2016 line starts. All of them do this. They all fall into the year before they take place... Hope this makes sense.

[krig]

Yeah, I know :) I think I've fixed this now (just pushed a new release), at least at the year scale.

Getting the labels and ticks to be correct and also look good at every zoom level has been the trickiest part of this, for sure.

[krig]

Aah, now I see what you mean! I was thinking of limiting the zoom, but you're right, I don't limit how far you can scroll in any direction. Adding a limit there does make sense.

[nution101]

Yeah that gets the dates in the right areas it looks like! So do the dates forward and backward just go on forever then now? I see in the code this.min_time = moment("2070-01-01"); this.max_time = moment("1970-01-01"); but it doesn't seem to effect it.

[krig]

No, the min_time and max_time are actually just the edges of the visible timespan, not limits.
Hmm. Actually, an easy check could be to see if any data points are within the new timespan. If not, don't allow the pan. That should work pretty well I think..

[krig]

The master branch should now limit pans so it's no longer possible to pan outside the area that actually has data. Try it and let me know if it works for you. Seems to work to me :)

[krig]

Well, that sort of works, but now it's possible to end up unable to pan by zooming in on an area with no data points. I'll see if I can fix that tomorrow.

[nution101]

That's working for me it looks like. Well done!

Is it possible to explain how these time values are used so I could for instance, create a button that would be able to pass a parameter to eventcontrol for what level of zoom to be showing? As to not use static values buned into eventcontrol? Like if I wanted a quarterly time frame (3 month chunks), or say "Start X axis on "this" date". Stuff like that. That may require some added params to be built in, I am not sure. It doesn't appear that those params are able, currently, to be passed in (haven't really looked that much), but I am curious to know just how all of these time values work and I could possibly help in that effort.