TIMELINE. date format (how to pull in events via javascript)

[GoogleCodeExporter]

Hello and thank you for the this fantastic tool you created.
I try to folllow the issue Timeline#2 : how to pull in events via
javascript, using the script below. But I cannot find the good format of
date so that the event will be well positionned on the timeline : the 2
events created are positionned at the same date (seem to be 1973, my birth
date :)).
Can you help me ??
Regards.

Firefox (Linux)

[Submitted by Richard Escudé on simile.mit.edu] 

####################"

// creation of 2 items via javascript
var items = new Array(Array);

items[0] = new Array(Array);
items[0]["start"] = "2006";
items[0]["end"] = "2007";
items[0]["title"] = 'mon année 2006';

items[1] = new Array(Array);
items[1]["start"] = '2001';
items[1]["end"] = '2002';
items[1]["title"] = 'mon année 2001';

var tl;

function onLoad() {

var eventIndex = new Timeline.EventIndex();
for (i=0; i<=1; i++) {

startDate=items[i]["start"];
endDate=items[i]["end"];
label=items[i]["title"];
//icon='';

            var evt = new Timeline.DefaultEventSource.Event(
                startDate,
                endDate,
                null,
                null,
                endDate == null,
                label,
                "sdsd", // preview text
                null, // image
                null, // link
                null, // icon
                null, // color
                null // text color
            );
            eventIndex.add(evt);
    }

var eventSource = new Timeline.DefaultEventSource(eventIndex);

//Create event source
//var eventSource = new Timeline.DefaultEventSource();

//theme
var theme = Timeline.ClassicTheme.create();
  theme.event.bubble.width = 320;
  theme.event.bubble.height = 220;
  //http://simile.mit.edu/issues/browse/TIMELINE-14
theme.ether.backgroundColors[4] = "some-color";

  var bandInfos = [
    Timeline.createBandInfo({
     eventSource: eventSource,
        date: "Jun 28 1871 00:00:00 GMT",

width: "70%",
        intervalUnit: Timeline.DateTime.CENTURY,
        intervalPixels: 200,
        theme: theme
    }),
    Timeline.createBandInfo({
     eventSource: eventSource,
        date: "Jun 28 1871 00:00:00 GMT",

//condenser les données
        showEventText: false,
        trackHeight: 0.5,
        trackGap: 0.2,

width: "30%",
        intervalUnit: Timeline.DateTime.MILLENNIUM,
        intervalPixels: 200,
        theme: theme
    })
  ];
  //synchronosisation des deux bandes
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;

tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  Timeline.loadXML("tmp/results.xml", function(xml, url) {
eventSource.loadXML(xml, url); });
  //Timeline.loadXML("timeline.xml.php", function(xml, url) {
eventSource.loadXML(xml, url); });

//filtre de couleurs pour le div control
setupFilterHighlightControls(document.getElementById("controls"), tl,
[0,1], theme);

}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
} 

COMMENTS

Instead of "2006", try something like these
  new Date("2006")
  new Date("June 27, 2006")
  Timeline.DateTime.parseIso8601DateTime("2006-06-27")
  Timeline.DateTime.parseIso8601DateTime("2006-06-27T13:09:56.979-05:00")

ISO8601 is described here: http://www.w3.org/TR/NOTE-datetime
[ Show » ]
David F. Huynh - 03/Feb/07 05:05 PM Instead of "2006", try something like
these   new Date("2006")   new Date("June 27, 2006")  
Timeline.DateTime.parseIso8601DateTime("2006-06-27")  
Timeline.DateTime.parseIso8601DateTime("2006-06-27T13:09:56.979-05:00")
ISO8601 is described here: http://www.w3.org/TR/NOTE-datetime

[ Permlink | « Hide ]
Richard Escudé - 07/Feb/07 03:43 AM
Thank you, it works fine now.

Original issue reported on code.google.com by GabrielR...@googlemail.com on 5 Apr 2009 at 2:51