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

Added README

Browse Source
This commit is contained in:
Phyks 2014-04-07 22:28:53 +02:00
parent b5e74d62a5
commit 119ae51406
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
examples/index.html
View File

@ -8,8 +8,19 @@
} }
</style> </style>
</head> </head>
<body onload="SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'rounded': false, 'x_callback': false}); SVG.addGraph('test', 'red'); SVG.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test'},{'x':75, 'y':100, 'label':'%x : %y test2'},{'x':150,'y':25, 'label':'%x : %y test3'},{'x':175, 'y':-200, 'label':'%x : %y test4'},{'x':125, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':225, 'y':-220, 'label':'%x : %y test4'}]); SVG.addGraph('test2', 'blue'); SVG.addPoints('test2', [{'x':180, 'y':50, 'label':'%x : %y test'},{'x':120, 'y':100, 'label':'%x : %y test2'},{'x':160,'y':25, 'label':'%x : %y test3'},{'x':150, 'y':-200, 'label':'%x : %y test4'},{'x':100, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':200, 'y':-220, 'label':'%x : %y test4'}]); SVG.draw();"> <body onload="">
<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">
SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'rounded': false, 'x_callback': false});
SVG.addGraph('test', 'red');
SVG.addPoints('test', [{'x':200, 'y':50, 'label':'%x : %y test'},{'x':75, 'y':100, 'label':'%x : %y test2'},{'x':150,'y':25, 'label':'%x : %y test3'},{'x':175, 'y':-200, 'label':'%x : %y test4'},{'x':125, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':225, 'y':-220, 'label':'%x : %y test4'}]);
SVG.addGraph('test2', 'blue');
SVG.addPoints('test2', [{'x':180, 'y':50, 'label':'%x : %y test'},{'x':120, 'y':100, 'label':'%x : %y test2'},{'x':160,'y':25, 'label':'%x : %y test3'},{'x':150, 'y':-200, 'label':'%x : %y test4'},{'x':100, 'y':75, 'label':'%x : %y µg/m<sup>3</sup>'},{'x':200, 'y':-220, 'label':'%x : %y test4'}]);
SVG.draw();
</script>
</body> </body>
</html> </html>

5
timeline.js
View File

@ -16,6 +16,8 @@
// TODO : // TODO :
// * X legend // * X legend
// * Y axis // * 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";
@ -88,7 +90,6 @@ SVG.clearGraphData = function (graph) {
}; };
// Add points to the specified graph // Add points to the specified graph
// TODO : Sort with existing also
SVG.addPoints = function (graph, data) { SVG.addPoints = function (graph, data) {
data.sort(function (a, b) { data.sort(function (a, b) {
if(a.x < b.x) { if(a.x < b.x) {
@ -269,7 +270,6 @@ SVG.init = function (arg) {
SVG.x_callback = arg.x_callback; SVG.x_callback = arg.x_callback;
SVG.parent_holder.addEventListener('mousemove', function(e) { SVG.parent_holder.addEventListener('mousemove', function(e) {
// TODO : Better over effect ?
var evt = e || window.event; var evt = e || window.event;
var rect = false; var rect = false;
@ -287,7 +287,6 @@ SVG.init = function (arg) {
}; };
// Handle the over effect // Handle the over effect
// TODO : Better solution ?
SVG.overEffect = function(x, y) { SVG.overEffect = function(x, y) {
if(!document.elementFromPoint(x, y)) { if(!document.elementFromPoint(x, y)) {
return; return;