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

New line types available : dashed, none or line

Browse Source
This commit is contained in:
Phyks 2014-04-08 10:46:15 +02:00
parent 893de9dad2
commit 97c057e568
6 changed files with 69 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -18,8 +18,10 @@ Then, you need to init the SVG drawing, thanks to `SVG.init({'id': 'holder', 'he
* `width` / `height` : width and height of the created SVG * `width` / `height` : width and height of the created SVG
* `grid` : none / small / big / both to choose which type of grid you want * `grid` : none / small / big / both to choose which type of grid you want
* `x_axis` : true / false to show / hide the x axis * `x_axis` : true / false to show / hide the x axis
* `line` : none / line / dashed to choose line type. You can edit the dasharray by replacing `SVG.dash_style` value
* `fill` : true / false to fill the area below the graph or not
* `rounded` : true / false to use splines to smoothen the graph or not * `rounded` : true / false to use splines to smoothen the graph or not
* `x_callback` : callback function to call to get texts for the x legend. Not yet implemented. * `x_callback` : callback function to call to get texts for the x legend. Not yet implemented
Then, you can add as many graphs as you want, thanks to `SVG.addGraph(NAME, COLOR);` where COLOR must be a valid CSS color. Then, you can add as many graphs as you want, thanks to `SVG.addGraph(NAME, COLOR);` where COLOR must be a valid CSS color.
And you can add points thanks to `SVG.addPoints(GRAPH_NAME, POINTS);`. Points is an array of point objects, which are of the type `{'x': ABSCISSA, 'y': ORDINATE, 'label': LABEL}`. LABEL is the text to display in the infobox when the mouse is over the point. You can use '%x' and '%y' in labels and they will be automatically replaced by the coordinates. You can also use `<sup>` and `<sub>` HTML tags. You can add another (optional) element `click` which must be a ffunction to bind to onclick event on this point. And you can add points thanks to `SVG.addPoints(GRAPH_NAME, POINTS);`. Points is an array of point objects, which are of the type `{'x': ABSCISSA, 'y': ORDINATE, 'label': LABEL}`. LABEL is the text to display in the infobox when the mouse is over the point. You can use '%x' and '%y' in labels and they will be automatically replaced by the coordinates. You can also use `<sup>` and `<sub>` HTML tags. You can add another (optional) element `click` which must be a ffunction to bind to onclick event on this point.

2
examples/index.html
View File

@ -12,7 +12,7 @@
<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, 'rounded': false, '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.addGraph('test', 'red');
SVG.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test'},{'x':75, 'y':100, 'label':'%x : %y test2'},{'x':150,'y':25, 'label':'%x : %y test3'},{'x':175, 'y':-200, 'label':'%x : %y test4'},{'x':125, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':225, 'y':-220, 'label':'%x : %y test4'}]); SVG.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'}]);

2
examples/index2.html
View File

@ -12,7 +12,7 @@
<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, 'rounded': false, '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.addGraph('test', 'red');
SVG.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test. Click me !', 'click': function() { alert('Hello World…'); }},{'x':75, 'y':100, 'label':'%x : %y test2'},{'x':150,'y':25, 'label':'%x : %y test3'},{'x':175, 'y':-200, 'label':'%x : %y test4'},{'x':125, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':225, 'y':-220, 'label':'%x : %y test4'}]); SVG.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test. Click me !', 'click': function() { alert('Hello World…'); }},{'x':75, 'y':100, 'label':'%x : %y test2'},{'x':150,'y':25, 'label':'%x : %y test3'},{'x':175, 'y':-200, 'label':'%x : %y test4'},{'x':125, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':225, 'y':-220, 'label':'%x : %y test4'}]);

23
examples/index3.html Normal file
View File

@ -0,0 +1,23 @@
<html>
<head>
<meta charset="utf-8">
<title>Timeline.js example</title>
<style type="text/css">
body {
background-color: #333;
}
</style>
</head>
<body onload="">
<div id="holder"></div>
<script type="text/javascript" src="../timeline.js"></script>
<script type="text/javascript">
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'dashed', 'rounded': false, 'fill': true, 'x_callback': false});
SVG.addGraph('test', 'red');
SVG.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test. Click me !', 'click': function() { alert('Hello World…'); }},{'x':75, 'y':100, 'label':'%x : %y test2'},{'x':150,'y':25, 'label':'%x : %y test3'},{'x':175, 'y':-200, 'label':'%x : %y test4'},{'x':125, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':225, 'y':-220, 'label':'%x : %y test4'}]);
SVG.draw();
</script>
</body>
</html>

23
examples/index4.html Normal file
View File

@ -0,0 +1,23 @@
<html>
<head>
<meta charset="utf-8">
<title>Timeline.js example</title>
<style type="text/css">
body {
background-color: #333;
}
</style>
</head>
<body onload="">
<div id="holder"></div>
<script type="text/javascript" src="../timeline.js"></script>
<script type="text/javascript">
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'line': 'none', 'rounded': false, 'fill': false, 'x_callback': false});
SVG.addGraph('test', 'red');
SVG.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test. Click me !', 'click': function() { alert('Hello World…'); }},{'x':75, 'y':100, 'label':'%x : %y test2'},{'x':150,'y':25, 'label':'%x : %y test3'},{'x':175, 'y':-200, 'label':'%x : %y test4'},{'x':125, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':225, 'y':-220, 'label':'%x : %y test4'}]);
SVG.draw();
</script>
</body>
</html>

28
timeline.js
View File

@ -13,12 +13,6 @@
* --------------------------------------------------------------------------------- * ---------------------------------------------------------------------------------
*/ */
// TODO :
// * X legend
// * Y axis
// * Better over handling
// * Sorting points when adding them
var SVG = {}; var SVG = {};
SVG.ns = "http://www.w3.org/2000/svg"; SVG.ns = "http://www.w3.org/2000/svg";
SVG.xlinkns = "http://www.w3.org/1999/xlink"; SVG.xlinkns = "http://www.w3.org/1999/xlink";
@ -29,6 +23,9 @@ SVG.marginLeft = 10;
SVG.marginRight = 10; SVG.marginRight = 10;
SVG.rounded = false; SVG.rounded = false;
SVG.x_axis = false; SVG.x_axis = false;
SVG.fill = true;
SVG.line = 'line';
SVG.dashed_style = '5, 5';
SVG.parent_holder = false; SVG.parent_holder = false;
SVG.holder = false; SVG.holder = false;
@ -198,8 +195,10 @@ SVG.getControlPoints = function (data) {
* height / width = size of the svg * height / width = size of the svg
* grid = small / big / both * grid = small / big / both
* x_axis = true / false to show or hide x axis * x_axis = true / false to show or hide x axis
* line = none / line / dashed to choose line type
* rounded = true / false to use splines to smoothen the graph * rounded = true / false to use splines to smoothen the graph
* 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
*/ */
SVG.init = function (arg) { SVG.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/SVG11/feature#Image", "1.1")) {
@ -266,6 +265,8 @@ SVG.init = function (arg) {
SVG.rounded = arg.rounded; SVG.rounded = arg.rounded;
SVG.x_axis = arg.x_axis; SVG.x_axis = arg.x_axis;
SVG.line = arg.line;
SVG.fill = arg.fill;
SVG.x_callback = arg.x_callback; SVG.x_callback = arg.x_callback;
@ -441,11 +442,18 @@ SVG.draw = function() {
path += 'L '+x[point]+' '+y[point]+' '; path += 'L '+x[point]+' '+y[point]+' ';
} }
} }
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' }); if(SVG.fill) {
SVG.g.insertBefore(element, SVG.g.querySelectorAll('.over')[0]); 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]);
}
element = SVG.createElement('path', {'class': 'line', 'stroke': SVG.raw_points[graph].color, 'stroke-width': 2, 'fill': 'none', 'd': 'M '+x[0]+' '+y[0]+' '+path}); if(SVG.line !== 'none') {
SVG.g.appendChild(element); element = SVG.createElement('path', {'class': 'line', 'stroke': SVG.raw_points[graph].color, 'stroke-width': 2, 'fill': 'none', 'd': 'M '+x[0]+' '+y[0]+' '+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++) { 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}); 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});