Hi,

I believe there is an issue in the selection of items in the timeline using Chrome (only happens for items with grouping).

Steps to reproduce:

-Open http://almende.github.com/chap-links-library/js/timeline/examples/example13_grouping.html
-Try to select an item by clicking it. Some items can be only selected with a double-click. However, the same items can later be selected just fine and the items for which the issue occurs seem quite random.

Tested on Windows XP 32-bit with Chromium 17.0.915.0 and Chrome 21.0.1180.89 m

Feature request is in the title.

Thank you for sharing these nice libraries.

When using the mouse wheel in Firefox 13.0.1 to zoom the timeline component, the default behavior of the onMouseWheel event is not suppressed. Thus, zooming also scrolls the page.
This seems to be caused by the redrawFrame() call in the zoom method. A workaround for me was to trigger the redraw outside the event handler:

if (!animate || this.groups.length > 0) {
var timeline = this;
setTimeout(function(){timeline.redrawFrame()}, 1);
}

Is there any way to add custom types of timeline items along with current 'box', 'range' and 'dot'. I've found something like internal interface for that (links.Timeline.Item), but can't find API function to add new types.

Do you have/plan such functionality?

Hi, I'm using CHAP Links Library to display some small networks, and find it really awesome for all the aesthetic/manipulations possibilities it allows.
Now that my networks are done and implemented, I'd like to be able to create a legend to explain the visual variables represented.
The easiest solution is to make a static image, but well, in a dynamic environment, it's just a big level below the network itself.
I thought of 2 different ways to have a "dynamic" (ie. automatically generated) legend :

• Add a native legend item, like it's done in graph library.
• Easier, add a possibility to "fix" the network, ie. make it selectable but non movable. This way, I could create another network in my page, fix the x/y of the nodes using styles, and use the labeling to display the meaning of each symbol.
  The second possibility would, afaik, be much easier to implement, and requires more work for the user, but I think it would already be a good first step to enhance this network module.

I hope it's something that can be done :)
Anyway, thanks a lot for your work, this lib is really helpfull for me ^^

If we delete an item, all selected items become unselected (this.unselectItem() is called in deleteItem method)?

Probably it should remain selected, we need just to update selection index?

is it possible to not show the dates where a particular event has not taken place?

I think it would be nice to be able to customize the minor label format. For example, show hours in 12 hour (AM/PM) instead of 24 hour.

There is a difference of one month on the timeline when json data is passed. Even the demo example( labelled example17_json_data.html) shows wrong data i.e there is a difference of one month

Hi Jos,

Would you please add the functionality to the timeline that 'timeline' header sticks on the top or bottom on long timeline's that when user scrolls down or up, he would not lose the focus on time.

Thank you in advance.
Cengiz

When stacked items exceed the height of the Timeline, the Timeline should show a vertical scrollbar. The axis should be displayed at a fixed position at top or bottom.

Running changeItem to update a timeline event's contents causes it to shift its vertical position when the stackEvents option is enabled.

Steps to reproduce:

• Open js/src/timeline/examples/example09_editable.html in the latest version of the chap-links-library repository.
• Select an event in the timeline.
• Click the Change button above the timeline.

Result: the selected event moves upward.

Expected result: the event stays where it is.

Cause: changeItem does not actually change the timeline event, but creates a new event to replace the old one. Both changeItem and filterItems push the new event onto the timeline's show render queue. The duplicate event causes the proper vertical position of the replacement event to be miscalculated.

I have forked the repo and implemented a fix, and will be submitting a pull request very shortly.

the sort function used in links.Timeline.prototype.addGroup doesn't work as expected on Safari : on Safari the groups array is not sorted, cause the sort function returns a boolean instead of an integer (-1, 1 or 0)

I'm using timeline in a slightly non-standard way perhaps - using it to simply display a sequence from 0 to n of events, rather than have them at specific dates. I've achieved this by effectively using dates around 01/01/1970 and a millisecond scale, hiding major labels. For the most part this works well, but I've run into a few issues which I've managed to fix in the source. I have a patch against timeline.js V2.1.2 - it's pretty small, so I've copied it below - couldn't see a way to attach it here - hope I haven't broken too many rules :) The main problem was tests like:

