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

* Better grid : autoscale + good positionning for y axis

Browse Source 
* Value available in legend using %v
This commit is contained in:
Phyks 2014-03-29 17:28:20 +01:00
parent 118b4bc9fb
commit 8809cef704
3 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/index.html
View File

@ -8,7 +8,7 @@
}
</style>
</head>
<body onload="SVG.init('holder', '100%', '100%', 'both', true, true); SVG.addPoints([{'x':200, 'y':50, 'label':'test'},{'x':100, 'y':100, 'label':'test2'},{'x':150,'y':25, 'label':'test3'},{'x':175, 'y':-200, 'label':'test4'},{'x':125, 'y':75, 'label':'µg/m<sup>3</sup>'}]); SVG.draw();">
<body onload="SVG.init('holder', '100%', '100%', 'both', true, true); SVG.addPoints([{'x':200, 'y':50, 'label':'50 test'},{'x':100, 'y':100, 'label':'100 test2'},{'x':150,'y':25, 'label':'25 test3'},{'x':175, 'y':-200, 'label':'-200 test4'},{'x':125, 'y':75, 'label':'%v µg/m<sup>3</sup>'},{'x':225, 'y':-220, 'label':'-220 test4'}]); SVG.draw();">
<div id="holder"></div>
<script type="text/javascript" src="../timeline.js"></script>
</body>

45
timeline.js
View File

@ -81,14 +81,6 @@ SVG.init = function (id, height, width, grid, x_axis, rounded)
}
SVG.grid = grid;
if(SVG.grid !== "none") {
var grid = document.createElementNS(SVG.ns, 'rect');
grid.setAttribute('width', "2000");
grid.setAttribute('height', "2000");
grid.setAttribute('y', "-20");
grid.setAttribute('fill', 'url(#grid)');
SVG.holder.appendChild(grid);
}
var marker = document.createElementNS(SVG.ns, 'marker');
marker.setAttribute('id', 'markerArrow');
@ -117,6 +109,19 @@ SVG.init = function (id, height, width, grid, x_axis, rounded)
SVG.g.appendChild(SVG.axis);
}
if(SVG.grid !== "none") {
var grid = document.createElementNS(SVG.ns, 'rect');
grid.setAttribute('width', "100%");
grid.setAttribute('height', "100%");
if(SVG.grid === 'big' || SVG.grid === 'both') {
grid.setAttribute('fill', 'url(#grid)');
}
else {
grid.setAttribute('fill', 'url(#smallGrid)');
}
SVG.g.appendChild(grid);
}
SVG.rounded = rounded;
SVG.x_axis = x_axis;
}
@ -150,6 +155,29 @@ SVG.scale = function(data) {
}
}
y = SVG.newCoordinates(minY+Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10))), minY, maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop) - SVG.newCoordinates(minY, minY, maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop);
if(SVG.grid === 'big' || SVG.grid === 'both') {
SVG.holder.getElementById('grid').setAttribute('width', y);
SVG.holder.getElementById('grid').setAttribute('height', y);
SVG.holder.getElementById('grid').setAttribute('y', SVG.newCoordinates(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))), minY, maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop));
SVG.holder.getElementById('grid').querySelector('path').setAttribute('d', 'M '+y+' 0 L 0 0 0 '+y);
if(SVG.grid === 'both') {
SVG.holder.getElementById('grid').querySelector('rect').setAttribute('width', y);
SVG.holder.getElementById('grid').querySelector('rect').setAttribute('height', y);
}
}
if(SVG.grid === 'small' || SVG.grid === 'both') {
y = y / 10;
SVG.holder.getElementById('smallGrid').setAttribute('width', y);
SVG.holder.getElementById('smallGrid').setAttribute('height', y);
if(SVG.grid === 'small') {
SVG.holder.getElementById('smallGrid').setAttribute('y', SVG.newCoordinates(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))), minY, maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop));
}
SVG.holder.getElementById('smallGrid').querySelector('path').setAttribute('d', 'M '+y+' 0 L 0 0 0 '+y);
SVG.holder.getElementById('smallGrid').querySelector('path').setAttribute('d', 'M '+y+' 0 L 0 0 0 '+y);
}
/* Draw axis */
if(SVG.x_axis === true) {
y = SVG.newCoordinates(0, minY, maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop);
@ -311,6 +339,7 @@ SVG.draw = function() {
var i = 0;
var tmp = false;
for(i = 0; i < text.length; i++) {
text[i] = text[i].replace(/(<([^>]+)>)/ig,"").replace('%v', SVG.raw_points[point][1]);
if(i % 2 == 0) {
element.appendChild(document.createTextNode(text[i]));

2
timeline.min.js vendored
View File

File diff suppressed because one or more lines are too long