From 26a89c736cfe6132b85bad372e23801d14d10627 Mon Sep 17 00:00:00 2001
From: Phyks <webmaster@phyks.me>
Date: Tue, 8 Apr 2014 22:49:27 +0200
Subject: [PATCH] Bugfix with legend + examples updated

---
 README.md            | 10 ++++++++++
 examples/index.html  |  5 +----
 examples/index2.html |  5 ++++-
 examples/index3.html |  4 ++--
 examples/index4.html |  2 +-
 examples/index5.html | 23 +++++++++++++++++++++++
 examples/index6.html | 23 +++++++++++++++++++++++
 examples/index7.html | 23 +++++++++++++++++++++++
 timeline.js          |  2 +-
 9 files changed, 88 insertions(+), 9 deletions(-)
 create mode 100644 examples/index5.html
 create mode 100644 examples/index6.html
 create mode 100644 examples/index7.html

diff --git a/README.md b/README.md
index 506f809..35ccb3f 100644
--- a/README.md
+++ b/README.md
@@ -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/)
diff --git a/examples/index.html b/examples/index.html
index a930de8..ec9ab6b 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -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>
diff --git a/examples/index2.html b/examples/index2.html
index ec9ab6b..a930de8 100644
--- a/examples/index2.html
+++ b/examples/index2.html
@@ -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>
diff --git a/examples/index3.html b/examples/index3.html
index 5a41cde..7d13f89 100644
--- a/examples/index3.html
+++ b/examples/index3.html
@@ -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>
diff --git a/examples/index4.html b/examples/index4.html
index 76670ea..5a41cde 100644
--- a/examples/index4.html
+++ b/examples/index4.html
@@ -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'}]);
diff --git a/examples/index5.html b/examples/index5.html
new file mode 100644
index 0000000..76670ea
--- /dev/null
+++ b/examples/index5.html
@@ -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>
diff --git a/examples/index6.html b/examples/index6.html
new file mode 100644
index 0000000..f4f9c0e
--- /dev/null
+++ b/examples/index6.html
@@ -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>
diff --git a/examples/index7.html b/examples/index7.html
new file mode 100644
index 0000000..0909b42
--- /dev/null
+++ b/examples/index7.html
@@ -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>
diff --git a/timeline.js b/timeline.js
index e3601a6..b41bbbd 100644
--- a/timeline.js
+++ b/timeline.js
@@ -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);