UDNZTimeline

A light javascript library supporting multiple browsers to draw smart, beauty and dynamic timelines.

Overview

Demo 1: Basically

Please move your mouse over the nodes, enjoy it!

Features: Html:
<div id="demo_1_container"></div>
Script:
$.UDNZTimeline({
    data_url": "data/demo-1.json",
    "container": {
        "id": "demo_1_container",
        "width": 600
    }
}).Draw();

Demo 2: Customized styles and effects.

Features: Html:
<div id="demo_2_1_container"></div>
Script:
$.UDNZTimeline({
    "data_url": "data/demo-2-1.json",
    "container": {
        "id": "demo_2_container"
    },
    "dots": {
        "states": {
            "normal": {
                "color": "#0088ff",
                "radius": 12,
                "border": 6
            },
            "active": {
                "color": "#004499",
                "radius": 12,
                "border": 12
            }
        }
    },
    "lines": {
        "width": 4,
        "color": "#6699ff"
    },
    "board": {
        "width": 300,
        "color_bg": "#0088ff",
        "margin": 10,
        "border": 3,
        "spliter_width": 1
    },
    "effect": $.DEFINED_EFFECT_TYPE.rotateX | $.DEFINED_EFFECT_TYPE.slide
}).Draw();
You can configure them in the data(data/demo-2-2.json) for dynamic rending as well.

Demo 3: Branches

Features: Data: data/demo-3-1.json

Demo: Ultimately

Features: Html:
<div id="demo_3_container"></div>

<input type="button" value="Show the node!" onclick="line.ShowNode('node_5')"/>
<input type="button" value="Hide it!" onclick="line.HideNode()"/>
<input type="button" value="Show the node with callback!"
        onclick="line.ShowNodeCB('node_5',function(){alert('the node is shown.')})"/>
<input type="button" value="Hide it with callback!"
        onclick="line.HideNodeCB(function(){alert('Ok, I am out.');})"/>
Script:
// define a variable to handle the instance so that we can do actions on it.
var line = $.UDNZTimeline({
    "data_url": "data/ultimately.json",
    "container": {
        "id": "demo_3_container",
        "height": 350
    },
    "effect": $.DEFINED_EFFECT_TYPE.rotateY | $.DEFINED_EFFECT_TYPE.slide
}).Draw().ShowNode('node_5',500);

UDNZTimeline by Austin Luo (uonun) is licensed under a GPL License.
Really all that's important to me is that please let me know if you find any bug or improvement.