I think the JSON structure is the problem. The root shouldn't be "timeline", in fact it shouldn't exist at all. try this line instead of the last:
eventSource.loadJSON(eventData["timeline"], document.location.href); On Oct 3, 9:59 am, Herbert Roitblat <[email protected]> wrote: > Hi, I'm trying to create a simple timeline from ajax calls. Clearly I'm > doing something wrong. Nothing appears in the timeline. > > Here is my javascript. As you can see, I am using yui to retrieve the > data from my server. I include some server data below as well. I init > the timeline when the page loads and then try to put data into it when > the user makes a choice about what data to look at. > > eventData consists of a list of objects with start, title, and duration > event (see below). > > Thanks very much for your help. > Herb > I'm using Firefox 3.6 on Ubuntu 10.04. > > Code: > > function getTimeline(query, label) { > getTimelineURL = "/getTimeline?query="+query; > //alert("getTimelineURL: "+getTimelineURL) > retDocument = YAHOO.util.Connect.asyncRequest('GET', > getTimelineURL, showTimelineCallback, null); > > } > > var showTimelineCallback = { > success: drawTimeline, > failure: failDraw > } > > var resizeTimerID = null; > function onResize() { > if (resizeTimerID == null) { > resizeTimerID = window.setTimeout(function() { > resizeTimerID = null; > tl.layout(); > }, 500); > } > } > > function drawTimeline(o) { > var eventData = > YAHOO.lang.JSON.parse(o.responseText)["timeline"]["events"]; > //getTimelineURL = "/getTimeline?query="+query; > //alert("getTimelineURL: "+getTimelineURL) > bandInfos = [ > Timeline.createBandInfo({ > width: "70%", > intervalUnit: Timeline.DateTime.MONTH, > intervalPixels: 100 > }), > Timeline.createBandInfo({ > width: "30%", > intervalUnit: Timeline.DateTime.YEAR, > intervalPixels: 200 > }) > ]; > bandInfos[1].syncWith = 0; > bandInfos[1].highlight = true; > > tl = Timeline.create(document.getElementById("clusTimeline"), > bandInfos); > var eventSource = new Timeline.DefaultEventSource(); > var theme = Timeline.ClassicTheme.create(); > var startDate = "Fri Jan 1 1999 00:00:00 GMT-0600"; > var endDate = "Mon Dec 30 2002 00:00:00 GMT-0600" > > bandInfos[1].decorators = [ > new Timeline.SpanHighlightDecorator({ > startDate: startDate, > endDate: endDate, > inFront: false, > color: "#FFC080", > opacity: 30, > startLabel: "Begin", > endLabel: "End", > theme: theme > }) > ] > eventSource.loadJSON(eventData, document.location.href); > > } > > A sample of my json data: > > |{"timeline": {"events": [{"start": "Wed, 31 Jan 2001 04:07:00 -0800 (PST)", > "durationEvent": false, > "title"||: "Directory"}, {"start": "Mon, 19 Feb 2001 12:05:00 -0800 (PST)", > "durationEvent": false, > "title": "The|| Potential Impact of a Recession on US Gas and Power Markets > -\r\n CERA Multimedia Presentation"}, > {"start"||: "Wed, 26 Apr 2000 08:46:00 -0700 (PDT)", "durationEvent": false, > "title": "CERA Multimedia Presentation|| Replay Now Available! April 12, 200 > 0"}, {"start": "Fri, 17 Dec 1999 07:56:00 -0800 (PST)", "durationEvent"||: > false, "title": "CERA CERA Conference Call--scheduled for Tuesday, December > 14, 1999\r\n - Conference|| Call"},| -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
