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

Rename global name to Timeline, issue #1 solved

Browse Source
This commit is contained in:
Phyks 2014-04-18 21:54:24 +02:00
parent aedd29d556
commit aa5534f8df
9 changed files with 172 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/index.html
View File

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

12
examples/index2.html
View File

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

8
examples/index3.html
View File

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

8
examples/index4.html
View File

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

8
examples/index5.html
View File

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

8
examples/index6.html
View File

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

8
examples/index7.html
View File

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

282
timeline.js
View File

@ -13,32 +13,32 @@
* --------------------------------------------------------------------------------- * ---------------------------------------------------------------------------------
*/ */
var SVG = {}; var Timeline = {};
SVG.ns = "http://www.w3.org/2000/svg"; Timeline.ns = "http://www.w3.org/2000/svg";
SVG.xlinkns = "http://www.w3.org/1999/xlink"; Timeline.xlinkns = "http://www.w3.org/1999/xlink";
SVG.marginBottom = 10; Timeline.marginBottom = 10;
SVG.marginTop = 15; Timeline.marginTop = 15;
SVG.marginLeft = 10; Timeline.marginLeft = 10;
SVG.marginRight = 10; Timeline.marginRight = 10;
SVG.rounded = false; Timeline.rounded = false;
SVG.x_axis = false; Timeline.x_axis = false;
SVG.fill = true; Timeline.fill = true;
SVG.line = 'line'; Timeline.line = 'line';
SVG.dashed_style = '5, 5'; Timeline.dashed_style = '5, 5';
SVG.parent_holder = false; Timeline.parent_holder = false;
SVG.holder = false; Timeline.holder = false;
SVG.g = false; Timeline.g = false;
SVG.axis = false; Timeline.axis = false;
SVG.graphs = []; Timeline.graphs = [];
SVG.raw_points = []; Timeline.raw_points = [];
SVG.x_callback = false; Timeline.x_callback = false;
// Create an element "element" with the attributes "attrs" // Create an element "element" with the attributes "attrs"
SVG.createElement = function (element, attrs) { Timeline.createElement = function (element, attrs) {
var el = document.createElementNS(SVG.ns, element); var el = document.createElementNS(Timeline.ns, element);
for(attr in attrs) { for(attr in attrs) {
el.setAttribute(attr, attrs[attr]); el.setAttribute(attr, attrs[attr]);
} }
@ -47,18 +47,18 @@ SVG.createElement = function (element, attrs) {
}; };
// Check wether the element "element" has class "class" // Check wether the element "element" has class "class"
SVG.hasClass = function (element, cls) { Timeline.hasClass = function (element, cls) {
return (' ' + element.getAttribute('class') + ' ').indexOf(' ' + cls + ' ') > -1; return (' ' + element.getAttribute('class') + ' ').indexOf(' ' + cls + ' ') > -1;
}; };
// Add a new graph to the SVG // Add a new graph to the Timeline
SVG.addGraph = function (graph, color) { Timeline.addGraph = function (graph, color) {
SVG.graphs[graph] = color; Timeline.graphs[graph] = color;
}; };
// Test wether a graph of name "graph" already exists // Test wether a graph of name "graph" already exists
SVG.hasGraph = function (graph) { Timeline.hasGraph = function (graph) {
if(typeof(SVG.graphs[graph]) === 'undefined') { if(typeof(Timeline.graphs[graph]) === 'undefined') {
return false; return false;
} }
else { else {
@ -67,22 +67,22 @@ SVG.hasGraph = function (graph) {
}; };
// Clear the specified graph data, or completely clear all the graph data // Clear the specified graph data, or completely clear all the graph data
SVG.clearGraph = function (graph) { Timeline.clearGraph = function (graph) {
if(typeof(graph) === 'undefined') { if(typeof(graph) === 'undefined') {
SVG.raw_points = []; Timeline.raw_points = [];
SVG.graphs = []; Timeline.graphs = [];
} }
else { else {
for(var i = 0; i < SVG.raw_points.length; i++) { for(var i = 0; i < Timeline.raw_points.length; i++) {
if(SVG.raw_points[i].graph === graph) { if(Timeline.raw_points[i].graph === graph) {
SVG.raw_points[i] = undefined; Timeline.raw_points[i] = undefined;
} }
} }
} }
}; };
// Add points to the specified graph // Add points to the specified graph
SVG.addPoints = function (graph, data) { Timeline.addPoints = function (graph, data) {
for(var point = 0; point < data.length; point++) { for(var point = 0; point < data.length; point++) {
var insert = {'graph': graph, 'x': data[point].x, 'y': data[point].y}; var insert = {'graph': graph, 'x': data[point].x, 'y': data[point].y};
if(typeof(data[point].label) !== 'undefined') { if(typeof(data[point].label) !== 'undefined') {
@ -97,10 +97,10 @@ SVG.addPoints = function (graph, data) {
else { else {
insert.click = false; insert.click = false;
} }
SVG.raw_points.push(insert); Timeline.raw_points.push(insert);
} }
SVG.raw_points.sort(function (a, b) { Timeline.raw_points.sort(function (a, b) {
if(a.x < b.x) { if(a.x < b.x) {
return -1; return -1;
} }
@ -114,23 +114,23 @@ SVG.addPoints = function (graph, data) {
}; };
// Compute new coordinates, knowing the min and max value to fit the graph in the container // Compute new coordinates, knowing the min and max value to fit the graph in the container
SVG.newCoordinate = function(value, min, max, minValue, maxValue) { Timeline.newCoordinate = function(value, min, max, minValue, maxValue) {
var a = (maxValue - minValue) / (max - min); var a = (maxValue - minValue) / (max - min);
return a *(value - min) + minValue; return a *(value - min) + minValue;
}; };
// Compute new X and Y values // Compute new X and Y values
SVG.getNewXY = function (minX, maxX, minY, maxY) { Timeline.getNewXY = function (minX, maxX, minY, maxY) {
return function (x, y) { return function (x, y) {
return { return {
'x': SVG.newCoordinate(x, minX, maxX, SVG.marginLeft, SVG.parent_holder.offsetWidth - SVG.marginRight), 'x': Timeline.newCoordinate(x, minX, maxX, Timeline.marginLeft, Timeline.parent_holder.offsetWidth - Timeline.marginRight),
'y': SVG.newCoordinate(y, minY, maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop) 'y': Timeline.newCoordinate(y, minY, maxY, 2*Timeline.marginBottom, Timeline.parent_holder.offsetHeight - Timeline.marginTop)
}; };
}; };
}; };
// Get the necessary control points to smoothen the graph, is rounded is true // Get the necessary control points to smoothen the graph, is rounded is true
SVG.getControlPoints = function (data) { Timeline.getControlPoints = function (data) {
// From http://www.particleincell.com/wp-content/uploads/2012/06/bezier-spline.js // From http://www.particleincell.com/wp-content/uploads/2012/06/bezier-spline.js
var p1 = new Array(); var p1 = new Array();
var p2 = new Array(); var p2 = new Array();
@ -196,79 +196,79 @@ SVG.getControlPoints = function (data) {
* x_callback = function(args) { } or false is called to display the legend on the x axis * x_callback = function(args) { } or false is called to display the legend on the x axis
* fill = true / false to fill below the graph or not * fill = true / false to fill below the graph or not
*/ */
SVG.init = function (arg) { Timeline.init = function (arg) {
if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) { if(!document.implementation.hasFeature("http://www.w3.org/TR/Timeline11/feature#Image", "1.1")) {
alert("ERROR : Your browser does not support embedded SVG."); alert("ERROR : Your browser does not support embedded Timeline.");
} }
SVG.parent_holder = document.getElementById(arg.id); Timeline.parent_holder = document.getElementById(arg.id);
var svg = SVG.createElement('svg:svg', { 'width': arg.width, 'height': arg.height }); var svg = Timeline.createElement('svg:svg', { 'width': arg.width, 'height': arg.height });
svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', SVG.xlinkns); svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', Timeline.xlinkns);
SVG.parent_holder.appendChild(svg); Timeline.parent_holder.appendChild(svg);
SVG.holder = SVG.parent_holder.querySelector('svg'); Timeline.holder = Timeline.parent_holder.querySelector('svg');
defs = SVG.createElement('defs', {}); defs = Timeline.createElement('defs', {});
SVG.holder.appendChild(defs); Timeline.holder.appendChild(defs);
if(arg.grid === 'small' || arg.grid === 'both') { if(arg.grid === 'small' || arg.grid === 'both') {
var small_grid_pattern = SVG.createElement('pattern', { 'id': 'smallGrid', 'width': 8, 'height': 8, 'patternUnits': 'userSpaceOnUse' }); var small_grid_pattern = Timeline.createElement('pattern', { 'id': 'smallGrid', 'width': 8, 'height': 8, 'patternUnits': 'userSpaceOnUse' });
var small_grid_path = SVG.createElement('path', { 'd': 'M 8 0 L 0 0 0 8', 'fill': 'none', 'stroke': 'gray', 'stroke-width': '0.5' }); var small_grid_path = Timeline.createElement('path', { 'd': 'M 8 0 L 0 0 0 8', 'fill': 'none', 'stroke': 'gray', 'stroke-width': '0.5' });
small_grid_pattern.appendChild(small_grid_path); small_grid_pattern.appendChild(small_grid_path);
defs.appendChild(small_grid_pattern); defs.appendChild(small_grid_pattern);
} }
if(arg.grid === 'big' || arg.grid === 'both') { if(arg.grid === 'big' || arg.grid === 'both') {
var grid_pattern = SVG.createElement('pattern', { 'id': 'grid', 'width': 80, 'height': 80, 'patternUnits': 'userSpaceOnUse' }); var grid_pattern = Timeline.createElement('pattern', { 'id': 'grid', 'width': 80, 'height': 80, 'patternUnits': 'userSpaceOnUse' });
if(arg.grid === 'both') { if(arg.grid === 'both') {
var grid_rect = SVG.createElement('rect', {'width': 80, 'height': 80, 'fill': 'url(#smallGrid)' }); var grid_rect = Timeline.createElement('rect', {'width': 80, 'height': 80, 'fill': 'url(#smallGrid)' });
grid_pattern.appendChild(grid_rect); grid_pattern.appendChild(grid_rect);
} }
var grid_path = SVG.createElement('path', {'d': 'M 80 0 L 0 0 0 80', 'fill': 'none', 'stroke': 'gray', 'stroke-width': '1'}); var grid_path = Timeline.createElement('path', {'d': 'M 80 0 L 0 0 0 80', 'fill': 'none', 'stroke': 'gray', 'stroke-width': '1'});
grid_pattern.appendChild(grid_path); grid_pattern.appendChild(grid_path);
defs.appendChild(grid_pattern); defs.appendChild(grid_pattern);
} }
SVG.grid = arg.grid; Timeline.grid = arg.grid;
var marker = SVG.createElement('marker', {'id': 'markerArrow', 'markerWidth': 13, 'markerHeight': 13, 'refX': 2, 'refY': 6, 'orient': 'auto' }); var marker = Timeline.createElement('marker', {'id': 'markerArrow', 'markerWidth': 13, 'markerHeight': 13, 'refX': 2, 'refY': 6, 'orient': 'auto' });
var marker_path = SVG.createElement('path', {'d': 'M2,2 L2,11 L10,6 L2,2', 'fill': 'gray' }); var marker_path = Timeline.createElement('path', {'d': 'M2,2 L2,11 L10,6 L2,2', 'fill': 'gray' });
marker.appendChild(marker_path); marker.appendChild(marker_path);
defs.appendChild(marker); defs.appendChild(marker);
SVG.g = SVG.createElement('g', {'transform': 'translate(0, ' + SVG.parent_holder.offsetHeight + ') scale(1, -1)'}); Timeline.g = Timeline.createElement('g', {'transform': 'translate(0, ' + Timeline.parent_holder.offsetHeight + ') scale(1, -1)'});
SVG.holder.appendChild(SVG.g); Timeline.holder.appendChild(Timeline.g);
if(arg.x_axis === true) { if(arg.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")'}); Timeline.axis = Timeline.createElement('line', {'x1': Timeline.marginLeft, 'y1': Timeline.parent_holder.offsetHeight / 2 + 1.5, 'x2': Timeline.parent_holder.offsetWidth - 13 - Timeline.marginRight, 'y2': Timeline.parent_holder.offsetHeight / 2 + 1.5, 'stroke': 'gray', 'stroke-width': 3, 'marker-end': 'url("#markerArrow")'});
SVG.g.appendChild(SVG.axis); Timeline.g.appendChild(Timeline.axis);
} }
if(SVG.grid !== "none") { if(Timeline.grid !== "none") {
var grid = SVG.createElement('rect', {'width': '100%', 'height': '100%'}); var grid = Timeline.createElement('rect', {'width': '100%', 'height': '100%'});
if(SVG.grid === 'big' || SVG.grid === 'both') { if(Timeline.grid === 'big' || Timeline.grid === 'both') {
grid.setAttribute('fill', 'url(#grid)'); grid.setAttribute('fill', 'url(#grid)');
} }
else { else {
grid.setAttribute('fill', 'url(#smallGrid)'); grid.setAttribute('fill', 'url(#smallGrid)');
} }
SVG.g.appendChild(grid); Timeline.g.appendChild(grid);
} }
SVG.rounded = arg.rounded; Timeline.rounded = arg.rounded;
SVG.x_axis = arg.x_axis; Timeline.x_axis = arg.x_axis;
SVG.line = arg.line; Timeline.line = arg.line;
SVG.fill = arg.fill; Timeline.fill = arg.fill;
SVG.x_callback = arg.x_callback; Timeline.x_callback = arg.x_callback;
}; };
// Get the scale so that graph fits with window // Get the scale so that graph fits with window
SVG.scale = function(data) { Timeline.scale = function(data) {
var empty = true; var empty = true;
for(graph in data) { for(graph in data) {
empty = false; empty = false;
@ -299,12 +299,12 @@ SVG.scale = function(data) {
} }
// Scale the grid, if needed // Scale the grid, if needed
var scale = SVG.getNewXY(minX, maxX, minY, maxY); var scale = Timeline.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)))); 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))));
var origin = scale(0, 0); var origin = scale(0, 0);
var coordinates = {'x': tmp.x - origin.x, 'y': tmp.y - origin.y }; var coordinates = {'x': tmp.x - origin.x, 'y': tmp.y - origin.y };
if(SVG.grid === 'big' || SVG.grid === 'both') { if(Timeline.grid === 'big' || Timeline.grid === 'both') {
var grid = SVG.holder.getElementById('grid'); var grid = Timeline.holder.getElementById('grid');
grid.setAttribute('width', coordinates.x); grid.setAttribute('width', coordinates.x);
grid.setAttribute('height', coordinates.y); grid.setAttribute('height', coordinates.y);
var big_coords = scale(Math.floor(minX / Math.pow(10, Math.floor(Math.log(maxX - minX) / Math.log(10)))) * Math.pow(10, Math.floor(Math.log(maxX - minX) / Math.log(10))), Math.floor(minY / Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10)))) * Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10)))); var big_coords = scale(Math.floor(minX / Math.pow(10, Math.floor(Math.log(maxX - minX) / Math.log(10)))) * Math.pow(10, Math.floor(Math.log(maxX - minX) / Math.log(10))), Math.floor(minY / Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10)))) * Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10))));
@ -312,18 +312,18 @@ SVG.scale = function(data) {
grid.setAttribute('x', big_coords.x); grid.setAttribute('x', big_coords.x);
grid.querySelector('path').setAttribute('d', 'M '+coordinates.x+' 0 L 0 0 0 '+coordinates.y); grid.querySelector('path').setAttribute('d', 'M '+coordinates.x+' 0 L 0 0 0 '+coordinates.y);
if(SVG.grid === 'both') { if(Timeline.grid === 'both') {
grid.querySelector('rect').setAttribute('width', coordinates.x); grid.querySelector('rect').setAttribute('width', coordinates.x);
grid.querySelector('rect').setAttribute('height', coordinates.y); grid.querySelector('rect').setAttribute('height', coordinates.y);
} }
} }
if(SVG.grid === 'small' || SVG.grid === 'both') { if(Timeline.grid === 'small' || Timeline.grid === 'both') {
coordinates.x = coordinates.x / 10; coordinates.x = coordinates.x / 10;
coordinates.y = coordinates.y / 10; coordinates.y = coordinates.y / 10;
var grid = SVG.holder.getElementById('smallGrid'); var grid = Timeline.holder.getElementById('smallGrid');
grid.setAttribute('width', coordinates.x); grid.setAttribute('width', coordinates.x);
grid.setAttribute('height', coordinates.y); grid.setAttribute('height', coordinates.y);
if(SVG.grid === 'small') { if(Timeline.grid === 'small') {
var small_coords = scale(Math.floor(minX / Math.pow(10, Math.floor(Math.log(maxX - minX) / Math.log(10)))) * Math.pow(10, Math.floor(Math.log(maxX - minX) / Math.log(10))), Math.floor(minY / Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10)))) * Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10)))); var small_coords = scale(Math.floor(minX / Math.pow(10, Math.floor(Math.log(maxX - minX) / Math.log(10)))) * Math.pow(10, Math.floor(Math.log(maxX - minX) / Math.log(10))), Math.floor(minY / Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10)))) * Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10))));
grid.setAttribute('y', small_coords.y); grid.setAttribute('y', small_coords.y);
grid.setAttribute('x', small_coords.x); grid.setAttribute('x', small_coords.x);
@ -332,41 +332,41 @@ SVG.scale = function(data) {
} }
/* Draw axis */ /* Draw axis */
if(SVG.x_axis === true) { if(Timeline.x_axis === true) {
y = scale(0, 0).y; y = scale(0, 0).y;
SVG.axis.setAttribute('y1', y); Timeline.axis.setAttribute('y1', y);
SVG.axis.setAttribute('y2', y); Timeline.axis.setAttribute('y2', y);
} }
return scale; return scale;
}; };
// Draw graphs // Draw graphs
SVG.draw = function() { Timeline.draw = function() {
var scale = SVG.scale(SVG.raw_points); var scale = Timeline.scale(Timeline.raw_points);
var points = [], path; var points = [], path;
var px, py; var px, py;
var element; var element;
for(var point = 0; point < SVG.raw_points.length; point++) { for(var point = 0; point < Timeline.raw_points.length; point++) {
var tmp = scale(SVG.raw_points[point].x, SVG.raw_points[point].y); var tmp = scale(Timeline.raw_points[point].x, Timeline.raw_points[point].y);
points.push({'id': point, 'x': tmp.x, 'y': tmp.y, 'graph': SVG.raw_points[point].graph, 'click': SVG.raw_points[point].click, 'label': SVG.raw_points[point].label}); points.push({'id': point, 'x': tmp.x, 'y': tmp.y, 'graph': Timeline.raw_points[point].graph, 'click': Timeline.raw_points[point].click, 'label': Timeline.raw_points[point].label});
} }
// Draw each graph // Draw each graph
for(var graph in SVG.graphs) { for(var graph in Timeline.graphs) {
var filtered_points = points.filter(function(el) { return el.graph == graph; }); var filtered_points = points.filter(function(el) { return el.graph == graph; });
path = ''; path = '';
// Draw line // Draw line
if(SVG.rounded === true) { if(Timeline.rounded === true) {
var x = new Array(), y = new Array(); var x = new Array(), y = new Array();
for(var point = 0; point < filtered_points.length; point++) { for(var point = 0; point < filtered_points.length; point++) {
x.push(filtered_points[point].x); x.push(filtered_points[point].x);
y.push(filtered_points[point].y); y.push(filtered_points[point].y);
} }
px = SVG.getControlPoints(x); px = Timeline.getControlPoints(x);
py = SVG.getControlPoints(y); py = Timeline.getControlPoints(y);
for(var point = 0; point < filtered_points.length - 1; point++) { for(var point = 0; point < filtered_points.length - 1; point++) {
path += 'C '+px.p1[point]+' '+py.p1[point]+' '+px.p2[point]+' '+py.p2[point]+' '+filtered_points[point+1].x+' '+filtered_points[point+1].y+' '; path += 'C '+px.p1[point]+' '+py.p1[point]+' '+px.p2[point]+' '+py.p2[point]+' '+filtered_points[point+1].x+' '+filtered_points[point+1].y+' ';
} }
@ -377,25 +377,25 @@ SVG.draw = function() {
} }
} }
if(SVG.line !== 'none') { if(Timeline.line !== 'none') {
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}); element = Timeline.createElement('path', {'class': 'line', 'stroke': Timeline.graphs[graph], 'stroke-width': 2, 'fill': 'none', 'd': 'M '+filtered_points[0].x+' '+filtered_points[0].y+' '+path});
if(SVG.line === 'dashed') { if(Timeline.line === 'dashed') {
element.setAttribute('style', 'stroke-dasharray: '+SVG.dashed_style); element.setAttribute('style', 'stroke-dasharray: '+Timeline.dashed_style);
} }
SVG.g.appendChild(element); Timeline.g.appendChild(element);
} }
// Draw fill // Draw fill
if(SVG.fill) { if(Timeline.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' }); element = Timeline.createElement('path', {'class': 'graph', 'fill': Timeline.graphs[graph], 'opacity': '0.25', 'stroke': 'none', 'd': 'M '+filtered_points[0].x+' '+2*Timeline.marginBottom+' L '+filtered_points[0].x+' '+filtered_points[0].y+' '+ path + ' L '+filtered_points[filtered_points.length - 1].x+' '+2*Timeline.marginBottom+' Z' });
SVG.g.insertBefore(element, SVG.g.querySelectorAll('.over')[0]); Timeline.g.insertBefore(element, Timeline.g.querySelectorAll('.over')[0]);
} }
} }
// Hover effect // Hover effect
var prev = 0; var prev = 0;
for(var point = 0; point < points.length;) { for(var point = 0; point < points.length;) {
var rect = SVG.createElement('rect', {'class': 'over', 'id': 'over_'+point, 'y': 0, 'fill': 'white', 'opacity': 0, 'height': '100%'}); var rect = Timeline.createElement('rect', {'class': 'over', 'id': 'over_'+point, 'y': 0, 'fill': 'white', 'opacity': 0, 'height': '100%'});
var currents = [point]; var currents = [point];
var next = point + 1; var next = point + 1;
@ -420,47 +420,47 @@ SVG.draw = function() {
} }
if(point == points.length - 1) { if(point == points.length - 1) {
rect.setAttribute('width', SVG.parent_holder.offsetWidth - (points[point].x + points[point - 1].x)/2 + 1); rect.setAttribute('width', Timeline.parent_holder.offsetWidth - (points[point].x + points[point - 1].x)/2 + 1);
} }
else if(point == 0) { else if(point == 0) {
rect.setAttribute('width', (points[1].x + points[0].x)/2 + SVG.marginLeft + 1); rect.setAttribute('width', (points[1].x + points[0].x)/2 + Timeline.marginLeft + 1);
} }
else { else {
rect.setAttribute('width', (points[next].x - points[prev].x)/2 + 1); rect.setAttribute('width', (points[next].x - points[prev].x)/2 + 1);
} }
SVG.g.appendChild(rect); Timeline.g.appendChild(rect);
rect.addEventListener('mouseover', (function(arg) { rect.addEventListener('mouseover', (function(arg) {
return function() { return function() {
for(var i = 0; i < arg.length; i++) { for(var i = 0; i < arg.length; i++) {
SVG.holder.getElementById('point_'+arg[i]).setAttribute('r', '6'); Timeline.holder.getElementById('point_'+arg[i]).setAttribute('r', '6');
SVG.holder.getElementById('label_'+arg[i]).setAttribute('display', 'block'); Timeline.holder.getElementById('label_'+arg[i]).setAttribute('display', 'block');
} }
}; };
})(currents)); })(currents));
rect.addEventListener('mouseout', function() { rect.addEventListener('mouseout', function() {
// Reinitialize all states // Reinitialize all states
[].forEach.call(SVG.holder.querySelectorAll('.point'), function(el) { [].forEach.call(Timeline.holder.querySelectorAll('.point'), function(el) {
el.setAttribute('r', '4'); el.setAttribute('r', '4');
}); });
[].forEach.call(SVG.holder.querySelectorAll('.label'), function(el) { [].forEach.call(Timeline.holder.querySelectorAll('.label'), function(el) {
el.setAttribute('display', 'none'); el.setAttribute('display', 'none');
}); });
}); });
if(SVG.x_callback !== false && points[point].x + 2.5 < SVG.parent_holder.offsetWidth - SVG.marginRight) { if(Timeline.x_callback !== false && points[point].x + 2.5 < Timeline.parent_holder.offsetWidth - Timeline.marginRight) {
element = SVG.createElement('text', {'class': 'legend_x', 'fill': 'gray', 'transform': 'translate(0, ' + SVG.parent_holder.offsetHeight + ') scale(1, -1)'}); element = Timeline.createElement('text', {'class': 'legend_x', 'fill': 'gray', 'transform': 'translate(0, ' + Timeline.parent_holder.offsetHeight + ') scale(1, -1)'});
element.appendChild(document.createTextNode(SVG.x_callback(SVG.raw_points[point].x))); element.appendChild(document.createTextNode(Timeline.x_callback(Timeline.raw_points[point].x)));
SVG.g.appendChild(element); Timeline.g.appendChild(element);
element.setAttribute('x', points[point].x - element.getBoundingClientRect().width / 2 + 2.5); element.setAttribute('x', points[point].x - element.getBoundingClientRect().width / 2 + 2.5);
var y_zero = scale(0, 0).y; var y_zero = scale(0, 0).y;
element.setAttribute('y', SVG.parent_holder.offsetHeight - SVG.marginBottom - y_zero); element.setAttribute('y', Timeline.parent_holder.offsetHeight - Timeline.marginBottom - y_zero);
element = SVG.createElement('line', {'class': 'legend_x', 'stroke': 'gray', 'stroke-width': 2, 'x1': points[point].x, 'x2': points[point].x, 'y1': y_zero - 5, 'y2': y_zero + 5}); element = Timeline.createElement('line', {'class': 'legend_x', 'stroke': 'gray', 'stroke-width': 2, 'x1': points[point].x, 'x2': points[point].x, 'y1': y_zero - 5, 'y2': y_zero + 5});
SVG.g.appendChild(element); Timeline.g.appendChild(element);
} }
prev = next - 1; prev = next - 1;
@ -468,12 +468,12 @@ SVG.draw = function() {
} }
// Draw points and labels // Draw points and labels
for(var graph in SVG.graphs) { for(var graph in Timeline.graphs) {
var filtered_points = points.filter(function(el) { return el.graph == graph; }); var filtered_points = points.filter(function(el) { return el.graph == graph; });
for(var point = 0; point < filtered_points.length; point++) { for(var point = 0; point < filtered_points.length; point++) {
element = SVG.createElement('circle', {'class': 'point', 'id': 'point_'+filtered_points[point].id, 'cx': filtered_points[point].x, 'cy': filtered_points[point].y, 'r': 4, 'fill': '#333', 'stroke': SVG.graphs[graph], 'stroke-width': 2}); element = Timeline.createElement('circle', {'class': 'point', 'id': 'point_'+filtered_points[point].id, 'cx': filtered_points[point].x, 'cy': filtered_points[point].y, 'r': 4, 'fill': '#333', 'stroke': Timeline.graphs[graph], 'stroke-width': 2});
SVG.g.insertBefore(element, SVG.g.querySelectorAll('.label')[0]); Timeline.g.insertBefore(element, Timeline.g.querySelectorAll('.label')[0]);
if(filtered_points[point].click !== false) { if(filtered_points[point].click !== false) {
element.onclick = filtered_points[point].click; element.onclick = filtered_points[point].click;
@ -481,63 +481,63 @@ SVG.draw = function() {
element.addEventListener('mouseover', function() { element.addEventListener('mouseover', function() {
this.setAttribute('r', '6'); this.setAttribute('r', '6');
SVG.holder.getElementById(this.getAttribute('id').replace('point', 'label')).setAttribute('display', 'block'); Timeline.holder.getElementById(this.getAttribute('id').replace('point', 'label')).setAttribute('display', 'block');
}); });
if(filtered_points[point].label !== '') { if(filtered_points[point].label !== '') {
var g = SVG.createElement('g', { 'class': 'label', 'id': 'label_'+filtered_points[point].id, 'transform': 'translate(0, ' + SVG.parent_holder.offsetHeight + ') scale(1, -1)'}); var g = Timeline.createElement('g', { 'class': 'label', 'id': 'label_'+filtered_points[point].id, 'transform': 'translate(0, ' + Timeline.parent_holder.offsetHeight + ') scale(1, -1)'});
SVG.g.appendChild(g); Timeline.g.appendChild(g);
g.addEventListener('mouseover', function() { g.addEventListener('mouseover', function() {
SVG.holder.getElementById(this.getAttribute('id').replace('label', 'point')).setAttribute('r', '6'); Timeline.holder.getElementById(this.getAttribute('id').replace('label', 'point')).setAttribute('r', '6');
this.setAttribute('display', 'block'); this.setAttribute('display', 'block');
}); });
element = SVG.createElement('text', {}); element = Timeline.createElement('text', {});
var text = filtered_points[point].label.replace('</sup>', '<sup>').split('<sup>'); var text = filtered_points[point].label.replace('</sup>', '<sup>').split('<sup>');
for(var i = 0; i < text.length; i++) { for(var i = 0; i < text.length; i++) {
text[i] = text[i].replace(/(<([^>]+)>)/ig,"").replace('%y', SVG.raw_points[filtered_points[point].id].y).replace('%x', SVG.raw_points[filtered_points[point].id].x); text[i] = text[i].replace(/(<([^>]+)>)/ig,"").replace('%y', Timeline.raw_points[filtered_points[point].id].y).replace('%x', Timeline.raw_points[filtered_points[point].id].x);
if(i % 2 == 0) { if(i % 2 == 0) {
element.appendChild(document.createTextNode(text[i])); element.appendChild(document.createTextNode(text[i]));
} }
else { else {
var tmp = SVG.createElement('tspan', {'dy': '-5'}); var tmp = Timeline.createElement('tspan', {'dy': '-5'});
tmp.appendChild(document.createTextNode(text[i])); tmp.appendChild(document.createTextNode(text[i]));
element.appendChild(tmp); element.appendChild(tmp);
} }
} }
path = SVG.createElement('path', {'stroke': 'black', 'stroke-width': 2, 'fill': 'white', 'opacity': 0.5}); path = Timeline.createElement('path', {'stroke': 'black', 'stroke-width': 2, 'fill': 'white', 'opacity': 0.5});
// Append here to have them with the good z-index, update their attributes later // Append here to have them with the good z-index, update their attributes later
g.appendChild(path); g.appendChild(path);
g.appendChild(element); g.appendChild(element);
var x_text = filtered_points[point].x - element.getBoundingClientRect().width / 2; var x_text = filtered_points[point].x - element.getBoundingClientRect().width / 2;
var y_text = SVG.parent_holder.offsetHeight - filtered_points[point].y - 20; var y_text = Timeline.parent_holder.offsetHeight - filtered_points[point].y - 20;
var element_width = element.getBoundingClientRect().width; var element_width = element.getBoundingClientRect().width;
var element_height = element.getBoundingClientRect().height; var element_height = element.getBoundingClientRect().height;
if(filtered_points[point].x - element.getBoundingClientRect().width / 2 < 0) { if(filtered_points[point].x - element.getBoundingClientRect().width / 2 < 0) {
x_text = filtered_points[point].x + 20; x_text = filtered_points[point].x + 20;
y_text = SVG.parent_holder.offsetHeight - filtered_points[point].y + 5; y_text = Timeline.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'); 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(filtered_points[point].y + element.getBoundingClientRect().height + 12 > SVG.parent_holder.offsetHeight) { else if(filtered_points[point].y + element.getBoundingClientRect().height + 12 > Timeline.parent_holder.offsetHeight) {
x_text = filtered_points[point].x + 20; x_text = filtered_points[point].x + 20;
y_text = SVG.parent_holder.offsetHeight - filtered_points[point].y + 5; y_text = Timeline.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'); 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) { if(x_text + element_width > Timeline.parent_holder.offsetWidth) {
x_text = filtered_points[point].y - element_width - 20; x_text = filtered_points[point].y - element_width - 20;
y_text = SVG.parent_holder.offsetHeight - filtered_points[point].y + 5; y_text = Timeline.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'); 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(filtered_points[point].x + element_width / 2 + 12 > SVG.parent_holder.offsetWidth) { else if(filtered_points[point].x + element_width / 2 + 12 > Timeline.parent_holder.offsetWidth) {
x_text = filtered_points[point].x - element_width - 20; x_text = filtered_points[point].x - element_width - 20;
y_text = SVG.parent_holder.offsetHeight - filtered_points[point].y + 5; y_text = Timeline.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'); 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 { else {
@ -556,15 +556,15 @@ SVG.draw = function() {
var old = window.onresize || function () {}; var old = window.onresize || function () {};
window.onresize = function() { window.onresize = function() {
old(); old();
// Redraw the SVG to fit the new size // Redraw the Timeline to fit the new size
if(SVG.g !== false) { if(Timeline.g !== false) {
SVG.g.setAttribute('transform', 'translate(0, ' + SVG.parent_holder.offsetHeight + ') scale(1, -1)'); Timeline.g.setAttribute('transform', 'translate(0, ' + Timeline.parent_holder.offsetHeight + ') scale(1, -1)');
if(SVG.x_axis === true) { if(Timeline.x_axis === true) {
SVG.axis.setAttribute('x2', SVG.parent_holder.offsetWidth - 13 - SVG.marginRight); Timeline.axis.setAttribute('x2', Timeline.parent_holder.offsetWidth - 13 - Timeline.marginRight);
} }
[].forEach.call(SVG.holder.querySelectorAll('.label, .over, .point, .line, .graph, .legend_x'), function(el) { [].forEach.call(Timeline.holder.querySelectorAll('.label, .over, .point, .line, .graph, .legend_x'), function(el) {
el.parentNode.removeChild(el); el.parentNode.removeChild(el);
}); });
SVG.draw(); Timeline.draw();
} }
}; };

2
timeline.min.js vendored
View File

File diff suppressed because one or more lines are too long