'; SDV($GUIButtons['ASCIIsvg'],array(1000, '\\\begin{graph} ', ' \\\end{graph}', 'width=300; height=200; xmin=-6.3; xmax=6.3; xscl=1; plot(sin(x));', '$ASCIIMathMLUrl/graph.gif"$[ASCIIsvg-graph]"')); SDV($GUIButtons['ASCIImath'],array(1000, '`', '`', 'sqrtn', '$GUIButtonDirUrlFmt/math.gif"$[Math formula (ASCIIMath)]"')); Math etc - ASCIIsvg Documentation

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