diff --git a/index.html b/index.html index 87b1634..fbd624a 100644 --- a/index.html +++ b/index.html @@ -33,16 +33,20 @@

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.

- -

Examples

- +

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.

+Live demos

+ +

Usage

(See examples for more info. For live examples, see http://phyks.github.io/timeline.js/)

@@ -61,9 +65,13 @@
  • 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
  • -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. 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.

    @@ -76,7 +84,7 @@ And you can add points thanks to SVG.addPoints(GRAPH_NAME, POINTS);

    @@ -99,12 +107,8 @@ And you can add points thanks to SVG.addPoints(GRAPH_NAME, POINTS);

    Feel free to contribute !

    The last three points are easy to implement by refactoring the way the raw points are stored and using a single array for all the graphs.

    +