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

Bugfix with legend + examples updated

This commit is contained in:
Phyks 2014-04-08 22:49:27 +02:00
parent eac77ed34c
commit 26a89c736c
9 changed files with 88 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -6,6 +6,16 @@ Timeline.js is a lightweight JS library to plot graphs using SVG. As it uses SVG
I coded it because I couldn't find any basic JS library to do this, without any external dependencies and extra features. Timeline.js is only 13k once minified, and can be reduced under 10k thanks to obfuscation. Better results may be obtained with a little refactor, but that's enough for me. Plus it can be very easily customised to fit your needs.
## Live demos
* [Single graph example](http://phyks.github.io/timeline.js/examples/index.html)
* [Multi graph example](http://phyks.github.io/timeline.js/examples/index2.html)
* [Rounded graph example](http://phyks.github.io/timeline.js/examples/index3.html)
* [Dashed graph example](http://phyks.github.io/timeline.js/examples/index4.html)
* [Line only graph example](http://phyks.github.io/timeline.js/examples/index5.html)
* [Graph with legend example](http://phyks.github.io/timeline.js/examples/index6.html)
* [Interactivity with points example](http://phyks.github.io/timeline.js/examples/index7.html)
## Usage
(See examples for more info. For live examples, see http://phyks.github.io/timeline.js/)

5
examples/index.html
View File

@ -15,10 +15,7 @@
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'line', 'rounded': false, 'fill': true, 'x_callback': false});
SVG.addGraph('test', 'red');
SVG.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test'},{'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.addGraph('test2', 'blue');
SVG.addPoints('test2', [{'x':180, 'y':50, 'label':'%x : %y test'},{'x':120, 'y':100, 'label':'%x : %y test2'},{'x':160,'y':25, 'label':'%x : %y test3'},{'x':150, 'y':-200, 'label':'%x : %y test4'},{'x':100, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':200, 'y':-220, 'label':'%x : %y test4'}]);
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>

5
examples/index2.html
View File

@ -15,7 +15,10 @@
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'line', '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.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test'},{'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.addGraph('test2', 'blue');
SVG.addPoints('test2', [{'x':180, 'y':50, 'label':'%x : %y test'},{'x':120, 'y':100, 'label':'%x : %y test2'},{'x':160,'y':25, 'label':'%x : %y test3'},{'x':150, 'y':-200, 'label':'%x : %y test4'},{'x':100, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':200, 'y':-220, 'label':'%x : %y test4'}]);
SVG.draw();
</script>

4
examples/index3.html
View File

@ -12,10 +12,10 @@
<div id="holder"></div>
<script type="text/javascript" src="../timeline.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.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'line', 'rounded': true, '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.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test'},{'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>

2
examples/index4.html
View File

@ -12,7 +12,7 @@
<div id="holder"></div>
<script type="text/javascript" src="../timeline.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.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'}]);

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="../timeline.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="../timeline.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="../timeline.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>

2
timeline.js
View File

@ -451,7 +451,7 @@ SVG.draw = function() {
});
});
if(SVG.x_callback !== false) {
if(SVG.x_callback !== false && points[point].x + 2.5 < SVG.parent_holder.offsetWidth - SVG.marginRight) {
element = SVG.createElement('text', {'class': 'legend_x', 'fill': 'gray', 'transform': 'translate(0, ' + SVG.parent_holder.offsetHeight + ') scale(1, -1)'});
element.appendChild(document.createTextNode(SVG.x_callback(SVG.raw_points[point].x)));
SVG.g.appendChild(element);