Timeline Widgetに関するメモ

YiiをJSのTimelineウイジェット対応にしてみる」で書いたSIMILE-Widgetsプロジェクトの年表生成用のJavascriptコード Timeline は多様な描画が可能なので(つまり奥が深そうなので)、ここで気づいたことをメモをしておく。

基本文書

ドキュメント:http://code.google.com/p/simile-widgets/wiki/Timeline

使っているサイト:http://code.google.com/p/simile-widgets/wiki/Timeline_In_the_Wild

事例の3パターン:

  1. ゾーン1つのシンプルなもの:http://simile-widgets.googlecode.com/svn/timeline/tags/latest/src/webapp/examples/monet/monet.html
  1. ゾーン2つで、かつフィルターなどの検索窓があり、かつリンクで当該時期に跳べるもの:http://simile-widgets.googlecode.com/svn/timeline/tags/latest/src/webapp/examples/religions/jewish-history.html
  1. 他のウイジェット類と連携するもの:Googleのtimemapのようなhttp://code.google.com/p/timemap/

個人的にどこまで使えればいいか

上の事例のうち1,2が使えればイイと思ってる。

2のスクリプトソースを貼っておくが、このコードコピペだけで十分な気がする。

スクリプト部

 var tl;
    function onLoad() {
        var eventSource = new Timeline.DefaultEventSource(0);
        var theme = Timeline.ClassicTheme.create();
        // demonstrate highlighting of labels (in addition to icons and tapes)
        theme.event.highlightLabelBackground = true;
        theme.event.bubble.width = 320;
        
        var zones = [
            {   start:    "1700",
                end:      "2100",
                magnify:  5,
                unit:     Timeline.DateTime.DECADE
            },
            {   start:    "1800",
                end:      "2100",
                magnify:  3,
                unit:     Timeline.DateTime.YEAR,
                multiple: 5
            }
        ];
        var zones2 = [
            {   start:    "1700",
                end:      "2100",
                magnify:  5,
                unit:     Timeline.DateTime.DECADE
            },
            {   start:    "1800",
                end:      "2100",
                magnify:  3,
                unit:     Timeline.DateTime.YEAR,
                multiple: 10
            }
        ];
        
        var d = Timeline.DateTime.parseGregorianDateTime("1000");
        var bandInfos = [
            Timeline.createHotZoneBandInfo({
                width:          "75%", 
                intervalUnit:   Timeline.DateTime.CENTURY, 
                intervalPixels: 250,
                zones:          zones,
                eventSource:    eventSource,
                date:           d,
                timeZone:       -6,
                theme:          theme
            }),
            Timeline.createHotZoneBandInfo({
                width:          "25%", 
                intervalUnit:   Timeline.DateTime.CENTURY, 
                intervalPixels: 70,
                zones:          zones2,
                eventSource:    eventSource,
                date:           d,
                overview:       true,
                theme:          theme
            })
        ];
        bandInfos[1].syncWith = 0;
        bandInfos[1].highlight = true;
        
        tl = Timeline.create(
               document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);

        tl.loadXML("jewish.xml", function(xml, url) {
            eventSource.loadXML(xml, url);
        });

        setupFilterHighlightControls(
               document.getElementById("controls"), tl, [0,1], theme);
        }

        function centerTimeline(year) {
        tl.getBand(0).setCenterVisibleDate(new Date(year, 0, 1));
        }

        var resizeTimerID = null;
        function onResize() {
        if (resizeTimerID == null) {
            resizeTimerID = window.setTimeout(function() {
                resizeTimerID = null;
                tl.layout();
            }, 500);
       }
     }

リンクで当該時期に飛ぶHTML

上記のcenterTimeline(year)関数を指定するだけ。

<a href="javascript:centerTimeline(1);">1 AD</a>
<a href="javascript:centerTimeline(250);">250 AD</a>
以下略

this file --> last modified:2012-05-10 12:21:36