Grapher Help

Welcome to Graph Help

What can this thing do?

See the Examples page.

How do I use it?

You can add the graph to a web page by using an <img> tag, or a special <div>; chances are you will need both.

If you want to use an animated "client side" graph (for example, using the Fusion graphing backend), you need to use the <div> mechanism. If you want to get a graph in a non-javascript environment (say, when passing to the PDF generator), you need to use the <img> tag method.

The div mechanism looks like this:

	<div class='grapher'>
		<div class='data'>({base: "graph/t/b/w/300/....?apikey=1111222233334444"})</div>
	</div>

The <div> mechanism also requires a javascript library, so don't forget to include that; put something like this with your <head>:

	<script src="http://{graph service host}/GraphHandler/class/grapher" type="text/javascript">

The <img> mechanism looks like this:

	<img src="http://{graph service host}/graph/t/b/w/300....?apikey=1111222233334444"/>

In the case when you need to switch between the two, you can use some standard Knickers vanish tags, doing something like this:

{OUTPUT_MODE=Standard?:|VANISH|}
<div class='grapher'>...</div>
{/OUTPUT_MODE=Standard?:|VANISH|}
{OUTPUT_MODE=Standard?|VANISH|}
<img src="...."/>
{/OUTPUT_MODE=Standard?|VANISH|}

And here are the available variables:

var name

description

required

Chart type.

value	description
b	bar (defaults "grouped" vertical; bh for horizontal, but not all backends support this)
p	pie; add "h" for hole (doughnut), add "3" for 3D. (not all backends support 3D doughnut.)
l	line
r	radar; add "s" for smoothed line (not all backends supported) Note: To make the line "close the loop", send the first datapoint again at the end of the list.

yes

width (pixels)

yes

height (pixels)

yes

Data. Comma-sep list.

yes

l (lower L)

Label. Comma-sep list.

Graphing backend. Currently, Google is the currently the default.

SettingSet name -- used for pre-configured settings, like palettes

Colors. Comma-sep list of hex (i.e., e9e39f,fff,000000); overrides the palette in the SettingSet.

bgc

Bacground color, in hex (i.e., e9e39f).

Markers. Specify "s" to show a shape marker at at the data point. Specify "v" to show the value. Or both. "s" is used by default on line graphs; to not show, send something other than "s".

Format Y-Axis labels. "h", "g", "i", "s" will be translated to hours (with leading zeros), hours (without leading zeros), minutes, and seconds, respectively. Additionally, two special formats are considered; "x" is the value, "p" for percent sign.
Examples:

input	format	output
129660	h:i:s	36:01:00
120	i:s	02:00
120	xp	120%
120	$x	$120

Range (x-axis); auto-range by default. Format is min,max. To emulate old behavior where graphs normally always started at 0, send "0" or "0," for r.

Graph title ("name")

Show gridlines. Defaults to 1 (on); send 0 to turn them off.

Show axis. Defaults to 1 (on); send 0 to turn them off.

Maximum number of values to show (0 is all)

Draw a horizontal rule at the given value, or "a" for the average value.

Top N ("t")[default], Bottom N ("b"), Top/Bottom ("tb")

(1/0) Show/Hide the avg bar for the rest of the values (only works in bar mode)

There is some limited support for legends, but only on the Google backend at the moment. For a single bar, use the "k" parameter; for a multi-type, use k0 - kx. There are no controls over how it is displayed.