var x = y ? y.valueOf() : undefined;

If y is zero (which for my use was a common occurrence), x ends up being undefined. I've changed several of those to:

var x = y != undefined ? y.valueOf() : undefined;

and the issues have gone. They included failing to respect options.min at 0 in certain cases, as well as struggling with options.start and options.end when options.start was 0.

225c225
<     if (options && options.start && options.end) {

---
>     if (options && options.start != undefined && options.end != undefined) {
507,508c507,508
<     var min = this.options.min ? this.options.min.valueOf() : undefined;
<     if (min && start.valueOf() < min) {

---
>     var min = this.options.min != undefined ? this.options.min.valueOf() : undefined;
>     if (min != undefined && start.valueOf() < min) {
511,512c511,512
<     var max = this.options.max ? this.options.max.valueOf() : undefined;
<     if (max && end.valueOf() > max) {

---
>     var max = this.options.max != undefined ? this.options.max.valueOf() : undefined;
>     if (max != undefined && end.valueOf() > max) {
3235,3236c3235,3236
<     var startValue = start.valueOf();
<     var endValue = end.valueOf();

---
>     var startValue = Number(start.valueOf());
>     var endValue = Number(end.valueOf());
3255,3257c3255,3257
<     var min = options.min ? options.min.valueOf() : undefined;
<     var max = options.max ? options.max.valueOf() : undefined;
<     if (min && max) {

---
>     var min = options.min != undefined ? options.min.valueOf() : undefined;
>     var max = options.max != undefined ? options.max.valueOf() : undefined;
>     if (min != undefined && max != undefined) {
3294c3294
<     if (min) {

---
>     if (min != undefined) {
3303c3303
<     if (max) {

---
>     if (max != undefined) {

The javascript page loads the timeline data using XMLHTTPRequest:

            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var d = xmlhttp.responseText;
                var data = eval(d);
                drawVisualization(data);
            }

The "drawVisualization" function then renders the timeline using that data.

    function drawVisualization(data) 
    {   
        timeline = null; // setting to null in the hope of reclaiming the memory allocated to timeline

        var options = 
        {
            'min': new Date(2012,4,1),
            'max': new Date(2012,8,31),
            'width':  "100%", 
            'height': "auto",
            'editable': false,
            'showNavigation': false,
            'eventMargin': 40,  // minimal margin between events 
            'eventMarginAxis': 0, // minimal margin beteen events and the axis
            'groupsChangeable' : false,
            'groupsOnRight': false,
            'axisOnTop': true
        };

        timeline = new links.Timeline(document.getElementById('tl'));
        timeline.draw(data, options);
    }

There are buttons on this java script page that allow the user to move forward or backwards in time. Each click of the button (forward or back) loads data corresponding to that time range and replaces the time line data on that page. Yes, I am aware that the widget itself offers this feature - but I have millions of events to show. So I have to take control of the "pagination".

When I do this repeatedly (say I move in the forward direction 10 times). I observe the following:

• the timeline eventually renders with no data (yes, the data is there and it works if loaded directly from that point).
• the memory of the browser seems to be increasing with each click (Forward or Back).

Question:

• Is this a valid approach to using the time line widget? i.e. can i load the data dynamically? Each rendering uses a new timeline widget instance. So I am not sure if the previous instance is being reclaimed correctly.
• Are there methods on the timeline widget (delete/deleteAll don't change the behavior) that guarantee that all the memory used by the widget can be reclaimed.

Thanks in advance
Z.

It would be useful to have a stacking feature to avoid overlapping events when working with groups.

Thanks for this nice library!

It would be very nice feature to allow multiple selections in timeline (by +click, for example).

How can I get next by time event?

Events are sorted during rendering, but the result is not stored for future reuse...

My app uses very large numbers of events (well over what is recommended) and is focused on delivering lots of information about the event located at the custom time:

http://ifcb-data.whoi.edu/mvco

However zoomability doesn't seem to be configurable to allow me to use the custom time as the zoom center. Rather I see the following behavior:

1. When zooming with the mouse scroll wheel, the zoom center is the current mouse position
2. When zooming with the zoom button (e.g., on a tablet) the zoom center is the center of the currently-displayed range

Is there an option to use the custom time as the zoom center or is that a missing feature?

I was hoping we could have the following event added:

'Unselect' - for when the timelines background is clicked and the currently selected item is unselected

After line 4601 add - this.trigger('unselect');

The Timeline does not render items and axis correctly when zooming in to millisecond scale in Internet Explorer (tested IE8 and IE9). Try the following example on IE:

http://almende.github.com/chap-links-library/js/timeline/examples/example12_millisecondscale.html

I wanted a feature like dipity.com where if there are too many items stacked on top of each other it'll just group them into a box (only instead of just putting a '+' symbol in the box, I wanted the number of items it contains). So when a user clicks the box it'll then open and zoom enough to show those items.

I got a freelancer to help out with it but it's still buggy. Just thought I'd throw it out to the group in case it's of any use to accomplishing this. Check out the examples:

http://www.next2heaven.com/timeline.zip

Anyone else have ways they deal with too many items. I don't want to just increase the height of the timeline or shove them out of view like it does currently.

Currently 'select' event is triggered only when user clicks on event, not when selection is changed by setSelection() method.

Is it possible to change this behaviour or implement other way to get selection changes (another event?)

Hi Jos,

Would you please add the functionality to show short day names next to the day on the timeline when the focus is week or month view?

Regards,
Cengiz

Hi,

We have recently created a social network diagram using network.js.

it works fine in IE9 but our user base uses IE8.

I found that IE8 does not support canvas but we can make it work with the help of excanvas. (I observed that samples based on graph.js works fine and its using excanvas)

I browsed samples based on network.js and here excanvas is not implemented thus its not working in IE8.

I added excanvas reference to network samples, but its not working.

I think the network.js file need to be modified so that it works with IE8.

Can anyone help us in this?

I think the following two symptoms are related to the same bug, but I can't quite put my finger on it.

Issue observed in http://almende.github.com/chap-links-library/js/timeline/examples/example02_interactive.html.

Symptom 1: When zooming out the timeline, Firefox hangs. This can be reproduced by zooming out by scrolling, or by repeatedly clicking the minus symbol. The starttime display will be filled with NaN's intead of numbers when the hang occurs

Symptom 2: When manually replacing the starttime's year with 0, both starttime and endtime read NaN-NaN-NaN NaN:NaN:NaN after clicking the set button.

Both symptoms were observed in FF17.0.1.

Problem:
@line 2542: the assumption is made that when a dataconnector is assigned to an item, appendItems() has to be executed. This prevents the elseif statement that handles the link event to be executed.

My app uses UTC times exclusively; always a PITA in Javascript. I found that I had to hack timeline.js to get the tooltip on the current time to show UTC instead of locale time. IWBNI this was configurable so you could inject a time format when creating the timeline?

Add a vertical line showing the current time in the Graph, like Timeline has the red, vertical line current time (optional via showCurrentTime).

I add items to timeline dynamically and want to remove some of them layer.

deleteItem() identifies items by their indexes. But it is difficult to track indexes because of dynamic changes in data.

Probably, getItemIndex() could be used if it is possible to get DOM element for added item, but it looks rather ugly way...

Is there any other way to identify timeline items? Ideal variant for me is to get some unique item's ID from addItem() and use it in deleteItem().

I just downloaded the GWT library zip files from the GitHub pages, and there is a minor naming issue.

The jar names of the GWT libraries are a bit confusing. All libraries are called gwt-links.graph.jar. I would expect them to be called gwt-links-timeline.jar, gwt-links-treegrid.jar, gwt-links-network.jar instead.

When moving an event from one group to another, but the event is canceled useing cancelChange, the original start and end are restored but not the original group

As the title says, these problems came up when testing my application on a Windows 8 laptop with touch screen capability (Lenovo Yoga) using IE10 and Chrome. All these bugs are related to touch screen actions, as the timeline functions just fine when manipulated via the mouse (or touchpad in this case). To my knowledge, they do not appear on an iPad, so it appears to be a windows/browser related bug. The bugs have been repeated on one of the Chap Timeline examples (http://almende.github.com/chap-links-library/js/timeline/examples/example17_json_data.html)

The issues are:

IE & Chrome:

• Using two fingers, it is not possible to perform the zoom (in or out) action on the timeline. On IE it just manipulates the entire page, and on Chrome it just scrolls the timeline (ignoring the second finger).

IE only:

• Clicking on a box in the timeline requires double tapping, or nothing happens. Double tapping activates the element as normal.
• It is not possible scroll the timeline using your finger (this works in Chrome though).

So, I'm not sure if this is even a bug at all related to the timeline code, or in windows8/browsers, but I thought I would start from here. Please let me know if you need more information.

EDIT: Oh, and Merry Christmas, hope you don't end up thinking about this problem during the holidays.

In the timeline the items and the timeline itself scrolls with slightly different speed, causing the items to be shown at a wrong position until the mouse button is released.

Tested with: IE 8.0.6001.18702

Hello, fist of all thanks for this awesome script!

I am trying to draw a graph for data in my database. I am fetching the data as json via an ajax request before triggering the draw function. Am using the Offline Mode example for this.

The issue I am facing is the tooltips. There simple do not show up. In-fate they do but in a weird manner. They show up for the last 2 points and when zoomed out - probably for the last 4 points. That's it!

The data I am fetching is for example from 20th March to 30th April and the other is 25th March to 5th May. The question being - are the tooltips not appearing because start and end range of both graphs is different?

Any clues? In-case you want I can share the code too!

The option property names for moveable and zoomable are not being set during initialization because the javascript file is using the wrong names:

this._moveable = options._moveable;
this._zoomable = options._zoomable;

rather than:

this._moveable = options.moveable;
this._zoomable = options.zoomable;

Until updated, the workaround is to use the _moveable and _zoomable property names in the option initialization.

Hi! I find graph3d a really nice, useful contribution, thanks for sharing it! However, its dependency on google visualization is rather inconvenient since it prevents offline usage, which may be important in certain situations.

Before digging deep into how to remove this dependency by myself I'd like to know from the original developers if they have any advice on this issue. Is the coupling with GVA loose enough that this separation can be achieved with a reasonable effort? Any pointers you would kindly want to share?

It goes without saying if I finally decide to undertake this project and I am successful I'll be happy to share any results here.

Thanks in advance,

L

Hi,

I have a timeline populated with events, and it works great on my development machine (FF, Chrome, IE). When the site is published and I am testing it on an iPad, it appears to work just fine (everything behaves as it should), but it throws up many Javascript errors as soon as you do a pinch-zoom on the timeline. It appears to give one error per step of zoom, so one quick pinch can quickly create 20+ errors. The error does not appear to affect performance (as far as I can tell), and only appears as errors in the debug console. I don't have access to a mac+safari, so can't test whether its the iPad, or just Safari.

The actual error is:
JavaScript: error
undefined
ReferenceError: Can't find variable: timeline

No other information about the error is available. The error does not appear if just scrolling the timeline from side to side, but after the pinch-zoom, any action will cause this error to come up.

This error does not occur on the Timeline examples.
EDIT: In fact, it does occur on the Timeline examples (http://almende.github.com/chap-links-library/js/timeline/examples/example11_datasource.html). Same thing happens here. Open the google spreadsheet, and do a pinch-zoom on an iPad, and the debug console fills up with the same javascript error.

My timeline has a few hundred events, loaded dynamically, and the following options set:
// specify options
options = {
"width": timelineWidth,
"height": "98%",
"style": "box", // optional
"intervalMax": 1000 * 60 * 60 * 24 * 365 * 5,
"intervalMin": 1000 * 60 * 60 * 12,
"start": moment().subtract('days', 21).toDate(),
"end": moment().add('days', 21).toDate()
};

Hi,

I would like to get the css position of a selected item on the timeline. I have added a listener for the select event. It seems that the only function that I can use to obtain this position is the getTarget(event) function which returns the HTML object. However, I am not sure that I understand correctly getTarget(event). I tried the following approach without success:

 function select(){
  var sel = timeline.getSelection();

  if (sel.length) {
    if (sel[0].row != undefined) {
      var row = sel[0].row;
      var target = timeline.getTarget('click');
      ...
    }
  }
 }

Any idea on solving this problem?
Thank you in advance

Ho Jos,

Would you please add the functionality in timeline to set an individual class to a selected row or column?

Thank you in advance. :)

Regards,
Cengiz

At the moment, if you create a google.visualization.DataTable with columns with ids "start", "end", "content" and "group", the group column is ignored. Setting the LABEL (not ID) of the group column to "group" fixes the problem and groups are shown.

I traced the problem to timeline.js, line 266, the findColumnId function should be using dataTable.getColumnId(i) rather than dataTable.getColumnLabel(i). Or possibly both should be checked?

Hi Jos,

I have been implementing "timeline" library in my project for displaying events in the timeline and managing them using modal boxes. Desktop version of my app is functioning all fine but in the mobile view (tested on iPad and Galaxy Tab) by selecting the event in the timeline (which works fine by the way even dragging it in the timeline works fine as well) and after selecting clicking it again to firing the edit event is not working. I guess the double tab gesture is not yet implemented yet.

Would you please add this functionality to the library so we can make much more nicer mobile apps using your libraries? :-)

Thank you in advance.

Greetings,
Cengiz

From testing, and from looking at the code, it seems that if you specify options.start, you need to specify options.end and vice-versa for either to be respected. The line I'm looking at in timeline.js V2.1.2 is 225:

if (options && options.start != undefined && options.end != undefined) {

It seems that only processes those options if both exist. The documentation doesn't mention this (in fact, there's a typo in the documentation for the 'end' option at http://almende.github.com/chap-links-library/js/timeline/doc/#Configuration_Options - the description of the 'start' option!).

Anyway, is this by design? To fix, it would probably mean factoring out the code from setVisibleChartRangeAuto() to find the first and last items, then replace those with options.start and/or options.end if either were specified.

Been testing the new clustering. Looking good! The only 2 issues I see is that depending on event heights it's doesn't bucket properly. I think the calculation being used is expecting each row to be a certain height so it ends up hiding some items when you have variable hight items on the timeline.

The other thing is having an option to click the bucket and the timeline will zoom till all items in the bucket can safely be shown. I know that's on the list.

This is such a big item. Glad to see it worked on. Keep up the great work!

Disabling the "stack events" option in the timeline seems to have an effect on the zooming of the timeline in the GWT version.

I can still drag the timeline left and right to change the range, but zooming by scrolling the mouse does not change anything visibly. The one thing that still works is that I still get proper rangeChangedEvents as though the range did change due to zooming...

I'm attempting to dynamically create a timeline that contains images. This works fine if the images have a set dimension (allowing me to set width and height css properties), but this is a problem for me because I'm trying to use templates to build my HTML.

    script(type='text/template', id='timeline-image').

      <a href="<%= image %>" title="Click to display additional information in Pop-up." class="highslide" onclick="return hs.expand(this)">
          <img class='timeline-image' src="<%= imageThumb %>" alt="<%= name %>">
          <span class='caption'> <%= name %> </span>
      </a>

      <div class="highslide-caption">
          <p title="Press Escape to Return to Timeline.">
              <strong><%= startDate %> : </strong>
              <%=description%>
          </p>
      </div>

And because I have images of different sizes, it's kinda difficult for me to manually insert heights and widths for the images. Is there any chance that there will be support for images that don't have heights and widths provided?

There should be an option to display timeline in descending order

JSON dates are broken. Everyone knows this.

It would be nice(!) if the handler for loading JSON data would handle the formats that are produced by .NET Json serialiser and other server side stuff without having to preprocess the data.
e.g.

A generic data format (UTC String)

{"items":[
{
"start":"2012-12-20T00:00:00+00:00",
"end":"2012-12-28T00:00:00+00:00",
"content":"Content",
"group":"Group1",
"className":"itemclass"
}
]}

Or the .NET default representation of number of milliseconds since January 1st 1970 UTC

{"items":[
{"start":"/Date(1355961600000)/",
"end":"/Date(1356652800000)/",
"content":"Content",
"group":"Group1",
"className":"itemclass"
}
]}

Currently dates and messages in the visualizations are always in English. It would be nice to be able to have various languages available.

Currently the Network only allows setting styles like color and font globally or per group. It would be useful to be able to set this for individual nodes (like you can do for the 'style' option). Same with links and packages.