• Customize size.
• Load data via Ajax.
  We can load data from local/remote url via ajax!

<div id="demo_1_container"></div>

$.UDNZTimeline({
    data_url": "data/demo-1.json",
    "container": {
        "id": "demo_1_container",
        "width": 600
    }
}).Draw();

• Unified customize nodes, lines and detail board.
• Customize displaying effect.

<div id="demo_2_1_container"></div>

$.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();

• Branches from any node.

• Load and draw line at runtime with local data!

• Actions and Callbacks!
  You can make the detail board shown/hidden by javascript as well. Have a nice try by clicking the buttons below:
  
• Customize each nodes, lines and detail board separately!
  This customization this time is separately while not unified! You can define nodes, lines, and detail board one by one.
  Please move the mouse over the blue node and enjoy it!

<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.');})"/>

// 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);