Unofficial JDA (Javascript Dataflow Architecture) Wiki

Uses an external API from MIT to construct graphical timelines from the input data provided to the input terminal.

The HTML page must include the following;

<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>

Reference; http://simile.mit.edu/timeline/

Demos that use it

• rss_feeds_timeline.html

/*
  http://simile.mit.edu/timeline/docs/create-timelines.html
 */
BLUEPRINT(
"~0107720808BA02487eA49DF3FD1CC7B596", 
[
 ["list_in", "onList", 10]
],
[],
function (Class) 
{
    Class.prototype._onInit = function(props)
    {
	var band_config;
	var _UNIT_MAP = {"millisecond" : Timeline.DateTime.MILISECOND,
			 "second" : Timeline.DateTime.SECOND,
			 "minute" : Timeline.DateTime.MINUTE,
	                 "hour" : Timeline.DateTime.HOUR,
	                 "day" : Timeline.DateTime.DAY,
	                 "week" : Timeline.DateTime.WEEK,
	                 "month" : Timeline.DateTime.MONTH,
	                 "year" : Timeline.DateTime.YEAR,
	                 "decade" : Timeline.DateTime.DECADE,
	                 "century" : Timeline.DateTime.CENTURY,
	                 "millennium" : Timeline.DateTime.MILLENNIUM};
	var main_unit = _UNIT_MAP[props["main_interval_unit"]] || Timeline.DateTime.DAY; // day
	var sub_unit = _UNIT_MAP[props["sub_interval_unit"]] || Timeline.DateTime.WEEK; // week
	var self = this;
	var d = props["start_date_time"] || new Date();

	this._ev_src = new Timeline.DefaultEventSource();
	this._resizeTimerID = null;

	band_config = [
			 Timeline.createBandInfo({
			     eventSource: this._ev_src,
					      date:           d,
					      width:          "70%", 
					      intervalUnit:   main_unit, 
					      intervalPixels: 100
					      }),
			 Timeline.createBandInfo({
			     eventSource: this._ev_src,
					      date:           d,
					      width:          "30%", 
					      intervalUnit:   sub_unit, 
					      intervalPixels: 200
					      })
	];
	
	
	band_config[1].syncWith = 0;
	band_config[1].highlight = true;
	
	this._tl = Timeline.create(this.dom_node, band_config);

	function onResize()  
	{
	    if (self._resizeTimerID == null) {
		self._resizeTimerID = window.setTimeout(function() {
		    self._resizeTimerID = null;
		    self._tl.layout();
		}, 500);
	    }
	}

	window.onresize = onResize;
    };
    
    Class.prototype.onList = function(msg)
    {
	var evt, i, n, o;
	var start_date, end_date;
	var coll = [];

	n = msg.length;

	for (i = 0; i < n ; i ++) {
	    o = msg[i];
	    end_date = null;

	    if (o.date) {
	      if (o.date.sort) {
		start_date = o.date[0];
		
		if (o.date.length > 1) {
		  end_date = o.date[1];
		}
	      } else {
		start_date = o.date;
	      }
	    } else {
	      this.warning("Item #" + (i + 1) + " missing date");
	      continue;
	    }

	    try {
	      if (!(start_date instanceof Date)) {
		this.warning("Item #" + (i + 1) + " has invalid date");
		continue;
	      }
	    } catch (ex) {
	      if (!start_date.UTC) {
		this.warning("Item #" + (i + 1) + " has invalid date");
		continue;
	      }
	    }

	    evt = new Timeline.DefaultEventSource.Event(start_date, //msg["date"][0], // start
							end_date, //msg["date"][1], // end
							null, // latest start
							null, // earliest end
							(end_date == null), // bindings["isDuration"] != "true",
							o["name"] || o["label"] || "", // title
							o["html_content"] || o["text_content"] || o["description"] || "", // bindings["description"],
							o["image_data"] || "", //this._resolveRelativeURL(bindings["image"], base),
							o["uri"] || "", //this._resolveRelativeURL(bindings["link"], base),
							"", //this._resolveRelativeURL(bindings["icon"], base),
							o["color"], //bindings["color"],
							null //bindings["textColor"]
							);
	    
	    evt.setWikiInfo(null, null);
	    evt._obj = {};
	    evt.getProperty = function(name)
	      {
		alert(name);
	      };
	    this._ev_src._events.add(evt);
	}
	
	if (n) {
	  this._ev_src._fire("onAddMany", []);
	}
    };
    
}, "New Infotron");