My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
Timeline_CustomEventDetailDisplay  
Customize the event detail bubble
Updated Feb 4, 2010 by rdq...@gmail.com
Comment by Sul3...@gmail.com, Jun 3, 2010

Message links are broken

Comment by iain%iai...@gtempaccount.com, Jun 25, 2010

Links are still broken. Anyway, here's how I load bubble contents through Ajax (using jQuery)

      Timeline.DefaultEventSource.Event.prototype.fillInfoBubble = function(element, theme, labeller) {
        jQuery.ajax({
          async: false,
          url: this._link,
          dataType: 'text',
          success: function(data) {
            jQuery(element).html(data)
          }
        })
      }

This cuts down on the generation time of the dynamically loaded json, which doesn't need to generate a complete description for every item in advance.

Comment by Fresheye...@gmail.com, May 28, 2011

I would like the bubbles to all be open on page load. Is this possible?

Comment by KevMu...@gmail.com, Oct 28, 2011

Links are STILL broken.

Why not simply add CustomEventDetailDisplay? here?

Comment by michael....@gmail.com, May 7, 2012

Thanks to Wayback Machine, I'm pasting in the above the referenced emails.

http://web.archive.org/web/20080412074628/http://simile.mit.edu/mail/ReadMsg?listId=9&msgId=21293 Naimesh (Hotmail) wrote: > > Dear Sir, > > > > Hello ! Well I am new to timeline and hence would seek for your help > to do following : > > > > 1) What to do display timeline starting, ending date and title > on mouse hover over the timeline event dot ? Please guide. > I can't understand your question. Could you rephrase it?

> 2) I need to add a checkbox in the info window which opens up on > clicking timeline dot and update one field in one table if user checks > that box on. Please guide me. > Add this code after you include timeline-api.js:

<script>
var oldFillInfoBubble =

Timeline.DefaultEventSource?.Event.prototype.fillInfoBubble;

Timeline.DefaultEventSource?.Event.prototype.fillInfoBubble =
function(elmt, theme, labeller) {
oldFillInfoBubble.call(this, elmt, theme, labeller);

var eventObject = this; var div = document.createElement("div"); div.innerHTML = "<input type='checkbox' /> abc"; div.firstChild.onclick = function() {
... do something ... eventObject should give you the

data you need ...

} elmt.appendChild(div);
}
</script>

> 3) The logo in the bottom left of Simile timeline takes up some > space and hence the client wants to display it off, please guide me > how to do so. > I find this question offensive and I will not answer it. You are using our software for free. At least have the courtesy to keep our logo.

> 4) I have added 2 bands one for year and second for month, the > month timeline has got many events on some month which does not gets > displayed because the area is full, so is there a way to scroll it > vertically or some other way so that user can see other events not > viewable at the moment, please guide me. > No, there is no support for scrolling it vertically.

> 5) How I can display off the title of the event which gets > displayed on the right of the dot, please guide me. > I don't understand the question.

David

http://web.archive.org/web/20080412074618/http://simile.mit.edu/mail/ReadMsg?listId=9&msgId=16981 Hi Michael,

Michael Friendly wrote: > I have a student working on a timeline project based on my web site > on the history of data visualization, > http://www.math.yorku.ca/SCS/Gallery/milestone/ > > A testing version of the timeline is at > http://www.moiz.ca/infovis/milestones/ > with the .xml file at > http://www.moiz.ca/infovis/milestones/timeline.xml > > > Questions: > > BC dates: There is a handful of BC dates in the full database, > and others < 1000. > We've been unable to get timeline to read these in the .xml file, > though we've tried a variety of possibilities. For now, we've just > deleted these events. I believe this bug > has been fixed in the code that reads JSON format, but not for XML. > Have you tried padding zeros to make 4-digit dates, like "0920" and "-0100"?

