From 0308b8582a19d73607dea5339d43a39ae0664491 Mon Sep 17 00:00:00 2001
From: Phyks <webmaster@phyks.me>
Date: Tue, 8 Apr 2014 20:08:33 +0200
Subject: [PATCH] Refactor of points handling : no more need to pre-sort data.
 TODO : onclick + onmouseover

---
 README.md           |   7 +-
 examples/index.html |   2 +-
 timeline.js         | 286 ++++++++++++++++++++------------------------
 timeline.min.js     |   2 +-
 4 files changed, 138 insertions(+), 159 deletions(-)

diff --git a/README.md b/README.md
index 994fb5e..aadbb11 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ Timeline.js
 
 Timeline.js is a lightweight JS library to plot graphs using SVG. As it uses SVG, you can add event listeners on the plotted graph very easily.
 
-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.
+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.
 
 ## Usage
 
@@ -32,7 +32,7 @@ Finally, you can draw the SVG thanks to `SVG.draw();`.
 
 ## Other functions
 
-* `SVG.clearGraph(GRAPH);` to delete the data for the graph GRAPH, or for all graphs if GRAPH is not specified.
+* `SVG.clearGraph(GRAPH);` to delete the data for the graph GRAPH, or for all graphs + the graphs definition if GRAPH is not specified.
 * `SVG.hasGraph(GRAPH);` to check if a graph with name GRAPH has already been defined or not.
 
 ## License
@@ -56,7 +56,6 @@ Feel free to contribute !
 * Legend on X axis is not implemented
 * Y axis is not implemented, but could be implemented easily
 * Over effect is a bit overkill right now
-* You must add your points sorted, as the script won't sort them for you and it may result in very weird graphs
 * Onclick events not working when there are multiple graphs.
 
-The last three points are easy to implement by refactoring the way the raw points are stored and using a single array for all the graphs.
+The last two points are easy to implement by refactoring the way the raw points are stored and using a single array for all the graphs.
diff --git a/examples/index.html b/examples/index.html
index 253580f..a930de8 100644
--- a/examples/index.html
+++ b/examples/index.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': '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});
 
         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'}]);
diff --git a/timeline.js b/timeline.js
index 37b6f0c..d95b334 100644
--- a/timeline.js
+++ b/timeline.js
@@ -31,9 +31,8 @@ SVG.parent_holder = false;
 SVG.holder = false;
 SVG.g = false;
 SVG.axis = false;
+SVG.graphs = [];
 SVG.raw_points = [];
-SVG.labels = [];
-SVG.click = [];
 SVG.x_callback = false;
 
 
