{"action":"created","issue":{"url":"https://api.github.com/repos/krig/eventcontrol/issues/2","repository_url":"https://api.github.com/repos/krig/eventcontrol","labels_url":"https://api.github.com/repos/krig/eventcontrol/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/krig/eventcontrol/issues/2/comments","events_url":"https://api.github.com/repos/krig/eventcontrol/issues/2/events","html_url":"https://github.com/krig/eventcontrol/issues/2","id":183433138,"number":2,"title":"Items disappear when scrolling","user":{"login":"nution101","id":1011018,"avatar_url":"https://avatars.githubusercontent.com/u/1011018?v=3","gravatar_id":"","url":"https://api.github.com/users/nution101","html_url":"https://github.com/nution101","followers_url":"https://api.github.com/users/nution101/followers","following_url":"https://api.github.com/users/nution101/following{/other_user}","gists_url":"https://api.github.com/users/nution101/gists{/gist_id}","starred_url":"https://api.github.com/users/nution101/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nution101/subscriptions","organizations_url":"https://api.github.com/users/nution101/orgs","repos_url":"https://api.github.com/users/nution101/repos","events_url":"https://api.github.com/users/nution101/events{/privacy}","received_events_url":"https://api.github.com/users/nution101/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/krig/eventcontrol/labels/bug","name":"bug","color":"fc2929"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-10-17T14:34:14Z","updated_at":"2016-10-17T18:19:31Z","closed_at":null,"body":"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. \r\n\r\nHere is my result, again, just scrolling from right to left, not zooming in or out, and taking screenshots along the way. \r\n\r\n[image of the issue](http://tinypic.com/r/2rge73l/9)\r\n\r\n This is my array of data:\r\n\r\n `[{\"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}]};`\r\n\r\nThis 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. \r\n\r\n$('.eventcontrol').EventControl({\r\n                onhover: function (item, element, event, inout) {\r\n                    if (inout == 'out') {\r\n                        $('.eventcontrol-target').html('');\r\n                        element.css('color', element.data('clr'));\r\n                    } else {\r\n                        var x = ['<h>', moment(item.timestamp).format('YYYY-MM-DD'), '</h>' + \r\n                            ' ' + item.devicename + ' ' + item.description\r\n                        ];\r\n                        $('.eventcontrol-target').html(x.join(''));\r\n                        $('.eventcontrol-target').css('color', element.css('color'));\r\n                        element.data('clr', element.css('color'));\r\n                        element.css('color', '#9b59b6');\r\n                    }\r\n                },\r\n                oncreate: function (item, element) {\r\n                    if (item.type == 'risk') {\r\n                        element.css('color', '#ae4242');\r\n                    } else if (item.type == 'reco') {\r\n                        element.css('color', '#bab804'); // yell = bab804  orng = e67e22\r\n                    } else {\r\n                        element.css('color', '#486c8b');\r\n                    }\r\n                },\r\n                onclick: function (item, element, event) {\r\n                    alert(item.timestamp);\r\n                },\r\n                data: timelineData,  // An array of objects with a timestamp key.\r\n                hammertime: false, // Enable use of hammer.js to support touch devices\r\n                items_height: 135, // height in px of item/event area\r\n                markers_height: 31 // height in px of markers area\r\n            });\r\n\r\nIm 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.\r\n"},"comment":{"url":"https://api.github.com/repos/krig/eventcontrol/issues/comments/254289453","html_url":"https://github.com/krig/eventcontrol/issues/2#issuecomment-254289453","issue_url":"https://api.github.com/repos/krig/eventcontrol/issues/2","id":254289453,"user":{"login":"krig","id":25527,"avatar_url":"https://avatars.githubusercontent.com/u/25527?v=3","gravatar_id":"","url":"https://api.github.com/users/krig","html_url":"https://github.com/krig","followers_url":"https://api.github.com/users/krig/followers","following_url":"https://api.github.com/users/krig/following{/other_user}","gists_url":"https://api.github.com/users/krig/gists{/gist_id}","starred_url":"https://api.github.com/users/krig/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/krig/subscriptions","organizations_url":"https://api.github.com/users/krig/orgs","repos_url":"https://api.github.com/users/krig/repos","events_url":"https://api.github.com/users/krig/events{/privacy}","received_events_url":"https://api.github.com/users/krig/received_events","type":"User","site_admin":false},"created_at":"2016-10-17T18:19:31Z","updated_at":"2016-10-17T18:19:31Z","body":"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."}}
{"actor":{"display_login":"krig"}}