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

Update README.md

This commit is contained in:
Phyks 2014-04-18 21:51:55 +02:00
parent ed56f750a6
commit aedd29d556
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -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. Plus it can be very easily customised to fit your needs.
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 with 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.
## Live demos
@ -23,7 +23,7 @@ I coded it because I couldn't find any basic JS library to do this, without any
First, you must include the `timeline.js` or `timeline.min.js` script.
Then, you need to init the SVG drawing, thanks to `SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'rounded': false, 'x_callback': false});`. The arguments are all optional and are:
Then, you need to init the SVG drawing, using `SVG.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'rounded': false, 'x_callback': false});`. The arguments are all optional and are:
* `id` : the id of the parent element that will contain the SVG
* `width` / `height` : width and height of the created SVG
* `grid` : none / small / big / both to choose which type of grid you want
@ -33,12 +33,12 @@ Then, you need to init the SVG drawing, thanks to `SVG.init({'id': 'holder', 'he
* `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
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.
Then, you can add as many graphs as you want, with `SVG.addGraph(NAME, COLOR);` where COLOR must be a valid CSS color.
And you can add points using `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.
_Note_ : You don't have to sort the points inside a same list of points in a SVG.addGraph call. They will be sorted for you. But, if you call SVG.addPoints multiple times, you must sort the points yourself between each call. The script won't do it for you and it will result in weird graphs if you don't do it.
Finally, you can draw the SVG thanks to `SVG.draw();`.
Finally, you can draw the SVG with `SVG.draw();`.
## Other functions