phyks/timeline.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update examples

Browse Source
This commit is contained in:
Phyks 2014-04-08 22:54:24 +02:00
parent ea6ea52fb4
commit 20dfb46992
7 changed files with 95 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/index.html
View File

@ -10,7 +10,7 @@
</head> </head>
<body onload=""> <body onload="">
<div id="holder"></div> <div id="holder"></div>
<script type="text/javascript" src="../timeline.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/Phyks/timeline.js/master/timeline.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'line', 'rounded': false, 'fill': true, 'x_callback': false}); SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'line', 'rounded': false, 'fill': true, 'x_callback': false});

2
examples/index2.html
View File

@ -10,7 +10,7 @@
</head> </head>
<body onload=""> <body onload="">
<div id="holder"></div> <div id="holder"></div>
<script type="text/javascript" src="../timeline.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/Phyks/timeline.js/master/timeline.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'line', 'rounded': false, 'fill': true, 'x_callback': false}); SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'line', 'rounded': false, 'fill': true, 'x_callback': false});

2
examples/index3.html
View File

@ -10,7 +10,7 @@
</head> </head>
<body onload=""> <body onload="">
<div id="holder"></div> <div id="holder"></div>
<script type="text/javascript" src="../timeline.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/Phyks/timeline.js/master/timeline.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'line', 'rounded': true, 'fill': true, 'x_callback': false}); SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'line', 'rounded': true, 'fill': true, 'x_callback': false});

23
examples/index4.html Normal file
View File

@ -0,0 +1,23 @@
<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>
<script type="text/javascript" src="https://raw.githubusercontent.com/Phyks/timeline.js/master/timeline.min.js"></script>
<script type="text/javascript">
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'dashed', 'rounded': false, 'fill': true, 'x_callback': false});
SVG.addGraph('test', 'red');
SVG.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test. Click me !', 'click': function() { alert('Hello World…'); }},{'x':75, 'y':100, 'label':'%x : %y test2'},{'x':150,'y':25, 'label':'%x : %y test3'},{'x':175, 'y':-200, 'label':'%x : %y test4'},{'x':125, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':225, 'y':-220, 'label':'%x : %y test4'}]);
SVG.draw();
</script>
</body>
</html>

23
examples/index5.html Normal file
View File

@ -0,0 +1,23 @@
<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>
<script type="text/javascript" src="https://raw.githubusercontent.com/Phyks/timeline.js/master/timeline.min.js"></script>
<script type="text/javascript">
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'none', 'rounded': false, 'fill': false, 'x_callback': false});
SVG.addGraph('test', 'red');
SVG.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test. Click me !', 'click': function() { alert('Hello World…'); }},{'x':75, 'y':100, 'label':'%x : %y test2'},{'x':150,'y':25, 'label':'%x : %y test3'},{'x':175, 'y':-200, 'label':'%x : %y test4'},{'x':125, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':225, 'y':-220, 'label':'%x : %y test4'}]);
SVG.draw();
</script>
</body>
</html>

23
examples/index6.html Normal file
View File

@ -0,0 +1,23 @@
<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>
<script type="text/javascript" src="https://raw.githubusercontent.com/Phyks/timeline.js/master/timeline.min.js"></script>
<script type="text/javascript">
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'none', 'rounded': false, 'fill': false, 'x_callback': function(x) { return x;}});
SVG.addGraph('test', 'red');
SVG.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test. Click me !', 'click': function() { alert('Hello World…'); }},{'x':75, 'y':100, 'label':'%x : %y test2'},{'x':150,'y':25, 'label':'%x : %y test3'},{'x':175, 'y':-200, 'label':'%x : %y test4'},{'x':125, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':225, 'y':-220, 'label':'%x : %y test4'}]);
SVG.draw();
</script>
</body>
</html>

23
examples/index7.html Normal file
View File

@ -0,0 +1,23 @@
<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>
<script type="text/javascript" src="https://raw.githubusercontent.com/Phyks/timeline.js/master/timeline.min.js"></script>
<script type="text/javascript">
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'none', 'rounded': false, 'fill': false, 'x_callback': false});
SVG.addGraph('test', 'red');
SVG.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…'); }}]);
SVG.draw();
</script>
</body>
</html>