# Using PmWiki to Display Graphs

This page was shamelessly copied (with permission) from Robert Fant's PmWiki Help so I could find the directions.

• Line  58 to: var gridstroke = "LightGrey";                           (makes grid lighter color)
• Line 860 to: fontsize = Math.min(dx/2,dy/2,10); //alert(fontsize)    (16 is now 10 and labels on grids are uniform.)

Credits: Peter Jipsen (the creator and designer of ASCIIsvg graphs) and Robert Fant (for pmwiki documentation).

 Brief descriptions of the ASCIIsvg commands and some examples follow below.   Optional arguments are enclosed in braces, { }.

 ShowMe#div100 { display:none; } @media print { #div100 { display:block; } } Start here -  This example demonstrates and explains the very basic, default graph and its coding.
 Graph Example Code Example {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.

 ShowMe#div105 { display:none; } @media print { #div105 { display:block; } } Plotting Points -  This example demonstrates plotting points, using color, open or closed dots.
 Graph Example Code Example {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.

 ShowMe#div106 { display:none; } @media print { #div106 { display:block; } } A Number Line -  This example demonstrates the creation of a number line.
 Graph Example Code Example {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.

 ShowMe#div110 { display:none; } @media print { #div110 { display:block; } } Draw a Ray or a Line -  This example demonstrates drawing a ray or a line (with arrows on the end points).
 Graph Example Code Example {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.

 ShowMe#div115 { display:none; } @media print { #div115 { display:block; } } Draw a Circle -  This example demonstrates drawing a circle.
 Graph Example Code Example {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.

 ShowMe#div120 { display:none; } @media print { #div120 { display:block; } } Draw an Ellipse -  This example demonstrates drawing an ellipse.
 Graph Example Code Example {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.

 ShowMe#div125 { display:none; } @media print { #div125 { display:block; } } Draw a Rectangle -  This example demonstrates drawing a rectangle with the rect() command.
 Graph Example Code Example {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.

 ShowMe#div130 { display:none; } @media print { #div130 { display:block; } } Draw a Polygon -  This example demonstrates drawing a rectangle (any polygon), using the path() command.
 Graph Example Code Example {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.

 ShowMe#div135 { display:none; } @media print { #div135 { display:block; } } Axis, Grids & Labels -  This example demonstrates working with the axes() command to change the grid lines and labels.
 Graph Example Code Example {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.

 ShowMe#div140 { display:none; } @media print { #div140 { display:block; } } Arcs & Sectors -  This example demonstrates drawing arcs and circle sectors.
 Graph Example Code Example {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.

 ShowMe#div200 { display:none; } @media print { #div200 { display:block; } } Text -  This example demonstrates the placement of text throughout the graph area.
 Graph Example Code Example {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} Variables for text: fontfill (is the fontcolor), fontsize, fontweight, fontstyle, fontfamily, fontstroke MUST COME AFTER AXES. 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.

 ShowMe#div205 { display:none; } @media print { #div205 { display:block; } } 3D Rectangular Prism -  This example demonstrates the creation of a (psuedo) 3D rectangular prism.
 Graph Example Code Example (: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.

+++++++++++++++++++++

 ShowMe#div500 { display:none; } @media print { #div500 { display:block; } } All Commands -  See all available commands (not examples), though presented in a slightly more technical fashion.

### 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)`

`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