Using PmWiki to Display Graphs

{gg width=300; height=300; xmin=-5; xmax=5; xscl=1; axes(); showbutton(); plot("(1/2)x+1"); gg}

In edit mode, clicking on the ASCIIsvg-graph button Attach:KSMath/ASCIIsvg.gif Δ, will produce this default code, all of which can be modified to fit your particular needs.

• width and height
  Define the dimensions of the whole graph itself.

• xmin and xmax
  (Immediately following width and height) define the working area of the graph. This is not to be confused with the domain of a particular function, that will be explained later.

• xscl  
  Defines the scale of the x-axis.  In this example, each tick mark represents 1 unit, thus a scale of 1 to 1.  If you want each tick mark to represent 5 units of measure, change it to read xscl=5.

• axes()  
  This must remain unchanged!  If deleted, nothing will be drawn onscreen and the user will get an error message.

• nobutton()  
  This probably needs to remain as is.  This command prevents an "editing" window to be included.  This editing window has its purpose (I'll demonstrate later), but you generally will not want it to show in your pages.
  In later examples, the nobutton() command will not be used and you'll be given the opportunity to edit parameters and see the effect of each change.

• plot( )  
  This is where functions are defined.  Change the function definition to fit your needs.  Functions can be polynomial, trigonometric, or polar.  As in this example, functions must be contained within quotations and x must be used as the variable.

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="red"; dot([-3,-3],"open"); dot([-2,-2],"closed"); stroke="green"; dot([0,0],"closed"); stroke="blue"; dot([2,2],"closed"); dot([3,3],"open"); gg}

dot([x-coor, y-coor], "open or closed")
Notice, to change the color of a point, you must issue the stroke = command before you draw the point.

Click on the "Show / Hide" button, to try it your self.

{gg width=300; height=50; gridstroke="white"; xmin=-1.5; xmax=10.5; xscl=1; yscl=4; showbutton(); axes(); strokewidth="2"; endpoints="<-o"; a=[-1,0]; b=[7,0]; line(a,b); gg}

dot([x-coor, y-coor], "open or closed")
Notice, to change the color of a point, you must issue the stroke = command before you draw the point.

Click on the "Show / Hide" button, to try it your self.

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="green"; endpoints="<-o"; line([-4,-3],[3,4]); stroke="red"; strokedasharray="1,3"; endpoints="<- "; line([-2,-2],[1,1]); stroke="blue"; strokedasharray="5,5"; endpoints="*->"; line([4,-2],[-5,4]); gg}

line([ x_1 , y_1 ], [ x_2 , y_2 ])

Click on the "Show / Hide" button, to try it your self.

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="green"; circle([-2,0],2); stroke="blue"; strokewidth=5; circle([-2,0],3); stroke="red"; strokewidth=3; fill="yellow"; circle([2,2],2); gg}

circle([x-coor, y-coor], radius)

The circle command requires the coordinate of the center point and a radius length.  

Notice, if the circles overlap, the last one drawn is the one that gets placed on top.

Click on the "Show / Hide" button, to try it your self.

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="blue"; strokewidth=5; ellipse([-3.5,0],2,4); stroke="red"; strokewidth=3; fill="green"; ellipse([1,4],4,0.5); gg}

ellipse([x-coor, y-coor], r_x , r_y )

The ellipse command requires the coordinate of the center point, a horizontal radius ( r_x ), and a vertical radius ( r_y ).  

Click on the "Show / Hide" button, to try it your self.

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="blue"; strokewidth=3; fill="red"; rect([-4,-4],[-2,4]); stroke="red"; strokewidth=1; fill="green"; rect([-5,-1],[5,1]); gg}

rect([ x_1 , y_1 ], [ x_2 , y_2 ])

The rect (rectangle) command requires the coordinates of the bottom left corner and then the top right corner.  

If a rotated rectangle is needed, it must be drawn with the path command.  This will be shown next.

Click on the "Show / Hide" button, to try it your self.

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); a=[-2,-4]; b=[-4,-2]; c=[0,0]; d=[2,-2]; e=[-4,2]; f=[0,4]; g=[3,3]; stroke="blue"; strokewidth=3; fill="red"; path([a,b,c,d,a]); gg}

path([ P_1 , P_2 , P_3 . . . P_n ])

The path command requires points to draw between.

If the figure is to be a closed figure, then the starting point and ending point must be the same.  

Note 1:  Points may be declared (created), before they are used in the path command or the coordinates may be entered directly in the command itself.

Note 2:  If a point is to be used in more than one figure, it is more efficient to declare them independently as shown here.

Click on the "Show / Hide" button, to try it your self.

{gg width=300; height=300; xmin=-6; xmax=6; axes(2, 3, "labels", 2, 3); stroke="red"; strokewidth=2; plot("0.2x^4-x^3+3x-3",-2.2,4.7,null,null,"<->"); gg}

axes( n_1 , n_2 , "labels", n_3 , n_4 )

The axes command can be used to adjust the label spacing and the gridlines.

n_1 - adjusts the labels of the x-axis.

n_2 - adjusts the labels of the y-axis.

n_3 - adjusts gridlines perpendicular to the x-axis.

n_4 - adjusts gridlines perpendicular to the y-axis.

Click on the "Show / Hide" button, changing these values to see how they work.

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="green"; strokewidth=2; arc([0,3],[-3,0],3); stroke="blue"; strokewidth=3; arc([-4,0],[4,0],4); stroke="red"; strokewidth=0; fill="yellow"; a=[0,0]; b=[5,0]; c=[0,5]; path([a,b,c,a]); strokewidth=3; arc([5,0],[0,5],5); gg}

arc([ x_1 , y_1 ], [ x_2 , y_2 ], radius)

The arc command draws counter-clockwise from the two points, ( x_1, y_1 ) and ( x_2, y_2 ) , along the circle of the given radius.

As of this writing, there is no sector command.  A filled sector must be built with a triangle (path command), and an arc.

Click on the "Show / Hide" button, to try it your self.

{gg width=300; height=300; xmin=-6; xmax=6; axes(7, 7, "labels", 6, 6); fontfill="#990000"; stroke="red"; strokewidth=2; fill="lightgreen"; ellipse([0,0],5,3); text([0,1], "ASCIIsvg is the coolest thing"); fontfill="none"; text([0,-1], "since peanut butter!"); fontfill="#000099"; text([4,5], "Quadrant I"); text([-4,5], "Quadrant II"); text([-4,-5], "Quadrant III"); text([4,-5], "Quadrant V"); gg}

text([ x , y ], "Your text")

The text command only requires a coordinate (of the center), and the text (label).

Click on the "Show / Hide" button, to see how they work.

(:graph width=300; height=300; xmin=0; xmax=10; xscl=1; ymin=-1; ymax=10; noaxes(); stroke="blue"; strokewidth=2; a=[2,1]; b=[5,0]; c=[5,4]; d=[2,5]; e=[9,3]; f=[9,7]; g=[6,8]; h=[6,4]; fillopacity=0.5; fill="yellow"; path([a,d,g,h,a]); path([h,e,f,g,h]); path([a,b,c,d,a]); fill="orange"; path([b,c,f,e,b]); text([8,8],"w"); text([9.5,4.5], "h"); text([4,7.5],"l") :)

I actually drew this out on paper first, labeling and naming my points there.  It is important to be very organized when doing something like this.

In the script, notice I created my points first, then used them in the path command.  One path command per each side of the prism.  The side that appears to be closest to you is created last so that it gets drawn on the top layer.

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 required, usually 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