svg_graph

svg_graph is a tool I built for a self quantification tool I'm making. It is a Javascript object that produces an SVG timeline graph in an XHTML document. You may download it here.

I primarily test svg_viewer with Mozilla Firefox, but it should work swimmingly on any standards complient browser. If you have issues with it on a modern browser, please let me know at svg_graph<at>michaelkirkland.org. Unfortunately, Internet Explorer does not support XHTML and has only minimal support for SVG through a discontinued third party plugin. There might be some way to kludge together something to make it work, but I don't need it for my purposes. If this is something you want, let me know and maybe we can work something out.

Example

Above is a simple example of the sort of graph you can create with svg_graph. If you don't see it, your browser doesn't support XHTML and/or SVG. You can see more examples by running svg_graph's unit tests. (Warning: it'll take a few seconds to render all of them.)

Usage

To produce the example above, include svg_graph.js and svg_graph.css and insert the following into your page:

<div id="simple"></div>

<script>
var fakepoints = [121.0,121.0,122.4,123.4,122.5,122.5,121.6,121.6,122.2,122.2,
		  121.6,122.3,123.6,123.8,123.8,122.3,121.7,121.7,121.7,120.6,
		  121.3,121.3,119.9,119.9,119.9,120.7,120.7,120.7,119.5,119.5,
		  119.4,119.4,119.4,120.3,119.7,119.7,119.7,120.5,120.5,119.9,
		  118.8,118.8,119.6,119.6,118.8,118.1,118.1,118.1,118.8,119.5,
		  119.5,117.4,117.4,117.4,119.1,119.9,119.3,119.3,118.9,119.3,
		  119.4,119.4,119.2,119.3,119.9,119.8,120.4,120.3,119.3,119.3,
		  119.5,120.3,120.3,120.3,119.6,119.6,119.5,118.3,119.7,120.7,
		  120.7,120.7,120.1,120.1];
var fakedates =  [1224702437,1224782962,1224965651,1225058046,1225137461,
                  1225227101,1225301179,1225386175,1225473663,1225574693,
		  1225669441,1225750120,1225920151,1226083800,1226275066,
		  1226447811,1226524435,1226596479,1226695346,1227052025,
		  1227219344,1227418913,1227497858,1227786852,1227881053,
		  1227976670,1228062353,1228150963,1228241622,1228324711,
		  1228410521,1228503322,1228595081,1228678491,1228851479,
		  1228940416,1229116773,1229192268,1229456329,1229620276,
		  1229888750,1230058117,1230855932,1230936054,1231025130,
		  1231109926,1231192777,1231278705,1231453007,1232062068,
		  1232476691,1232900329,1232981699,1233071862,1233939960,
		  1234126470,1234174980,1234271220,1234430940,1234518900,
		  1234616880,1234706640,1234774500,1234878420,1234967400,
		  1235217180,1235305800,1235387280,1235466840,1235563380,
		  1235647080,1235732700,1235821980,1235904420,1236073440,
		  1236246180,1236332460,1236426120,1236510000,1236589740,
		  1236690180,1236853800,1236935400,1237028940];

var simple = svg_graph.setup(
{
  div:		'simple',
});
simple.add_series(fakepoints, fakedates, 'Weight (kg)');
simple.make_rolling(fakepoints, fakedates, 'Weight (kg)');
simple.draw();
</script>

Instructions

The first thing you need is a <div> element to draw the graph into. This must be declared before the svg_graph object is created, so that svg_graph can access it through the DOM.

The next thing you need is an array of points to plot, and a corresponding array of timestamps. The points can be any sort of number you fancy, and the timestamps are the number of seconds since the epoch. You can get this value from a MySQL database with the unix_timestamp(column) function. Javascript Date objects return this value in milliseconds from the getTime() function, so divide it's result by 1000;

Once you have that, you can create a graph by calling three functions:

svg_graph.setup

This creates an svg_graph object, and attaches it to the <div> specified. 'div' is the only manditory argument, but the graph can be customized by several optional arguments. The currently available arguments are:

ArgumentDescriptionDefault
width:Width in pixels800
height:Height in pixels300
sigdigits:Number of significant digits to the left of the decimal place to display on labels.1
ylabel:Where to display the y axis tick labels. May be 'left', 'right', or 'both'.'both'
xticks:Time format to display on the x axis. May be 'hourly', 'monthly', or 'yearly'.'monthly'

Examples can be seen in the unit tests.

svg_graph.add_series, svg_graph.make_rolling

add_series takes an array of values and dates and adds them to the graph.

make_rolling does the same, but converts the values into a 10 point rolling average.

Both may be called any number of times, though only 11 plot colours are defined in the CSS file. You will need to add definitions if you want more than 11 plots.

svg_graph.draw

draw builds the graph and injects it into the attached <div>. This must be called after all calls to add_series and make_rolling.

License

I am making svg_graph available under the terms of the LGPL.