> Is it possible to control the size / rescale images presented via the > image="" attribute (as one can normally do in html with > <img src="" width="100"> to get thumbs, or is it necessary to produce > the thumbs as separate images? I have several hundred images. > You can have complete control of what goes into the bubble by overriding

Timeline.DefaultEventSource?.Event.prototype.fillInfoBubble

specified near the end of this file

http://simile.mit.edu/timeline/api/scripts/sources.js

Just put in your own code after you include timeline-api.js.

> Is it possible to specify a resolution for the dates presented in the > timeline? All of the event items have times in years. It doesn't make > any sense to see, in the popup bubble, > Wed. 31 Dec 1304 19:00:00 GMT > for an item that has start="1305" > Once you override fillInfoBubble then it's up to you how to display the date. But by default, there is no fine-grained control of that.

> Categorized events: These events have been categorized in several > ways, e.g., by Form-- Maps, Diagrams, Technology. I see from the Monet > example that one can use different icons. Is there any other way to > group events visually by category? e.g., different text color for the > label, different vertical bands, etc. > To group into different bands, load the events into different event sources (instead of just one). Each band can have its own event source. See this example

http://www.lincolnstein.org/timelines/

The text color can be set in the textColor attribute, e.g.,

<event textColor="red" ... <event textColor="#0000ff" ...
The color attribute is for setting the background color of a duration event (one with an end time).

> End for the timeline: How / where can we specify that the timeline > data ends in a given year, so that one can't scroll right to years > past that date? > Sorry, that's not supported.

> I thought that it should be possible to include simple <b>HTML > formatting</b> within an event like that, but this doesn't work. > Is there something I've missed? > You need to escape < and > as you would inside HTML, as < and >.

Hope that helps,

David

http://web.archive.org/web/20080412074623/http://simile.mit.edu/mail/ReadMsg?listId=9&msgId=18666 Kimberly Aimee Alvarado wrote: > Greetings, > > I found the functions fillDescription, fillTime, and fillInfoBubble at > the bottom of that script. Now how do I override them? Where do I > go? Do I need to house the manipulated code locally? Thank you very > much. > You can add your own code after you include timeline-api.js and write something like this:

Timeline.DefaultEventSource?.Event.prototype.fillDescription = function(elmt) {

...
};

David

> >> Message: 4 >> Date: Mon, 02 Jul 2007 23:19:20 -0400 >> From: David Huynh <hidden?> >> Subject: Re: Formatting the content within a bubble >> To: General List <hidden?> >> Message-ID: <hidden?> >> Content-Type: text/plain; charset=ISO-8859-1; format=flowed >> >> Michael, >> >> I presume you meant for Timeline... Take a look at the bottom of this file: >> >> http://simile.mit.edu/timeline/api/scripts/sources.js >> >> You need to override those functions fillDescription, fillTime, and >> fillInfoBubble as needed. >> >> David >> >> Michael Crawford wrote: >> >>> Hi All, >>> >>> I've been searching for a way to change the layout of the content >>> within a bubble. >>> For instance, I'd like to display the date as F j, Y (in php date >>> terms) and move it to below the title. >>> Once I get this, I'm sure we will want to change more. >>> Can anyone point me to how to do this? >>> Thanks much in advance. >>> >>> regards, >>> michael >>> >>> >>> Michael Crawford >>> Rock River Star >>> internet development and consulting >>> http://www.rockriverstar.com >>> 215.609.4470 >>> hidden? <mailto:[email hidden]> >>> >>> >>> ------------------------------------------------------------------------ >>> >>> >>> General mailing list >>> hidden? >>> http://simile.mit.edu/mailman/listinfo/general >>> >>> >> >> ------------------------------ >> >> Message: 5 >> Date: Mon, 2 Jul 2007 21:56:33 -0700 >> From: "Scott Morrison" <hidden?> >> Subject: Re: Loading large datasets into Longwell. >> To: "General List" <hidden?> >> Message-ID: >> <hidden?> >> Content-Type: text/plain; charset=ISO-8859-1; format=flowed >> >> >>> Please let us know the good the bad and the ugly as feedback from the >>> field is very valuable to use (you know, when you stare at something for >>> too long you get a little blind so we are not as good at improving it at >>> this point). >>> >> So far I've only done one experiment with a largish data set (all RDF >> generated from the arXiv's OAI export, scraped from arXiv article >> index.html pages, or from citebase's OAI export). A great strength of >> faceted browsing for those generating RDF metadata from other sources >> is that it's often easy and painless to find unexpected problems with >> your metadata. For example, I discovered lots of problems with my >> parsing of comma separated fields into separate RDF statements, and >> also found some strange bugs with reduplicated data coming from the >> aXiv. >> >> My biggest piece of feedback so far would really be that you need some >> better documentation! Nothing is too hard once you've poked around a >> bit, but since it is in principle so easy to get up and going, it >> would be nice to have sufficient instructions to do so. (Things like: >> it's using sesame for the rdf store, which files contain the rdf store >> configuration, that it's useing lucene, where lucene stores it data, >> etc, would all be great on the website. Also I'm still having trouble >> understanding how Longwell 'names' nodes; I can't seem to get it to >> use foaf:names, for example. There's an email indexed on google >> somewhere about this, but nothing else.) It's a far more polished >> program than you'd ever guess from the documentation. Perhaps one of >> the dangers of programs produced in academia -- too little incentive >> to hang around for the boring documentation part of the work! (I say >> this from a position of considerably deeper culpability than whoever >> worked on Longwell ...) >> >> Scott

http://web.archive.org/web/20080412074608/http://simile.mit.edu/mail/ReadMsg?listId=9&msgId=10303 Ernesto Bautista wrote: > How do you go about customizing what goes into the event bubble, and > where things are placed. For my project, I would like to have the > start and end dates right below the title and above the description. > I want to have just the dates shown, I don't need UTC time displayed > for my purposes. I've tried a few things, but none of them work. > Usually what happens is (I'm assuming) the date/time information I've > changed is no longer readable to the code, so it skips displaying it. > > I also wonder if it is possible to embed a Flash file into the event > bubble. Anyway, thanks for making a great app! You can take complete control of what goes into the bubble by overriding |fillInfoBubble(elmt, theme, labeller)| in |Timeline.DefaultEventSource?.Event. |Fine fillInfoBubble at the bottom of this file:

http://simile.mit.edu/timeline/api/scripts/sources.js

To override that function, in your own code, write:

Timeline.DefaultEventSource?.Event.prototype.fillInfoBubble = function(elmt, theme, labeller) {

...
}

Hope that helps,

David

http://web.archive.org/web/20080412074613/http://simile.mit.edu/mail/ReadMsg?listId=9&msgId=14331 Christoph Pingel wrote: > Hi, > > I'm just beginning to explore timeline, and it has been a nice > experience so far. Now, I'd like to call a custom javascript function > from the link under the title of an event bubble. It seems however > that the links are treated as relative, so I end up with urls like > http://mysite.org/tl/javascript:foo, which is not what I want. Is > there way to change this behaviour to absolute urls in some settings > file or so? Any pointers to relevant documentation are also > appreciated, I didn't find any. > Look in this file

http://simile.mit.edu/timeline/api/scripts/sources.js
at the bottom for the function fillInfoBubble. You can override it after you include timeline-api.js with your own code

<script>
Timeline.DefaultEventSource?.Event.prototype.fillInfoBubble =

function(elmt, theme, labeller) {

// do whatever to fill elmt
};
</script>

You have complete control of what goes into the bubble.

David


Sign in to add a comment
Powered by Google Project Hosting