@@ -54,17 +53,12 @@ SVG.hasClass = function (element, cls) {
 
 // Add a new graph to the SVG
 SVG.addGraph = function (graph, color) {
-    SVG.raw_points[graph] = {};
-    SVG.raw_points[graph].color = color;
-    SVG.raw_points[graph].data = new Array();
-
-    SVG.labels[graph] = new Array();
-    SVG.click[graph] = new Array();
+    SVG.graphs[graph] = color;
 };
 
 // Test wether a graph of name "graph" already exists
 SVG.hasGraph = function (graph) {
-    if(SVG.raw_points[graph] === undefined) {
+    if(typeof(SVG.graphs[graph]) === 'undefined') {
         return false;
     }
     else {
@@ -73,22 +67,40 @@ SVG.hasGraph = function (graph) {
 };
 
 // Clear the specified graph data, or completely clear all the graph data
-SVG.clearGraphData = function (graph) {
+SVG.clearGraph = function (graph) {
     if(typeof(graph) === 'undefined') {
         SVG.raw_points = [];
-        SVG.labels = [];
-        SVG.click = [];
+        SVG.graphs = [];
     }
     else {
-        SVG.raw_points[graph].data = new Array();
-        SVG.labels[graph] = new Array();
-        SVG.click[graph] = new Array();
+        for(var i = 0; i < SVG.raw_points.length; i++) {
+            if(SVG.raw_points[i].graph === graph) {
+                SVG.raw_points[i] = undefined;
+            }
+        }
     }
 };
 
 // Add points to the specified graph
 SVG.addPoints = function (graph, data) {
-    data.sort(function (a, b) {
+    for(var point = 0; point < data.length; point++) {
+        var insert = {'graph': graph, 'x': data[point].x, 'y': data[point].y};
+        if(typeof(data[point].label) !== 'undefined') {
+            insert.label = data[point].label;
+        }
+        else {
+            insert.label = '';
+        }
+        if(typeof(data[point].click) !== 'undefined') {
+            insert.click = data[point].click;
+        }
+        else {
+            insert.click = false;
+        }
+        SVG.raw_points.push(insert);
+    }
+
+    SVG.raw_points.sort(function (a, b) {
         if(a.x < b.x) {
             return -1;
         }
@@ -99,22 +111,6 @@ SVG.addPoints = function (graph, data) {
             return 1;
         }
     });
-
-    for(var point = 0; point < data.length; point++) {
-        SVG.raw_points[graph].data.push([data[point].x, data[point].y]);
-        if(data[point].label !== undefined) {
-            SVG.labels[graph].push(data[point].label);
-        }
-        else {
-            SVG.labels[graph].push('');
-        }
-        if(data[point].click !== undefined) {
-            SVG.click[graph].push(data[point].click);
-        }
-        else {
-            SVG.click[graph].push(false);
-        }
-    }
 };
 
 // Compute new coordinates, knowing the min and max value to fit the graph in the container
@@ -270,6 +266,7 @@ SVG.init = function (arg) {
 
     SVG.x_callback = arg.x_callback;
 
+    /* TODO
     SVG.parent_holder.addEventListener('mousemove', function(e) {
         var evt = e || window.event;
         var rect = false;
@@ -284,9 +281,10 @@ SVG.init = function (arg) {
         }
 
         SVG.overEffect(evt.clientX, evt.clientY);
-    });
+    });*/
 };
 
+/* TODO
 // Handle the over effect 
 SVG.overEffect = function(x, y) {
     if(!document.elementFromPoint(x, y)) {
@@ -314,7 +312,7 @@ SVG.overEffect = function(x, y) {
 
     // Display again the rect element
     rect.setAttribute('display', 'block');
-};
+};*/
 
 // Get the scale so that graph fits with window
 SVG.scale = function(data) {
@@ -327,47 +325,26 @@ SVG.scale = function(data) {
         return false;
     }
 
-    var minX = new Array(), minY = new Array();
-    var maxX = new Array(), maxY = new Array();
+    var minX = false, minY = 0;
+    var maxX = false, maxY = false;
     var circle = false, last_point = false, line = false;
 
-    var tmp_minX, tmp_minY, tmp_maxX, tmp_maxY;
-
     // Look for max and min values for both axis
-    for(graph in data) {
-        tmp_minX = false;
-        tmp_minY = 0;
-        tmp_maxX = false;
-        tmp_maxY = false;
-
-        for(var point = 0; point < data[graph].data.length; point++) {
-            x = data[graph].data[point][0];
-            y = data[graph].data[point][1];
-
-            if(x < tmp_minX || tmp_minX === false) {
-                tmp_minX = x;
-            }
-            if(x > tmp_maxX || tmp_maxX === false) {
-                tmp_maxX = x;
-            }
-            if(y < tmp_minY) {
-                tmp_minY = y;
-            }
-            if(y > tmp_maxY || tmp_maxY === false) {
-                tmp_maxY = y;
-            }
+    for(var point = 0; point < data.length; point++) {
+        if(data[point].x < minX || minX === false) {
+            minX = data[point].x;
+        }
+        if(data[point].x > maxX || maxX === false) {
+            maxX = data[point].x;
+        }
+        if(data[point].y < minY) {
+            minY = data[point].y;
+        }
+        if(data[point].y > maxY || maxY === false) {
+            maxY = data[point].y;
         }
-        minX.push(tmp_minX);
-        minY.push(tmp_minY);
-        maxX.push(tmp_maxX);
-        maxY.push(tmp_maxY);
     }
 
-    minX = Math.min.apply(null, minX);
-    minY = Math.min.apply(null, minY);
-    maxX = Math.max.apply(null, maxX);
-    maxY = Math.max.apply(null, maxY);
-
     // Scale the grid, if needed
     var scale = SVG.getNewXY(minX, maxX, minY, maxY);
     var tmp = scale(Math.pow(10, Math.floor(Math.log(maxX - minX) / Math.log(10))), Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10))));
@@ -414,63 +391,66 @@ SVG.scale = function(data) {
 // Draw graphs
 SVG.draw = function() {
     var scale = SVG.scale(SVG.raw_points);
-    var x, y, path;
+    var points = [], path;
     var px, py;
     var element;
 
-    for(var graph in SVG.raw_points) {
-        x = new Array();
-        y = new Array();
+    for(var point = 0; point < SVG.raw_points.length; point++) {
+        var tmp = scale(SVG.raw_points[point].x, SVG.raw_points[point].y);
+        points.push({'x': tmp.x, 'y': tmp.y, 'graph': SVG.raw_points[point].graph, 'click': SVG.raw_points[point].click, 'label': SVG.raw_points[point].label});
+    }
+
+    // Draw each graph
+    for(var graph in SVG.graphs) {
+        var filtered_points = points.filter(function(el) { return el.graph == graph; });
         path = '';
 
-        /* Draw points */
-        for(var point = 0; point < SVG.raw_points[graph].data.length; point++) {
-            var tmp = scale(SVG.raw_points[graph].data[point][0], SVG.raw_points[graph].data[point][1]);
-            x.push(tmp.x);
-            y.push(tmp.y);
-        }
-
+        // Draw line
         if(SVG.rounded === true) {
+            // TODO
             px = SVG.getControlPoints(x);
             py = SVG.getControlPoints(y);
-            for(var point = 0; point < SVG.raw_points[graph].data.length - 1; point++) {
+            for(var point = 0; point < points.length - 1; point++) {
                 path += 'C '+px.p1[point]+' '+py.p1[point]+' '+px.p2[point]+' '+py.p2[point]+' '+x[point+1]+' '+y[point+1]+' ';
             }
         }
         else {
-            for(var point = 1; point < SVG.raw_points[graph].data.length; point++) {
-                path += 'L '+x[point]+' '+y[point]+' ';
+            for(var point = 1; point < filtered_points.length; point++) {
+                path += 'L '+filtered_points[point].x+' '+filtered_points[point].y+' ';
             }
         }
-        if(SVG.fill) {
-            element = SVG.createElement('path', {'class': 'graph', 'fill': SVG.raw_points[graph].color, 'opacity': '0.25', 'stroke': 'none', 'd': 'M '+x[0]+' '+2*SVG.marginBottom+' L '+x[0]+' '+y[0]+' '+ path + ' L '+x[SVG.raw_points[graph].data.length - 1]+' '+2*SVG.marginBottom+' Z' });
-            SVG.g.insertBefore(element, SVG.g.querySelectorAll('.over')[0]);
-        }
 
         if(SVG.line !== 'none') {
-            element = SVG.createElement('path', {'class': 'line', 'stroke': SVG.raw_points[graph].color, 'stroke-width': 2, 'fill': 'none', 'd': 'M '+x[0]+' '+y[0]+' '+path});
+            element = SVG.createElement('path', {'class': 'line', 'stroke': SVG.graphs[graph], 'stroke-width': 2, 'fill': 'none', 'd': 'M '+filtered_points[0].x+' '+filtered_points[0].y+' '+path});
             if(SVG.line === 'dashed') {
                 element.setAttribute('style', 'stroke-dasharray: '+SVG.dashed_style);
             }
             SVG.g.appendChild(element);
         }
 
-        for(var point = 0; point < SVG.raw_points[graph].data.length; point++) {
-            element = SVG.createElement('circle', {'class': 'point', 'id': 'point_'+point+'_'+graph, 'cx': x[point], 'cy': y[point], 'r': 4, 'fill': '#333', 'stroke': SVG.raw_points[graph].color, 'stroke-width': 2});
+        // Draw fill
+        if(SVG.fill) {
+            element = SVG.createElement('path', {'class': 'graph', 'fill': SVG.graphs[graph], 'opacity': '0.25', 'stroke': 'none', 'd': 'M '+filtered_points[0].x+' '+2*SVG.marginBottom+' L '+filtered_points[0].x+' '+filtered_points[0].y+' '+ path + ' L '+filtered_points[filtered_points.length - 1].x+' '+2*SVG.marginBottom+' Z' });
+            SVG.g.insertBefore(element, SVG.g.querySelectorAll('.over')[0]);
+        }
+
+        // Draw points and labels
+        for(var point = 0; point < filtered_points.length; point++) {
+            element = SVG.createElement('circle', {'class': 'point', 'id': 'point_'+point+'_'+graph, 'cx': filtered_points[point].x, 'cy': filtered_points[point].y, 'r': 4, 'fill': '#333', 'stroke': SVG.graphs[graph], 'stroke-width': 2});
             SVG.g.insertBefore(element, SVG.g.querySelectorAll('.label')[0]);
 
-            if(SVG.click[graph][point] !== false) {
-                element.onclick = SVG.click[graph][point];
+            if(filtered_points[point].click !== false) {
+                element.onclick = filtered_points[point].click;
             }
 
-            if(SVG.labels[graph][point] !== '') {
+            if(filtered_points[point].label !== '') {
                 var g = SVG.createElement('g', { 'class': 'label', 'id': 'label_'+point+'_'+graph, 'transform': 'translate(0, ' + SVG.parent_holder.offsetHeight + ') scale(1, -1)'});
                 SVG.g.appendChild(g);
 
                 element = SVG.createElement('text', {});
-                var text = SVG.labels[graph][point].replace('</sup>', '<sup>').split('<sup>');
+                var text = filtered_points[point].label.replace('</sup>', '<sup>').split('<sup>');
                 for(var i = 0; i < text.length; i++) {
-                    text[i] = text[i].replace(/(<([^>]+)>)/ig,"").replace('%y', SVG.raw_points[graph].data[point][1]).replace('%x', SVG.raw_points[graph].data[point][0]);
+                    text[i] = text[i].replace(/(<([^>]+)>)/ig,"").replace('%y', filtered_points[point].y).replace('%x', filtered_points[point].x);
                     if(i % 2 == 0) {
                         element.appendChild(document.createTextNode(text[i]));
 
@@ -488,30 +468,30 @@ SVG.draw = function() {
                 g.appendChild(path);
                 g.appendChild(element);
 
-                var x_text = x[point] - element.getBoundingClientRect().width / 2;
-                var y_text = SVG.parent_holder.offsetHeight - y[point] - 20;
+                var x_text = filtered_points[point].x - element.getBoundingClientRect().width / 2;
+                var y_text = SVG.parent_holder.offsetHeight - filtered_points[point].y - 20;
                 var element_width = element.getBoundingClientRect().width;
                 var element_height = element.getBoundingClientRect().height;
 
-                if(x[point] - element.getBoundingClientRect().width / 2 < 0) {
-                    x_text = x[point] + 20;
-                    y_text = SVG.parent_holder.offsetHeight - y[point] + 5;
+                if(filtered_points[point].x - element.getBoundingClientRect().width / 2 < 0) {
+                    x_text = filtered_points[point].x + 20;
+                    y_text = SVG.parent_holder.offsetHeight - filtered_points[point].y + 5;
                     path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 7.5)+' L '+(x_text - 10)+' '+(y_text - element_height/2 + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 2.5)+' L '+(x_text - 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' Z');
                 }
-                else if(y[point] + element.getBoundingClientRect().height + 12 > SVG.parent_holder.offsetHeight) {
-                    x_text = x[point] + 20;
-                    y_text = SVG.parent_holder.offsetHeight - y[point] + 5;
+                else if(filtered_points[point].y + element.getBoundingClientRect().height + 12 > SVG.parent_holder.offsetHeight) {
+                    x_text = filtered_points[point].x + 20;
+                    y_text = SVG.parent_holder.offsetHeight - filtered_points[point].y + 5;
                     path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 7.5)+' L '+(x_text - 10)+' '+(y_text - element_height/2 + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 2.5)+' L '+(x_text - 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' Z');
 
                     if(x_text + element_width > SVG.parent_holder.offsetWidth) {
-                        x_text = x[point] - element_width - 20;
-                        y_text = SVG.parent_holder.offsetHeight - y[point] + 5;
+                        x_text = filtered_points[point].y - element_width - 20;
+                        y_text = SVG.parent_holder.offsetHeight - filtered_points[point].y + 5;
                         path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text  - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height/2 + 2.5)+' L '+(x_text + element_width + 10)+' '+(y_text - element_height/2 + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height/2 + 7.5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' Z');
                     }
                 }
-                else if(x[point] + element_width / 2 + 12 > SVG.parent_holder.offsetWidth) {
-                    x_text = x[point] - element_width - 20;
-                    y_text = SVG.parent_holder.offsetHeight - y[point] + 5;
+                else if(filtered_points[point].x + element_width / 2 + 12 > SVG.parent_holder.offsetWidth) {
+                    x_text = filtered_points[point].x - element_width - 20;
+                    y_text = SVG.parent_holder.offsetHeight - filtered_points[point].y + 5;
                     path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text  - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height/2 + 2.5)+' L '+(x_text + element_width + 10)+' '+(y_text - element_height/2 + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height/2 + 7.5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' Z');
                 }
                 else {
@@ -524,52 +504,52 @@ SVG.draw = function() {
                 g.setAttribute('display', 'none');
             }
         }
-
-        for(var point = 0; point < SVG.raw_points[graph].data.length; point++) {
-            var rect = SVG.createElement('rect', {'class': 'over', 'id': 'over_'+point+'_'+graph, 'y': 0, 'fill': 'white', 'opacity': 0, 'height': '100%'});
-            if(point == 0) {
-                rect.setAttribute('x', 0);
-            }
-            else {
-                rect.setAttribute('x', (x[point] + x[point - 1]) / 2);
-            }
-
-            if(point == SVG.raw_points[graph].data.length - 1) {
-                rect.setAttribute('width', SVG.parent_holder.offsetWidth - (x[point] + x[point - 1])/2);
-            }
-            else if(point == 0) {
-                rect.setAttribute('width', (x[1] + x[0])/2 + SVG.marginLeft);
-            }
-            else {
-                rect.setAttribute('width', (x[point + 1] - x[point - 1])/2);
-            }
-            SVG.g.appendChild(rect);
-
-            rect.onclick = (function(x, y) {
-                return function(e) {
-                    var evt = e || window.event;
-
-                    var X = evt.clientX - x;
-                    var Y = this.getBoundingClientRect().bottom - evt.clientY - y;
-                    if(X <= 5 &&  X >= -5 && Y <= 5 && Y >= -5) {
-                        SVG.holder.getElementById(this.getAttribute('id').replace('over', 'point')).onclick();
-                    }
-                }
-            })(x[point], y[point]);
-
-            if(SVG.x_callback !== false) {
-                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(x[point])));
-                SVG.g.appendChild(element);
-                element.setAttribute('x', x[point] - element.getBoundingClientRect().width / 2 + 2.5);
-                var y_zero = scale(0, 0).y
-                element.setAttribute('y', SVG.parent_holder.offsetHeight - SVG.marginBottom - y_zero);
-
-                element = SVG.createElement('line', {'class': 'legend_x', 'stroke': 'gray', 'stroke-width': 2, 'x1': x[point], 'x2': x[point], 'y1': y_zero - 5, 'y2': y_zero + 5});
-                SVG.g.appendChild(element);
-            }
-        }
     }
+
+    /*for(var point = 0; point < points.x.length; point++) {
+        var rect = SVG.createElement('rect', {'class': 'over', 'id': 'over_'+point+'_'+graph, 'y': 0, 'fill': 'white', 'opacity': 0, 'height': '100%'});
+        if(point == 0) {
+            rect.setAttribute('x', 0);
+        }
+        else {
+            rect.setAttribute('x', (points.x[point] + points.x[point - 1]) / 2);
+        }
+
+        if(point == SVG.raw_points.length - 1) {
+            rect.setAttribute('width', SVG.parent_holder.offsetWidth - (points.x[point] + points.x[point - 1])/2);
+        }
+        else if(point == 0) {
+            rect.setAttribute('width', (points.x[1] + points.x[0])/2 + SVG.marginLeft);
+        }
+        else {
+            rect.setAttribute('width', (points.x[point + 1] - points.x[point - 1])/2);
+        }
+        SVG.g.appendChild(rect);
+        /*
+           rect.onclick = (function(x, y) {
+           return function(e) {
+           var evt = e || window.event;
+
+           var X = evt.clientX - x;
+           var Y = this.getBoundingClientRect().bottom - evt.clientY - y;
+           if(X <= 5 &&  X >= -5 && Y <= 5 && Y >= -5) {
+           SVG.holder.getElementById(this.getAttribute('id').replace('over', 'point')).onclick();
+           }
+           }
+           })(x[point], y[point]);
+
+           if(SVG.x_callback !== false) {
+           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(x[point])));
+           SVG.g.appendChild(element);
+           element.setAttribute('x', x[point] - element.getBoundingClientRect().width / 2 + 2.5);
+           var y_zero = scale(0, 0).y
+           element.setAttribute('y', SVG.parent_holder.offsetHeight - SVG.marginBottom - y_zero);
+
+           element = SVG.createElement('line', {'class': 'legend_x', 'stroke': 'gray', 'stroke-width': 2, 'x1': x[point], 'x2': x[point], 'y1': y_zero - 5, 'y2': y_zero + 5});
+           SVG.g.appendChild(element);
+           }
+    }*/
 };
 
 var old = window.onresize || function () {};
diff --git a/timeline.min.js b/timeline.min.js
index 1aece20..f83a5b6 100644
--- a/timeline.min.js
+++ b/timeline.min.js
@@ -1 +1 @@
-var SVG={};SVG.ns="http://www.w3.org/2000/svg";SVG.xlinkns="http://www.w3.org/1999/xlink";SVG.marginBottom=10;SVG.marginTop=15;SVG.marginLeft=10;SVG.marginRight=10;SVG.rounded=false;SVG.x_axis=false;SVG.parent_holder=false;SVG.holder=false;SVG.g=false;SVG.axis=false;SVG.raw_points=[];SVG.labels=[];SVG.click=[];SVG.x_callback=false;SVG.createElement=function(b,a){var c=document.createElementNS(SVG.ns,b);for(attr in a){c.setAttribute(attr,a[attr])}return c};SVG.hasClass=function(b,a){return(" "+b.getAttribute("class")+" ").indexOf(" "+a+" ")>-1};SVG.addGraph=function(b,a){SVG.raw_points[b]={};SVG.raw_points[b].color=a;SVG.raw_points[b].data=new Array();SVG.labels[b]=new Array();SVG.click[b]=new Array()};SVG.hasGraph=function(a){if(SVG.raw_points[a]===undefined){return false}else{return true}};SVG.clearGraphData=function(a){if(typeof(a)==="undefined"){SVG.raw_points=[];SVG.labels=[];SVG.click=[]}else{SVG.raw_points[a].data=new Array();SVG.labels[a]=new Array();SVG.click[a]=new Array()}};SVG.addPoints=function(c,b){b.sort(function(e,d){if(e.x<d.x){return -1}else{if(e.x==d.x){return 0}else{return 1}}});for(var a=0;a<b.length;a++){SVG.raw_points[c].data.push([b[a].x,b[a].y]);if(b[a].label!==undefined){SVG.labels[c].push(b[a].label)}else{SVG.labels[c].push("")}if(b[a].click!==undefined){SVG.click[c].push(b[a].click)}else{SVG.click[c].push(false)}}};SVG.newCoordinate=function(f,d,b,e,g){var c=(g-e)/(b-d);return c*(f-d)+e};SVG.getNewXY=function(a,c,d,b){return function(e,f){return{x:SVG.newCoordinate(e,a,c,SVG.marginLeft,SVG.parent_holder.offsetWidth-SVG.marginRight),y:SVG.newCoordinate(f,d,b,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop)}}};SVG.getControlPoints=function(h){var p=new Array();var o=new Array();var e=h.length-1;var l=new Array();var k=new Array();var j=new Array();var d=new Array();l[0]=0;k[0]=2;j[0]=1;d[0]=h[0]+2*h[1];for(var g=1;g<e-1;g++){l[g]=1;k[g]=4;j[g]=1;d[g]=4*h[g]+2*h[g+1]}l[e-1]=2;k[e-1]=7;j[e-1]=0;d[e-1]=8*h[e-1]+h[e];var f;for(var g=1;g<e;g++){f=l[g]/k[g-1];k[g]=k[g]-f*j[g-1];d[g]=d[g]-f*d[g-1]}p[e-1]=d[e-1]/k[e-1];for(var g=e-2;g>=0;--g){p[g]=(d[g]-j[g]*p[g+1])/k[g]}for(var g=0;g<e-1;g++){o[g]=2*h[g+1]-p[g+1]}o[e-1]=0.5*(h[e]+p[e-1]);return{p1:p,p2:o}};SVG.init=function(j){if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")){alert("ERROR : Your browser does not support embedded SVG.")}SVG.parent_holder=document.getElementById(j.id);var h=SVG.createElement("svg:svg",{width:j.width,height:j.height});h.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink",SVG.xlinkns);SVG.parent_holder.appendChild(h);SVG.holder=SVG.parent_holder.querySelector("svg");defs=SVG.createElement("defs",{});SVG.holder.appendChild(defs);if(j.grid==="small"||j.grid==="both"){var i=SVG.createElement("pattern",{id:"smallGrid",width:8,height:8,patternUnits:"userSpaceOnUse"});var e=SVG.createElement("path",{d:"M 8 0 L 0 0 0 8",fill:"none",stroke:"gray","stroke-width":"0.5"});i.appendChild(e);defs.appendChild(i)}if(j.grid==="big"||j.grid==="both"){var d=SVG.createElement("pattern",{id:"grid",width:80,height:80,patternUnits:"userSpaceOnUse"});if(j.grid==="both"){var c=SVG.createElement("rect",{width:80,height:80,fill:"url(#smallGrid)"});d.appendChild(c)}var f=SVG.createElement("path",{d:"M 80 0 L 0 0 0 80",fill:"none",stroke:"gray","stroke-width":"1"});d.appendChild(f);defs.appendChild(d)}SVG.grid=j.grid;var g=SVG.createElement("marker",{id:"markerArrow",markerWidth:13,markerHeight:13,refX:2,refY:6,orient:"auto"});var b=SVG.createElement("path",{d:"M2,2 L2,11 L10,6 L2,2",fill:"gray"});g.appendChild(b);defs.appendChild(g);SVG.g=SVG.createElement("g",{transform:"translate(0, "+SVG.parent_holder.offsetHeight+") scale(1, -1)"});SVG.holder.appendChild(SVG.g);if(j.x_axis===true){SVG.axis=SVG.createElement("line",{x1:SVG.marginLeft,y1:SVG.parent_holder.offsetHeight/2+1.5,x2:SVG.parent_holder.offsetWidth-13-SVG.marginRight,y2:SVG.parent_holder.offsetHeight/2+1.5,stroke:"gray","stroke-width":3,"marker-end":'url("#markerArrow")'});SVG.g.appendChild(SVG.axis)}if(SVG.grid!=="none"){var a=SVG.createElement("rect",{width:"100%",height:"100%"});if(SVG.grid==="big"||SVG.grid==="both"){a.setAttribute("fill","url(#grid)")}else{a.setAttribute("fill","url(#smallGrid)")}SVG.g.appendChild(a)}SVG.rounded=j.rounded;SVG.x_axis=j.x_axis;SVG.x_callback=j.x_callback;SVG.parent_holder.addEventListener("mousemove",function(n){var k=n||window.event;var m=false;var l=SVG.holder.querySelectorAll(".over");for(m=0;m<l.length;m++){SVG.holder.getElementById(l[m].getAttribute("id").replace("over","point")).setAttribute("r","4");if(SVG.labels[graph][parseInt(l[m].getAttribute("id").replace("over_",""))]!==""){SVG.holder.getElementById(l[m].getAttribute("id").replace("over","label")).setAttribute("display","none")}}SVG.overEffect(k.clientX,k.clientY)})};SVG.overEffect=function(a,c){if(!document.elementFromPoint(a,c)){return}var b=document.elementFromPoint(a,c);if(!SVG.hasClass(b,"over")){return}SVG.holder.getElementById(b.getAttribute("id").replace("over","point")).setAttribute("r","6");if(SVG.labels[graph][parseInt(b.getAttribute("id").replace("over_",""))]!==""){SVG.holder.getElementById(b.getAttribute("id").replace("over","label")).setAttribute("display","block")}b.setAttribute("display","none");SVG.overEffect(a,c);b.setAttribute("display","block")};SVG.scale=function(t){var g=true;for(graph in t){g=false;break}if(g){return false}var r=new Array(),o=new Array();var p=new Array(),n=new Array();var e=false,b=false,h=false;var l,j,k,i;for(graph in t){l=false;j=0;k=false;i=false;for(var m=0;m<t[graph].data.length;m++){x=t[graph].data[m][0];y=t[graph].data[m][1];if(x<l||l===false){l=x}if(x>k||k===false){k=x}if(y<j){j=y}if(y>i||i===false){i=y}}r.push(l);o.push(j);p.push(k);n.push(i)}r=Math.min.apply(null,r);o=Math.min.apply(null,o);p=Math.max.apply(null,p);n=Math.max.apply(null,n);var u=SVG.getNewXY(r,p,o,n);var q=u(Math.pow(10,Math.floor(Math.log(p-r)/Math.log(10))),Math.pow(10,Math.floor(Math.log(n-o)/Math.log(10))));var s=u(0,0);var c={x:q.x-s.x,y:q.y-s.y};if(SVG.grid==="big"||SVG.grid==="both"){var a=SVG.holder.getElementById("grid");a.setAttribute("width",c.x);a.setAttribute("height",c.y);var d=u(Math.floor(r/Math.pow(10,Math.floor(Math.log(p-r)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(p-r)/Math.log(10))),Math.floor(o/Math.pow(10,Math.floor(Math.log(n-o)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(n-o)/Math.log(10))));a.setAttribute("y",d.y);a.setAttribute("x",d.x);a.querySelector("path").setAttribute("d","M "+c.x+" 0 L 0 0 0 "+c.y);if(SVG.grid==="both"){a.querySelector("rect").setAttribute("width",c.x);a.querySelector("rect").setAttribute("height",c.y)}}if(SVG.grid==="small"||SVG.grid==="both"){c.x=c.x/10;c.y=c.y/10;var a=SVG.holder.getElementById("smallGrid");a.setAttribute("width",c.x);a.setAttribute("height",c.y);if(SVG.grid==="small"){var f=u(Math.floor(r/Math.pow(10,Math.floor(Math.log(p-r)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(p-r)/Math.log(10))),Math.floor(o/Math.pow(10,Math.floor(Math.log(n-o)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(n-o)/Math.log(10))));a.setAttribute("y",f.y);a.setAttribute("x",f.x)}a.querySelector("path").setAttribute("d","M "+c.x+" 0 L 0 0 0 "+c.y)}if(SVG.x_axis===true){y=u(0,0).y;SVG.axis.setAttribute("y1",y);SVG.axis.setAttribute("y2",y)}return u};SVG.draw=function(){var t=SVG.scale(SVG.raw_points);var h,f,m;var l,k;var d;for(var c in SVG.raw_points){h=new Array();f=new Array();m="";for(var n=0;n<SVG.raw_points[c].data.length;n++){var r=t(SVG.raw_points[c].data[n][0],SVG.raw_points[c].data[n][1]);h.push(r.x);f.push(r.y)}if(SVG.rounded===true){l=SVG.getControlPoints(h);k=SVG.getControlPoints(f);for(var n=0;n<SVG.raw_points[c].data.length-1;n++){m+="C "+l.p1[n]+" "+k.p1[n]+" "+l.p2[n]+" "+k.p2[n]+" "+h[n+1]+" "+f[n+1]+" "}}else{for(var n=1;n<SVG.raw_points[c].data.length;n++){m+="L "+h[n]+" "+f[n]+" "}}d=SVG.createElement("path",{"class":"graph",fill:SVG.raw_points[c].color,opacity:"0.25",stroke:"none",d:"M "+h[0]+" "+2*SVG.marginBottom+" L "+h[0]+" "+f[0]+" "+m+" L "+h[SVG.raw_points[c].data.length-1]+" "+2*SVG.marginBottom+" Z"});SVG.g.insertBefore(d,SVG.g.querySelectorAll(".over")[0]);d=SVG.createElement("path",{"class":"line",stroke:SVG.raw_points[c].color,"stroke-width":2,fill:"none",d:"M "+h[0]+" "+f[0]+" "+m});SVG.g.appendChild(d);for(var n=0;n<SVG.raw_points[c].data.length;n++){d=SVG.createElement("circle",{"class":"point",id:"point_"+n+"_"+c,cx:h[n],cy:f[n],r:4,fill:"#333",stroke:SVG.raw_points[c].color,"stroke-width":2});SVG.g.insertBefore(d,SVG.g.querySelectorAll(".label")[0]);if(SVG.click[c][n]!==false){d.onclick=SVG.click[c][n]}if(SVG.labels[c][n]!==""){var q=SVG.createElement("g",{"class":"label",id:"label_"+n+"_"+c,transform:"translate(0, "+SVG.parent_holder.offsetHeight+") scale(1, -1)"});SVG.g.appendChild(q);d=SVG.createElement("text",{});var j=SVG.labels[c][n].replace("</sup>","<sup>").split("<sup>");for(var o=0;o<j.length;o++){j[o]=j[o].replace(/(<([^>]+)>)/ig,"").replace("%y",SVG.raw_points[c].data[n][1]).replace("%x",SVG.raw_points[c].data[n][0]);if(o%2==0){d.appendChild(document.createTextNode(j[o]))}else{var r=SVG.createElement("tspan",{dy:"-5"});r.appendChild(document.createTextNode(j[o]));d.appendChild(r)}}m=SVG.createElement("path",{stroke:"black","stroke-width":2,fill:"white",opacity:0.5});q.appendChild(m);q.appendChild(d);var s=h[n]-d.getBoundingClientRect().width/2;var a=SVG.parent_holder.offsetHeight-f[n]-20;var e=d.getBoundingClientRect().width;var p=d.getBoundingClientRect().height;if(h[n]-d.getBoundingClientRect().width/2<0){s=h[n]+20;a=SVG.parent_holder.offsetHeight-f[n]+5;m.setAttribute("d","M "+(s-5)+" "+(a+5)+" L "+(s-5)+" "+(a-p/2+7.5)+" L "+(s-10)+" "+(a-p/2+5)+" L "+(s-5)+" "+(a-p/2+2.5)+" L "+(s-5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a+5)+" Z")}else{if(f[n]+d.getBoundingClientRect().height+12>SVG.parent_holder.offsetHeight){s=h[n]+20;a=SVG.parent_holder.offsetHeight-f[n]+5;m.setAttribute("d","M "+(s-5)+" "+(a+5)+" L "+(s-5)+" "+(a-p/2+7.5)+" L "+(s-10)+" "+(a-p/2+5)+" L "+(s-5)+" "+(a-p/2+2.5)+" L "+(s-5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a+5)+" Z");if(s+e>SVG.parent_holder.offsetWidth){s=h[n]-e-20;a=SVG.parent_holder.offsetHeight-f[n]+5;m.setAttribute("d","M "+(s-5)+" "+(a+5)+" L "+(s-5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p/2+2.5)+" L "+(s+e+10)+" "+(a-p/2+5)+" L "+(s+e+5)+" "+(a-p/2+7.5)+" L "+(s+e+5)+" "+(a+5)+" Z")}}else{if(h[n]+e/2+12>SVG.parent_holder.offsetWidth){s=h[n]-e-20;a=SVG.parent_holder.offsetHeight-f[n]+5;m.setAttribute("d","M "+(s-5)+" "+(a+5)+" L "+(s-5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p/2+2.5)+" L "+(s+e+10)+" "+(a-p/2+5)+" L "+(s+e+5)+" "+(a-p/2+7.5)+" L "+(s+e+5)+" "+(a+5)+" Z")}else{m.setAttribute("d","M "+(s-5)+" "+(a+5)+" L "+(s-5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a+5)+" L "+(s+e/2+2.5)+" "+(a+5)+" L "+(s+e/2)+" "+(a+10)+" L "+(s+e/2-2.5)+" "+(a+5)+" Z")}}}d.setAttribute("x",s);d.setAttribute("y",a);q.setAttribute("display","none")}}for(var n=0;n<SVG.raw_points[c].data.length;n++){var b=SVG.createElement("rect",{"class":"over",id:"over_"+n+"_"+c,y:0,fill:"white",opacity:0,height:"100%"});if(n==0){b.setAttribute("x",0)}else{b.setAttribute("x",(h[n]+h[n-1])/2)}if(n==SVG.raw_points[c].data.length-1){b.setAttribute("width",SVG.parent_holder.offsetWidth-(h[n]+h[n-1])/2)}else{if(n==0){b.setAttribute("width",(h[1]+h[0])/2+SVG.marginLeft)}else{b.setAttribute("width",(h[n+1]-h[n-1])/2)}}SVG.g.appendChild(b);b.onclick=(function(g,i){return function(w){var v=w||window.event;var A=v.clientX-g;var z=this.getBoundingClientRect().bottom-v.clientY-i;if(A<=5&&A>=-5&&z<=5&&z>=-5){SVG.holder.getElementById(this.getAttribute("id").replace("over","point")).onclick()}}})(h[n],f[n]);if(SVG.x_callback!==false){d=SVG.createElement("text",{"class":"legend_x",fill:"gray",transform:"translate(0, "+SVG.parent_holder.offsetHeight+") scale(1, -1)"});d.appendChild(document.createTextNode(SVG.x_callback(h[n])));SVG.g.appendChild(d);d.setAttribute("x",h[n]-d.getBoundingClientRect().width/2+2.5);var u=t(0,0).y;d.setAttribute("y",SVG.parent_holder.offsetHeight-SVG.marginBottom-u);d=SVG.createElement("line",{"class":"legend_x",stroke:"gray","stroke-width":2,x1:h[n],x2:h[n],y1:u-5,y2:u+5});SVG.g.appendChild(d)}}}};var old=window.onresize||function(){};window.onresize=function(){old();if(SVG.g!==false){SVG.g.setAttribute("transform","translate(0, "+SVG.parent_holder.offsetHeight+") scale(1, -1)");if(SVG.x_axis===true){SVG.axis.setAttribute("x2",SVG.parent_holder.offsetWidth-13-SVG.marginRight)}[].forEach.call(SVG.holder.querySelectorAll(".label, .over, .point, .line, .graph, .legend_x"),function(a){a.parentNode.removeChild(a)});SVG.draw()}};
\ No newline at end of file
+var SVG={};SVG.ns="http://www.w3.org/2000/svg";SVG.xlinkns="http://www.w3.org/1999/xlink";SVG.marginBottom=10;SVG.marginTop=15;SVG.marginLeft=10;SVG.marginRight=10;SVG.rounded=false;SVG.x_axis=false;SVG.fill=true;SVG.line="line";SVG.dashed_style="5, 5";SVG.parent_holder=false;SVG.holder=false;SVG.g=false;SVG.axis=false;SVG.raw_points=[];SVG.labels=[];SVG.click=[];SVG.x_callback=false;SVG.createElement=function(b,a){var c=document.createElementNS(SVG.ns,b);for(attr in a){c.setAttribute(attr,a[attr])}return c};SVG.hasClass=function(b,a){return(" "+b.getAttribute("class")+" ").indexOf(" "+a+" ")>-1};SVG.addGraph=function(b,a){SVG.raw_points[b]={};SVG.raw_points[b].color=a;SVG.raw_points[b].data=new Array();SVG.labels[b]=new Array();SVG.click[b]=new Array()};SVG.hasGraph=function(a){if(SVG.raw_points[a]===undefined){return false}else{return true}};SVG.clearGraphData=function(a){if(typeof(a)==="undefined"){SVG.raw_points=[];SVG.labels=[];SVG.click=[]}else{SVG.raw_points[a].data=new Array();SVG.labels[a]=new Array();SVG.click[a]=new Array()}};SVG.addPoints=function(c,b){b.sort(function(e,d){if(e.x<d.x){return -1}else{if(e.x==d.x){return 0}else{return 1}}});for(var a=0;a<b.length;a++){SVG.raw_points[c].data.push([b[a].x,b[a].y]);if(b[a].label!==undefined){SVG.labels[c].push(b[a].label)}else{SVG.labels[c].push("")}if(b[a].click!==undefined){SVG.click[c].push(b[a].click)}else{SVG.click[c].push(false)}}};SVG.newCoordinate=function(f,d,b,e,g){var c=(g-e)/(b-d);return c*(f-d)+e};SVG.getNewXY=function(a,c,d,b){return function(e,f){return{x:SVG.newCoordinate(e,a,c,SVG.marginLeft,SVG.parent_holder.offsetWidth-SVG.marginRight),y:SVG.newCoordinate(f,d,b,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop)}}};SVG.getControlPoints=function(h){var p=new Array();var o=new Array();var e=h.length-1;var l=new Array();var k=new Array();var j=new Array();var d=new Array();l[0]=0;k[0]=2;j[0]=1;d[0]=h[0]+2*h[1];for(var g=1;g<e-1;g++){l[g]=1;k[g]=4;j[g]=1;d[g]=4*h[g]+2*h[g+1]}l[e-1]=2;k[e-1]=7;j[e-1]=0;d[e-1]=8*h[e-1]+h[e];var f;for(var g=1;g<e;g++){f=l[g]/k[g-1];k[g]=k[g]-f*j[g-1];d[g]=d[g]-f*d[g-1]}p[e-1]=d[e-1]/k[e-1];for(var g=e-2;g>=0;--g){p[g]=(d[g]-j[g]*p[g+1])/k[g]}for(var g=0;g<e-1;g++){o[g]=2*h[g+1]-p[g+1]}o[e-1]=0.5*(h[e]+p[e-1]);return{p1:p,p2:o}};SVG.init=function(j){if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")){alert("ERROR : Your browser does not support embedded SVG.")}SVG.parent_holder=document.getElementById(j.id);var h=SVG.createElement("svg:svg",{width:j.width,height:j.height});h.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink",SVG.xlinkns);SVG.parent_holder.appendChild(h);SVG.holder=SVG.parent_holder.querySelector("svg");defs=SVG.createElement("defs",{});SVG.holder.appendChild(defs);if(j.grid==="small"||j.grid==="both"){var i=SVG.createElement("pattern",{id:"smallGrid",width:8,height:8,patternUnits:"userSpaceOnUse"});var e=SVG.createElement("path",{d:"M 8 0 L 0 0 0 8",fill:"none",stroke:"gray","stroke-width":"0.5"});i.appendChild(e);defs.appendChild(i)}if(j.grid==="big"||j.grid==="both"){var d=SVG.createElement("pattern",{id:"grid",width:80,height:80,patternUnits:"userSpaceOnUse"});if(j.grid==="both"){var c=SVG.createElement("rect",{width:80,height:80,fill:"url(#smallGrid)"});d.appendChild(c)}var f=SVG.createElement("path",{d:"M 80 0 L 0 0 0 80",fill:"none",stroke:"gray","stroke-width":"1"});d.appendChild(f);defs.appendChild(d)}SVG.grid=j.grid;var g=SVG.createElement("marker",{id:"markerArrow",markerWidth:13,markerHeight:13,refX:2,refY:6,orient:"auto"});var b=SVG.createElement("path",{d:"M2,2 L2,11 L10,6 L2,2",fill:"gray"});g.appendChild(b);defs.appendChild(g);SVG.g=SVG.createElement("g",{transform:"translate(0, "+SVG.parent_holder.offsetHeight+") scale(1, -1)"});SVG.holder.appendChild(SVG.g);if(j.x_axis===true){SVG.axis=SVG.createElement("line",{x1:SVG.marginLeft,y1:SVG.parent_holder.offsetHeight/2+1.5,x2:SVG.parent_holder.offsetWidth-13-SVG.marginRight,y2:SVG.parent_holder.offsetHeight/2+1.5,stroke:"gray","stroke-width":3,"marker-end":'url("#markerArrow")'});SVG.g.appendChild(SVG.axis)}if(SVG.grid!=="none"){var a=SVG.createElement("rect",{width:"100%",height:"100%"});if(SVG.grid==="big"||SVG.grid==="both"){a.setAttribute("fill","url(#grid)")}else{a.setAttribute("fill","url(#smallGrid)")}SVG.g.appendChild(a)}SVG.rounded=j.rounded;SVG.x_axis=j.x_axis;SVG.line=j.line;SVG.fill=j.fill;SVG.x_callback=j.x_callback;SVG.parent_holder.addEventListener("mousemove",function(n){var k=n||window.event;var m=false;var l=SVG.holder.querySelectorAll(".over");for(m=0;m<l.length;m++){SVG.holder.getElementById(l[m].getAttribute("id").replace("over","point")).setAttribute("r","4");if(SVG.labels[graph][parseInt(l[m].getAttribute("id").replace("over_",""))]!==""){SVG.holder.getElementById(l[m].getAttribute("id").replace("over","label")).setAttribute("display","none")}}SVG.overEffect(k.clientX,k.clientY)})};SVG.overEffect=function(a,c){if(!document.elementFromPoint(a,c)){return}var b=document.elementFromPoint(a,c);if(!SVG.hasClass(b,"over")){return}SVG.holder.getElementById(b.getAttribute("id").replace("over","point")).setAttribute("r","6");if(SVG.labels[graph][parseInt(b.getAttribute("id").replace("over_",""))]!==""){SVG.holder.getElementById(b.getAttribute("id").replace("over","label")).setAttribute("display","block")}b.setAttribute("display","none");SVG.overEffect(a,c);b.setAttribute("display","block")};SVG.scale=function(t){var g=true;for(graph in t){g=false;break}if(g){return false}var r=new Array(),o=new Array();var p=new Array(),n=new Array();var e=false,b=false,h=false;var l,j,k,i;for(graph in t){l=false;j=0;k=false;i=false;for(var m=0;m<t[graph].data.length;m++){x=t[graph].data[m][0];y=t[graph].data[m][1];if(x<l||l===false){l=x}if(x>k||k===false){k=x}if(y<j){j=y}if(y>i||i===false){i=y}}r.push(l);o.push(j);p.push(k);n.push(i)}r=Math.min.apply(null,r);o=Math.min.apply(null,o);p=Math.max.apply(null,p);n=Math.max.apply(null,n);var u=SVG.getNewXY(r,p,o,n);var q=u(Math.pow(10,Math.floor(Math.log(p-r)/Math.log(10))),Math.pow(10,Math.floor(Math.log(n-o)/Math.log(10))));var s=u(0,0);var c={x:q.x-s.x,y:q.y-s.y};if(SVG.grid==="big"||SVG.grid==="both"){var a=SVG.holder.getElementById("grid");a.setAttribute("width",c.x);a.setAttribute("height",c.y);var d=u(Math.floor(r/Math.pow(10,Math.floor(Math.log(p-r)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(p-r)/Math.log(10))),Math.floor(o/Math.pow(10,Math.floor(Math.log(n-o)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(n-o)/Math.log(10))));a.setAttribute("y",d.y);a.setAttribute("x",d.x);a.querySelector("path").setAttribute("d","M "+c.x+" 0 L 0 0 0 "+c.y);if(SVG.grid==="both"){a.querySelector("rect").setAttribute("width",c.x);a.querySelector("rect").setAttribute("height",c.y)}}if(SVG.grid==="small"||SVG.grid==="both"){c.x=c.x/10;c.y=c.y/10;var a=SVG.holder.getElementById("smallGrid");a.setAttribute("width",c.x);a.setAttribute("height",c.y);if(SVG.grid==="small"){var f=u(Math.floor(r/Math.pow(10,Math.floor(Math.log(p-r)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(p-r)/Math.log(10))),Math.floor(o/Math.pow(10,Math.floor(Math.log(n-o)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(n-o)/Math.log(10))));a.setAttribute("y",f.y);a.setAttribute("x",f.x)}a.querySelector("path").setAttribute("d","M "+c.x+" 0 L 0 0 0 "+c.y)}if(SVG.x_axis===true){y=u(0,0).y;SVG.axis.setAttribute("y1",y);SVG.axis.setAttribute("y2",y)}return u};SVG.draw=function(){var t=SVG.scale(SVG.raw_points);var h,f,m;var l,k;var d;for(var c in SVG.raw_points){h=new Array();f=new Array();m="";for(var n=0;n<SVG.raw_points[c].data.length;n++){var r=t(SVG.raw_points[c].data[n][0],SVG.raw_points[c].data[n][1]);h.push(r.x);f.push(r.y)}if(SVG.rounded===true){l=SVG.getControlPoints(h);k=SVG.getControlPoints(f);for(var n=0;n<SVG.raw_points[c].data.length-1;n++){m+="C "+l.p1[n]+" "+k.p1[n]+" "+l.p2[n]+" "+k.p2[n]+" "+h[n+1]+" "+f[n+1]+" "}}else{for(var n=1;n<SVG.raw_points[c].data.length;n++){m+="L "+h[n]+" "+f[n]+" "}}if(SVG.fill){d=SVG.createElement("path",{"class":"graph",fill:SVG.raw_points[c].color,opacity:"0.25",stroke:"none",d:"M "+h[0]+" "+2*SVG.marginBottom+" L "+h[0]+" "+f[0]+" "+m+" L "+h[SVG.raw_points[c].data.length-1]+" "+2*SVG.marginBottom+" Z"});SVG.g.insertBefore(d,SVG.g.querySelectorAll(".over")[0])}if(SVG.line!=="none"){d=SVG.createElement("path",{"class":"line",stroke:SVG.raw_points[c].color,"stroke-width":2,fill:"none",d:"M "+h[0]+" "+f[0]+" "+m});if(SVG.line==="dashed"){d.setAttribute("style","stroke-dasharray: "+SVG.dashed_style)}SVG.g.appendChild(d)}for(var n=0;n<SVG.raw_points[c].data.length;n++){d=SVG.createElement("circle",{"class":"point",id:"point_"+n+"_"+c,cx:h[n],cy:f[n],r:4,fill:"#333",stroke:SVG.raw_points[c].color,"stroke-width":2});SVG.g.insertBefore(d,SVG.g.querySelectorAll(".label")[0]);if(SVG.click[c][n]!==false){d.onclick=SVG.click[c][n]}if(SVG.labels[c][n]!==""){var q=SVG.createElement("g",{"class":"label",id:"label_"+n+"_"+c,transform:"translate(0, "+SVG.parent_holder.offsetHeight+") scale(1, -1)"});SVG.g.appendChild(q);d=SVG.createElement("text",{});var j=SVG.labels[c][n].replace("</sup>","<sup>").split("<sup>");for(var o=0;o<j.length;o++){j[o]=j[o].replace(/(<([^>]+)>)/ig,"").replace("%y",SVG.raw_points[c].data[n][1]).replace("%x",SVG.raw_points[c].data[n][0]);if(o%2==0){d.appendChild(document.createTextNode(j[o]))}else{var r=SVG.createElement("tspan",{dy:"-5"});r.appendChild(document.createTextNode(j[o]));d.appendChild(r)}}m=SVG.createElement("path",{stroke:"black","stroke-width":2,fill:"white",opacity:0.5});q.appendChild(m);q.appendChild(d);var s=h[n]-d.getBoundingClientRect().width/2;var a=SVG.parent_holder.offsetHeight-f[n]-20;var e=d.getBoundingClientRect().width;var p=d.getBoundingClientRect().height;if(h[n]-d.getBoundingClientRect().width/2<0){s=h[n]+20;a=SVG.parent_holder.offsetHeight-f[n]+5;m.setAttribute("d","M "+(s-5)+" "+(a+5)+" L "+(s-5)+" "+(a-p/2+7.5)+" L "+(s-10)+" "+(a-p/2+5)+" L "+(s-5)+" "+(a-p/2+2.5)+" L "+(s-5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a+5)+" Z")}else{if(f[n]+d.getBoundingClientRect().height+12>SVG.parent_holder.offsetHeight){s=h[n]+20;a=SVG.parent_holder.offsetHeight-f[n]+5;m.setAttribute("d","M "+(s-5)+" "+(a+5)+" L "+(s-5)+" "+(a-p/2+7.5)+" L "+(s-10)+" "+(a-p/2+5)+" L "+(s-5)+" "+(a-p/2+2.5)+" L "+(s-5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a+5)+" Z");if(s+e>SVG.parent_holder.offsetWidth){s=h[n]-e-20;a=SVG.parent_holder.offsetHeight-f[n]+5;m.setAttribute("d","M "+(s-5)+" "+(a+5)+" L "+(s-5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p/2+2.5)+" L "+(s+e+10)+" "+(a-p/2+5)+" L "+(s+e+5)+" "+(a-p/2+7.5)+" L "+(s+e+5)+" "+(a+5)+" Z")}}else{if(h[n]+e/2+12>SVG.parent_holder.offsetWidth){s=h[n]-e-20;a=SVG.parent_holder.offsetHeight-f[n]+5;m.setAttribute("d","M "+(s-5)+" "+(a+5)+" L "+(s-5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p/2+2.5)+" L "+(s+e+10)+" "+(a-p/2+5)+" L "+(s+e+5)+" "+(a-p/2+7.5)+" L "+(s+e+5)+" "+(a+5)+" Z")}else{m.setAttribute("d","M "+(s-5)+" "+(a+5)+" L "+(s-5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a-p+5)+" L "+(s+e+5)+" "+(a+5)+" L "+(s+e/2+2.5)+" "+(a+5)+" L "+(s+e/2)+" "+(a+10)+" L "+(s+e/2-2.5)+" "+(a+5)+" Z")}}}d.setAttribute("x",s);d.setAttribute("y",a);q.setAttribute("display","none")}}for(var n=0;n<SVG.raw_points[c].data.length;n++){var b=SVG.createElement("rect",{"class":"over",id:"over_"+n+"_"+c,y:0,fill:"white",opacity:0,height:"100%"});if(n==0){b.setAttribute("x",0)}else{b.setAttribute("x",(h[n]+h[n-1])/2)}if(n==SVG.raw_points[c].data.length-1){b.setAttribute("width",SVG.parent_holder.offsetWidth-(h[n]+h[n-1])/2)}else{if(n==0){b.setAttribute("width",(h[1]+h[0])/2+SVG.marginLeft)}else{b.setAttribute("width",(h[n+1]-h[n-1])/2)}}SVG.g.appendChild(b);b.onclick=(function(g,i){return function(w){var v=w||window.event;var A=v.clientX-g;var z=this.getBoundingClientRect().bottom-v.clientY-i;if(A<=5&&A>=-5&&z<=5&&z>=-5){SVG.holder.getElementById(this.getAttribute("id").replace("over","point")).onclick()}}})(h[n],f[n]);if(SVG.x_callback!==false){d=SVG.createElement("text",{"class":"legend_x",fill:"gray",transform:"translate(0, "+SVG.parent_holder.offsetHeight+") scale(1, -1)"});d.appendChild(document.createTextNode(SVG.x_callback(h[n])));SVG.g.appendChild(d);d.setAttribute("x",h[n]-d.getBoundingClientRect().width/2+2.5);var u=t(0,0).y;d.setAttribute("y",SVG.parent_holder.offsetHeight-SVG.marginBottom-u);d=SVG.createElement("line",{"class":"legend_x",stroke:"gray","stroke-width":2,x1:h[n],x2:h[n],y1:u-5,y2:u+5});SVG.g.appendChild(d)}}}};var old=window.onresize||function(){};window.onresize=function(){old();if(SVG.g!==false){SVG.g.setAttribute("transform","translate(0, "+SVG.parent_holder.offsetHeight+") scale(1, -1)");if(SVG.x_axis===true){SVG.axis.setAttribute("x2",SVG.parent_holder.offsetWidth-13-SVG.marginRight)}[].forEach.call(SVG.holder.querySelectorAll(".label, .over, .point, .line, .graph, .legend_x"),function(a){a.parentNode.removeChild(a)});SVG.draw()}};
\ No newline at end of file