Exhibit timeline won't display events

[Greg Linch]

The JSON data worked fine early on before I made some modifications to
the timline.

Since then, I've tried many different variations of dates and JSON
formatting and they still don't appear on the timeline (but they plot
fine on the map).

Exhibit:

http://www.greglinch.com/jfk/jfkuse/jfk3.html

Data:

http://www.greglinch.com/jfk/jfkuse/jfktimelinedata.js

Any help would be greatly appreciated.

Thanks!
Greg

[Greg Linch]

To clarify, the events work when I remove this script:

<script>
var timelineConfig = {
//Size and behavior
timelineConstructor: function (div, eventSource) {
div.style.height="360px";
var theme = Timeline.ClassicTheme.create();
theme.event.label.width = 200; // px
theme.event.bubble.width = 300;
theme.event.bubble.height = 200;

var eventSource = new Timeline.DefaultEventSource();

var zones = [
{ start: "Fri Nov 22 1963 00:00:00 GMT-0600",
end: "Mon Nov 25 1963 00:00:00 GMT-0600",
magnify: 10,
unit: Timeline.DateTime.DAY
},
{ start: "Fri Nov 22 1963 09:00:00 GMT-0600",
end: "Sun Nov 24 1963 00:00:00 GMT-0600",
magnify: 5,
unit: Timeline.DateTime.HOUR
},
{ start: "Fri Nov 22 1963 11:00:00 GMT-0600",
end: "Sat Nov 23 1963 00:00:00 GMT-0600",
magnify: 5,
unit: Timeline.DateTime.MINUTE,
multiple: 10
},
{ start: "Fri Nov 22 1963 12:00:00 GMT-0600",
end: "Fri Nov 22 1963 14:00:00 GMT-0600",
magnify: 3,
unit: Timeline.DateTime.MINUTE,
multiple: 5
}
];
var zones2 = [
{ start: "Fri Nov 22 1963 00:00:00 GMT-0600",
end: "Mon Nov 25 1963 00:00:00 GMT-0600",
magnify: 10,
unit: Timeline.DateTime.WEEK
},
{ start: "Fri Nov 22 1963 09:00:00 GMT-0600",
end: "Sun Nov 24 1963 00:00:00 GMT-0600",
magnify: 5,
unit: Timeline.DateTime.DAY
},
{ start: "Fri Nov 22 1963 11:00:00 GMT-0600",
end: "Sat Nov 23 1963 00:00:00 GMT-0600",
magnify: 5,
unit: Timeline.DateTime.MINUTE,
multiple: 60
},
{ start: "Fri Nov 22 1963 12:00:00 GMT-0600",
end: "Fri Nov 22 1963 14:00:00 GMT-0600",
magnify: 3,
unit: Timeline.DateTime.MINUTE,
multiple: 15
}
];

var theme = Timeline.ClassicTheme.create();
theme.event.bubble.width = 250;

var date = "Fri Nov 22 1963 12:45:00 GMT-0600"
var bandInfos = [
Timeline.createHotZoneBandInfo({
width: "75%",
intervalUnit: Timeline.DateTime.WEEK,
intervalPixels: 200,
zones: zones,
eventSource: eventSource,
date: date,
timeZone: -6
// theme: theme
}),
Timeline.createHotZoneBandInfo({
width: "25%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 200,
zones: zones2,
eventSource: eventSource,
date: date,
timeZone: -6,
overview: true
// theme: theme
})
];

// Colored Bands
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
// bandInfos[1].eventPainter.setLayout( bandInfos
[0].eventPainter.getLayout() );

// From Timeline widget
for (var i = 0; i < bandInfos.length; i++) {
bandInfos[i].decorators = [
new Timeline.SpanHighlightDecorator({
startDate: "Fri Nov 22 1963 12:30:00 GMT-0600",
endDate: "Fri Nov 22 1963 13:00:00 GMT-0600",
color: "#FFC080",
opacity: 50,
startLabel: "shot",
endLabel: "t.o.d.",
// theme: theme,
cssClass: 't-highlight1'
}),
new Timeline.PointHighlightDecorator({
date: "Fri Nov 22 1963 14:38:00 GMT-0600",
color: "#FFC080",
opacity: 50,
//theme: theme,
cssClass: 'p-highlight1'
}),
new Timeline.PointHighlightDecorator({
date: "Sun Nov 24 1963 13:00:00 GMT-0600",
color: "#FFC080",
opacity: 50
//theme: theme
})
];
}

tl = Timeline.create(div, bandInfos, Timeline.HORIZONTAL);
// From protein timeline
// tl.getBand(0).setCenterVisibleDate
(Timeline.DateTime.parseGregorianDateTime(date));
// tl.getBand(0).setCenterVisibleDate
(Timeline.DateTime.parseGregorianDateTime("0500AD"));
// tl.getBand(1).setMinVisibleDate(-100);

return tl;
}
}

</script>

[Greg Linch]

Got some help and figured it out.