# ASCIIsvg Documentation

ASCIIsvg.js can be used on a HTML page or within PmWiki, as shown by the following minimal examples. (For more elaborate dynamic examples see e.g. http://math.chapman.edu/~jipsen/svg/testdynamicpics.html).

**HTML:** `<embed class="ASCIIsvg" script='plot(sin(x))'/>`

(the file d.svg has to be in the same folder as the HTML file)``

or use `a``graph plot(sin(x)) enda``graph`

**PmWiki:** `(:g``raph plot(sin(x)):)`

produces an inline graph. Add `%center%`

or `%floatright%`

at beginning of line to position the graph.

The default size of a graph is 300x200 pixels, the x-axes ranges from -5.5 to 5.5 and the y-axes ranges from -3.7 to 3.7 (these can be changes using the commands below).

### List of ASCIIsvg commands

Optional arguments are enclosed in braces {...}. Points are specified by coordinates, e.g. `p=(1,2)`

(or `p=[1,2]`

if JavaScript syntax is preferred). Commands on the same line MUST be separated by semicolons (none are needed at end of line).

#### Basic commands

`width=300; height=200`

gives the dimensions of the graph in pixels

`xmin=-5.5; xmax=5.5; xscl=dx`

gives range of x-axis and distance between ticks. If `xscl`

is given, a grid is also drawn.

`ymin=c; ymax=d; yscl=dy`

gives range of y-axis. If `ymin`

is omitted, x-axis is centered vertically. If `ymax`

is omitted, the scale on both axes is chosen the same.

`axes({dx,dy,labels,gdx,gdy})`

this command is no longer required since it is added automatically in the form `axes()`

`line(p,q {,id,endpts})`

line segment connecting points `p,q`

(coordinates in units). The `id`

value can be any string that is added as identifier to this svg element. If the command is repeated with the same `id`

, the element is updated (instead of creating a new element). This is only useful for interactive graphs. For the `endpts`

parameter see the `endpoints`

variable below.

`path([p1,p2,...,pn] {,id,c,endpts})`

connect points `p1,p2,...`

by straight lines

`plot(f(x) {,x_min,x_max,points,id,endpts})`

plot a function of "x" as "x" ranges from `x_min`

to `x_max`

, using the given number of points (default points = 200)

`plot([f(t),g(t)],t_min,t_max {,points,id,endpts})`

parametric plot of pair of functions. Must use parameter "t".

`rect(p,q {,id,rx,ry})`

draw a rectangle with opposite corners at `p,q`

and rounded by radii `rx,ry`

`circle(center,radius {,id})`

draw a circle

`point(center {, typ, label, pos, id})`

`dot(center {, typ, label, pos, id})`

alternative name for the point command

`text(p,st {,pos,id,fontsty})`

write string st at point `p`

#### Further commands

`curve(plist,id,endpts)`

is equivalent to `path(plist,id,"T",endpts)`

`loop(p,d {,id})`

draw a small loop a point `p`

in direction `d`

(for directed graphs, i.e. networks)

`vector(p,q {,id})`

is equivalent to `line(p,q,id,"","->")`

`arc(start,end,radius,id)`

draw a circular arc from `start`

point to `end`

point, with given radius

`sector(center,start,end {,id})`

draw a sector with the given three points

`ellipse(center,rx,ry {,id})`

draw an ellipse with *x*-radius `rx`

and *y*-radius `ry`

`triangle(p,q,r {,id})`

is equivalent to `path([p,q,r,p],id)`

#### Additional settings and commands

`showcode()`

show the ASCIIsvg code in a textarea above the graph

`showbutton()`

put a show/hide button above the graph that can be used to locally edit the ASCIIsvg code and update the graph

`nobutton()`

current default. This deprecated command remains for backward compatibility.

**Variables that can be changed before individual commands, together with their default values**

`border = 0`

in pixel, reduces the graph so that an area of this width is visible around the graph. This setting must appear before the axes() command.

`strokewidth = "1"`

line width in pixel

`stroke = "blue"`

line color

`strokeopacity = 1`

transparent = 0, solid =1

`strokedasharray = null`

e.g. "10 10" gives 10px long dashes

`fill = "none"`

fill color

`fillopacity = 1`

transparent = 0, solid =1

`fontstyle = "normal"`

text shape normal|italic|inherit

`fontfamily = "times"`

font times|ariel|helvetica|...

`fontsize = "16"`

size (scaled automatically)

`fontweight = "normal"`

normal|bold|bolder|lighter|100|...|900

`fontstroke = "none"`

font outline color

`fontfill = "none"`

font color

`marker = "none"`

place a mark at each point of a line, path or curve. Possible values "none" | "dot" | "arrow" | "+" | "-" | "|".

`endpoints = ""`

3-character string determines the endpoints of a line, path or curve. The form is "c-d" where c is <|o|* and d is >|o|* e.g. "<->" means arrow at both ends, *-o means closed dot on start point, open circle on end point.

**Global variables used for all pictures, and their default values**

`showcoordinates = true`

decide if mouse coordinates should show in bottom right corner

`markerstrokewidth = "1"`

line width for markers

`markerstroke = "black"`

line color for markers

`markerfill = "yellow"`

fill color for markers

`markersize = 4`

radius in pixels for marker dots

`arrowfill = stroke`

arrows are filled with the same color as lines

`dotradius = 4`

radius in pixels for dots and points

`ticklength = 4`

length of the ticks marked on the axes

`axesstroke = "black"`

color of the axes

`gridstroke = "grey"`

color of the grid lines

`backgroundstyle = "fill-opacity:0; fill:white"`

style of the background rectangle

`singlelettersitalic = true`

decides if single letter labels should show in italics (usually true for math variables)

**Less often used commands and to do list**

`switchTo(id)`

select the nth picture that should be the target of subsequent commands, e.g. `switchTo(3)`

or `switchTo("picture3")`

`arrowhead(p,q)`

draw arrowhead pointing from `p`

ending at `q`

(need to add a size param)

`ASdot(center,radius,stroke,fill)`

draw a circle with radius in pixel (used for markers)

`grid(dx,dy)`

for backward compatibility, equivalent to `axes(dx,dy,null,dx,dy)`

`noaxes()`

to remove the axes

`polarplot(...)`

not yet implemented

`approximateintegral(...)`

not yet implemented

`slopefield(fun,dx,dy)`

draw a slopefield

`image(imgurl,p,w,h,id)`

not working yet, perhaps some problem with attribute namespaces; try layers instead