Unofficial JDA (Javascript Dataflow Architecture) WikiPublic Space

TimeLineInfotron

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");
View Page History
Print this page