2014-04-08 22:54:24 +02:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Timeline.js example</title>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
body {
|
|
|
|
|
background-color: #333;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body onload="">
|
|
|
|
|
<div id="holder"></div>
|
2014-04-18 21:42:28 +02:00
|
|
|
<script type="text/javascript" src="../javascripts/timeline.min.js"></script>
|
2014-04-08 22:54:24 +02:00
|
|
|
<script type="text/javascript">
|
2014-04-19 18:18:01 +02:00
|
|
|
var tl = new Timeline({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'none', 'rounded': false, 'fill': false, 'x_callback': false});
|
2014-04-08 22:54:24 +02:00
|
|
|
|
2014-04-19 18:18:01 +02:00
|
|
|
tl.addGraph('test', 'red');
|
|
|
|
|
tl.addPoints('test', [{'x':200, 'y':50, 'label':'Click me !', 'click': function() { alert('Hello World…'); }},{'x':75, 'y':100, 'label':'Click me !', 'click': function() { alert('Hello World…'); }},{'x':150,'y':25, 'label':'Click me !', 'click': function() { alert('Hello World…'); }},{'x':175, 'y':-200, 'label':'Click me !', 'click': function() { alert('Hello World…'); }},{'x':125, 'y':75, 'label':'Click me !', 'click': function() { alert('Hello World…'); }},{'x':225, 'y':-220, 'label':'Click me !', 'click': function() { alert('Hello World…'); }}]);
|
2014-04-08 22:54:24 +02:00
|
|
|
|
2014-04-19 18:18:01 +02:00
|
|
|
tl.draw();
|
2014-04-08 22:54:24 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
