JAVASCRIPT GRAPHICS using Flash^®

swfGraphLib JavaScript Graphics Library

swfGraphLib is a simple to use JavaScript graphics library for inserting all types of graphics into web pages. It has good cross browser support due to the fact that it uses the Flash player plug-in as its graphics engine. The Flash plug-in is loaded into more than 95% of browsers.

swfGraphLib has a similar command set to that of the cvsGraphCtx which uses the canvas HTML element as its graphics engine. swfGraphLib provides most of the commands of the cvsGraphCtx and adds commands for a data cursor and graph stacking control. The differences are due to the differences between the underlying graphics engines. The Flash based graphics treats images, text and cursors as objects that can be individually manipulated. These graphic objects are effectively drawn on layers stacked one above the other and so may be independently moved or deleted without affecting the other graphic objects. The canvas graphics engine on the other hand, draws all graphics flattened onto the canvas, to alter an item, all drawing is erased and redrawn. To get the same independent control of drawing and erasing objects like cursors and animation, cvsGraphLib one or more overlay canvases must be explicitly created.

Features of swfGraphLib

swfGraphLib comprises an object oriented JavaScript library front-end to a Flash movieClip which has a basic set of graphics methods which do the actual drawing onto the Flash player panel. These two communicate via the ActionScript 2.0 ExternInterface protocol. The latest version of the JavaScript library is swfGraphLib2v04.js and the latest version of the Flash graphics engine interface is swfGraph19.swf.

The main features of the swfGraphLib library are:

Viewport and World Coordinates - data may to be plotted in the data's units, removing the need to scale all values to Flash drawing pixels.
Text - labels and other text may be positioned in world coordinates with all 9 vertical and horizontal alignment options, arbitrarily rotated and with variable font size.
Images - jpg, gif or png images may be inserted into the graphic, positioned and scaled in world coordinates with all 9 vertical and horizontal alignment options and arbitrarily rotated.

swfGraphLib Examples

Here are several examples of the swfGraphLib in action with the corresponding source code shown alongside.

Line Graph

As a simple line plot of two spherical Bessel function. The drawAxes() method simplifies the code considerably.

Figure 1. Line graph example.

    function drawLine(FGid)
    {
      var g = new swfGraphCtx(FGid);
      with (g)
      {
        setViewport();        // full panel
        fillViewport("#f0f0d0");
        setViewport(16, 6, 80, 77);  // data area
        setWorldCoords(0, 15, -0.4, 1.2);
        setPenColor("#000000");      // black pen
        drawAxes(0, 0, 0, 15, -0.4, 1.2, 1, 0.1, 5, 0.2);
        label("x", 14.5, -0.1, 2, 0, 12);
        label("j0(x)", 10.5, 1.2, 6);
        label("j1(x)", 10.5, 1, 6);
        setPenColor("#ff0000");
        move(11, 1.2);
        line(12, 1.2);
        // plot j0(x)
        move(0, 1);
        for(var i=0.2; i<=15; i+=0.2)
          line(i, Math.sin(i)/i);
        setPenColor("#00ff00");
        move(11, 1);
        line(12, 1);
        // plot j1(x)
        move(0, 0);
        for(i=0.2; i<=15; i+=0.2)
          line(i, Math.sin(i)/(i*i)-Math.cos(i)/i);
      }
    }

Image Rotate Animated Example

As an example of animation using the swfGraphLib, a functioning clock is shown below. The clock is made from just 4 images, the clock face, the hour hand, minute and the second hand. Every second the images are redrawn, the hand images are rotated to show the correct time.

Figure 2. Animated clock demonsrating image rotation.

function drawClock(FGid)
{
  var g = new swfGraphCtx(FGid);       // only call once to avoid memory leak

  g.clearPanel();  // clear the swf logo
  g.setViewport(5, 0, 90, 90);         // square viewport
  g.fillViewport("palegoldenrod");
  g.setWorldCoords(-85, 85, -105, 65);   // 170 units each way
  // Mercer scale factors face 461px/130=3.54 world coords, thus hands = 25/3.54 = 7.06
  g.drawImg("Images/mercer1231-3-sml-face.gif", 0, 0, 130, 5);   // 130 is arbitrary to fit
  var hrHand = g.drawImg("Images/mercer1231-3-sml-Hhand.gif", 0, 0, 7, 5); // 7=25/(461/130)
  var mnHand = g.drawImg("Images/mercer1231-3-sml-Mhand.gif", 0, 0, 7, 5);
  var scHand = g.drawImg("Images/mercer1231-3-sml-Shand.gif", 0, 0, 7, 5);

  updateClock(g, hrHand, mnHand, scHand);
  setInterval(function(){updateClock(g, hrHand, mnHand, scHand)}, 1000);
}

function updateClock(g, hrHand, mnHand, scHand)
{
  var now = new Date();
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr  = now.getHours();
  hr = hr>=12 ? hr-12 : hr;

  g.updateImg(hrHand, 0, 0, 7, 5, -hr*30 - min*0.5); // draw hands in the new places
  g.updateImg(mnHand, 0, 0, 7, 5, -min*6 - sec*0.1);
  g.updateImg(scHand, 0, 17.23, 7, 5, -sec*6); // centres 61px apart, scale 61/3.54=17.23
}

Multiple Graphs

Multiple graphs may be drawn on the same panel. Fig 3 shows several graphs demonstrating some of swfGraphLib's capabilities.

Figure 3. Examples of Bar Chart, Point and Line graph and various shapes all drawn on the one panel.

Box Axes Example

Box axes were designed with the display of signal processing data in mind. An example of drawBoxAxes is shown in Fig 4.

Figure 4. Example of drawBoxAxes, two instances are drawn on the panel, code for the upper display is shown.

function drawUpper(FGid)
{
  var g = new swfGraphCtx(FGid);
  with (g)
  {
    var h = 50/aRatio;
    var vOfs = h;
    // Upper display
    setViewport(0, vOfs, 100, h);
    fillViewport("#303f30");   // very dark
    setWorldCoords(0, 100, 0, h);
    setPenColor("#a0a0a0");  // grey
    setViewport(12, vOfs+6, 85, h-12);  // define data area
    setWorldCoords(0, 1200, -10, 10);
    setPenColor("#c0c0c0");
    drawBoxAxes(0, 1200, -10, 10, 200, 5, "Hz", "dB", "REAL");
    setPenColor("#ffffff");
    move(0, 0);
    for (var i=1; i<=200; i++)
      line(i*6, 5*Math.sin(i/6));
  }
}

Inserting a swfGraph into a Web Page.

Firstly, download the two JavaScript files required for swfGraphLib:
swfGraphLib2v04.js,
rgbaColor.js.

Secondly, download the swfGraph19.swf Flash file:
swfGraph19.swf,

These should be placed in the same directory as the web page html file. Then add the following line to the web page HTML file header:

  <script type="text/javascript" src="swfGraphLib2v04.js"></script>
  <script type="text/javascript" src="rgbaColor.js"></script>

Within the body of the web page, the a DIV element should be inserted to act as a container for the Flash movie. The positioning , size, margins etc for the swfGraph should be applied to the container DIV. The swfGraph19.swf Flash movie should be inserted as a child of the container DIV using the following code.

The required HTML code is:

<div id="containerID">
  <object id="flash1" type="application/x-shockwave-flash"
    data="Flash/swfGraph19.swf" width="100%" height="100%">
    <param name="movie" value="Flash/swfGraph19.swf" />
    <p>Flash load error</p>
  </object>
  </div>

The swfGraph19.swf movie parameters should have width="100%" and height="100%" so it tracks the container size.

FlashGraph methods that will display the graphics are called from JavaScript. For example if there are graphs to be drawn in two different swfGraph instances on the one page, the swfGraph objects might be given id="flash1" and id="flash2".

Each graph to be drawn on a particular swfGraph movie instance requires a graphics context, an instance of the swfGraphCtx object. This object holds all the graph's parameters such as the current viewport dimensions, world coordinate system, pen color and so on. A single swfGraphCtx may be reused, previous drawing cleared and new viewport values set and so. Alternatively, multiple swfGraphCtx instances may exist simultaneously on the same swfGraph panel, each having its own property set, drawing calls to different swfGraphCtxs may then be interspersed without affecting the other graphs' settings. A graphics context is created as follows:

 var g = new swfGraphCtx('swfObjID');

The returned graphics context g, has the swfGraphLib drawing command set as it's methods.

JavaScript graphics drawing functions using this swfGraphCtx will look something like this:

    function drawHullo(FGid)
    {
      var g = new swfGraphCtx(FGid);

      g.clearPanel();                // clear all previous drawing and text
      g.setViewport();               // no dimensions passed, so use full panel
      g.fillViewport("#e0e0b0");     // fill viewport with pale yellow
      g.setWorldCoords(0, 1, 0, 50); // scale x axis 0 to 1, and y axis 0 to 50
      g.setPenColor("#ff0000");      // use red pen
      g.label("Hullo World", 0.5, 25, 5, 0, 25); // x=0.5,y=25, lorg 5, rotation 0°, 25pt font
    }

If multiple graphs are to be drawn on the swfGraph, simply create a new swfGraphCtx for each graph. Typically multiple graphs will each occupy a limited area within the panel. The setViewport method is used to define a rectangle within the panel for the graph. The viewport area can be readily filled if a coloured background is required.

swfGraphLib Reference Manual

The public properties of the swfGraphCtx are:

ctx,
aRatio,
rawWidth, rawHeight,
penWid, penCol, bkgCol, fontSize.

The public methods of the swfGraphCtx are:

clearPanel(), setViewport(), fillViewport(), setWorldCoords(),
setPenColor(), setPenWidth(), setFontSize()
move(), line(), rect(), shape(), label(), updateLabel(), deleteLabe(),
drawImg(), updateImage(), deleteImage(),
drawAxes(), drawBoxAxes().

swfGraphCtx Properties

Syntax:

var value = swfCtx.property;

Properties:

aRatio:Number - Aspect ratio of the panel, the panel width divided by panel height. If the flash panel is square, aRatio=1, if the panel is 300px wide and 200 pixels high, aRatio=1.5.

swfGraphCtx Methods

clearPanel

Syntax:

swfCtx.clearPanel();

Description:

Clears the Flash panel, deleting all drawing, images and text labels. The Flash panel is cleared back to its default color, white. All graphics contexts are reset to defaults, viewport is full screen and world coordinate system is set to have the viewport lowerLeft=0,0 and X and Y scaled in viewport units (% of canvas width), i.e. X axis is 100 units and the Y axis is 100/aRatio.

Parameters:

none.

setViewport

Syntax:

swfCtx.setViewport(lowerLeftX:Number, lowerLeftY:Number, width:Number, height:Number)

Description:

Defines a rectangular area within the canvas to be used in subsequent calls to setWorldCoords or fillViewport.

Drawing a graph may require several calls to setViewport. The first might define the area within the canvas for the graph. The fillViewport is called to fill the background. A second call to setViewport might define a smaller rectangle that represent the extend of the data area.

Note: Every call to setViewport resets the world coordinates to the default values which sets lower left corner of the viewport to 0,0 and the width and height to the width and height values that created the viewport, i.e. the and y scale factors are the same and they make the width of the canvas 100 in the world coordinates.

Parameters:

lowerLeftX:Number - X coordinate of the lower left corner of the viewport, measured from the lower left corner of the panel in units of % of panel width.

lowerLeftY:Number - Y coordinate of the lower left corner of the viewport, measured from the lower left corner of the panel in units of % of panel width.

width:Number - Width of the viewport measured in % of the width of the panel.

height:Number - Height of the viewport measured in % of the width of the panel.

Note: setViewport may be called with no parameters passed, setViewport(). This call will set the viewport to be the full panel size. So calling setViewport() is equivalent to the call setViewport(0, 0, 100, 100/aRatio), where aRatio is the panel aspect ratio (width/height).

fillViewport

Syntax:

swfCtx.fillViewport(fillColor:String)

Description:

Fills the rectangular area defined by the current viewport with the color fillColor and sets the background color, bkgCol, to fillColor.

Parameters:

fillColor:String - The fill color to be used. The fill color may be expressed in any of the three HTML/CSS color formats:
- Hex notation "#rrggbb", where rr sets the red level (00 to ff), gg sets the green and bb sets the blue level.
- RGB notation "rgb(r, g, b)" where r, g and b are decimal numbers in the range 0 to 255 representing the red, green and blue levels respectively.
- Predefined color names eg. "red", "blue", "maroon", "palegoldenrod", "wheat" etc. There are 140 standard color names in the extended color list.

If fillViewport is called with no parameter passed, the viewport is filled with the current background color (swfCtx.bkgCol).

setWorldCoords

Syntax:

swfCtx.setWorldCoords(leftX:Number, rightX:Number, bottomY:Number, topY:Number)

Description:

Defines a world coordinate system for subsequent drawing operations with this graphics context. The world coordinate system sets translation and scaling factors to map world coordinate values to canvas drawing pixel values. This is done by setting the world coordinate values of the left, right, bottom and top edges of the viewport.

Parameters:

leftX:Number - World coordinate value of the left edge of the viewport.

Draws a line from the current pen location to the point x, y. The line is draw with the current pen width and color set by the most recent call to setPenWidth and setPenColor. If no calls to these methods have been made the default pen parameters are used. The default pen width is 1px and default color is black ("#000000"), the default style is "solid".

The current pen location is updated to x, y.

Parameters:

x:Number - X coordinate of the new pen location measured in world coordinates.

y:Number - Y coordinate of the new pen location measured in world coordinates.

style:String - Style of the line, "dashed", "dotted" or "solid". If the style parameter is omitted, "solid" or any other value is passed, a solid line is drawn. The "dashed" line is drawn with approx 50% mark space ratio with dashes approx 7 pixels long. The "dotted" line is drawn with 2 pixels dots and approx 5 pixel spaces.

polyLine

Syntax:

swfCtx.polyLine(data:Array)

Description:

Draws a multi-segment line represented by the coordinate pairs stored in the array data. The pen is first moved to the first point in the array and then a line is drawn to each successive data point in the data array. The line is draw with the current pen width and color set by the most recent call to setPenWidth and setPenColor. If no calls to these methods have been made the default pen parameters are used. The default pen width is 1px and default color is black ("#000000").

The current pen location is updated to the location represented by the last coordinate pair in the array.

The polyLine method provides an alternative method for organising the data to be plotted, it does not provide the performance improvement compared making successive calls to line method that is achieved in the cvsGraphLib.

Parameters:

data:Array - An array of x,y values measured in world coordinates. The x,y data pairs may be stored in either of two formats:

1. data is a one dimensional array where every second value represents an x coordinate and every other value represents a y coordinate: data = [x1, y0, x1, y1, x2, .... ]. In this format, n data points are held in an array with 2*n elements (n = data.length/2). An example of storing coordinates values in this format:

  var data = [];
  for (var i=0; i<n; i++)
  {
    data[2*i] = x(i);
    data[2*i+1] = y(i);
  }

2. data is an array of 2 element arrays: data = [ [x0, y0], [x1, y1], .... ]. In this format n data points are held in an array with n elements (n = data.length). An example of storing coordinates values in this format:

  var data = [];
  for (var i=0; i<n; i++)
  {
    data[i] = new Array();
    data[i][0] = x(i);
    data[i][1] = y(i);
  }

arrow

Syntax:

swfCtx.arrow(x1:Number, y1:Number, x2:Number, y2:Number, size:Number)

Description:

Draws a line from the location x1, y1 to the location x2, y2 with an arrow head drawn with its tip at location x2, y2. The line is draw with the current pen width and color set by the most recent call to setPenWidth and setPenColor. If no calls to these methods have been made the default pen parameters are used. The default pen width is 1px and default color is black ("#000000").

The current pen location is updated to x2, y2.

Parameters:

x1:Number - X coordinate of the tail end of the arrow measured in world coordinates.

y1:Number - Y coordinate of the tail end of the arrow measured in world coordinates.

x2:Number - X coordinate of the head of the arrow measured in world coordinates.

y2:Number - Y coordinate of the head of the arrow measured in world coordinates.

size:Number - The size of the arrow head taking values from 1 to 9 inclusive. The value is scaled as function of line width.

rect

Syntax:

swfCtx.rect(lowerLeftX:Number, lowerLeftY:Number, w:Number, h:Number, fillColor:String)

Description:

Draws a rectangle.

Syntax:

swfCtx.updateLabel(lblRef:String, newTxt:String)

Description:

Replaces the text of an existing label with new text string.

Parameters:

lblRef:String - Reference string identifying the label to be updated. The label reference is returned by the original call to label that created the label.

str:String - The new text string to replace the existing text.

Note: The current location and style of label are left unchanged. If the new text is shorter of longer than the text it replaces, the lorg value of the original label determines in which direction the label will shrink or grow. Lorg 1, 4, 7 are left justified style and so new text will grow or shrink on the right. Lorg 2, 5, 8, are center justified and so the label will grow (or shrink) equally on either end. Lorg 3, 6, 9 are right justified labels and so the label will grow to the left. Click here to see the effect on Figure 5, label 'lorg 7' and 'lorg 5' are changed. Note that label 'lorg 7' grows to the right and 'lorg 5' grows on both sides.

deleteLabel

Syntax:

swfCtx.deleteLabel(lblRef:String)

Description:

Deletes an existing label, the label disappears from the drawing, all other drawing is left unaffected.

Parameters:

lblRef:String - Reference string identifying the label to be deleted. The label reference is returned by the original call to label that created the label.

Note: Click here to see the effect on Figure 5, label 'Lorg 1' will be deleted.

drawImg

Syntax:

var imgRef = swfCtx.drawImg(imgURL:String, x:Number, y:Number, width:Number, lorg:Number, rot:Number):Image

Description:

Loads an image file and renderers it onto the Flash panel.

Parameters:

imgURL:String - URL of the image to load.

x:Number - X coordinate of the reference point at which the image is to be rendered. X is in world coordinates set by the most recent call to setWorldCoords.

y:Number - Y coordinate of the reference point at which the image is to be rendered. Y is in world coordinates set by the most recent call to setWorldCoords.

w:Number - Width of the rendered image (before any rotation is applied) measured in units of the X axis in the world coordinate system.

lorg:Number - Location of the origin within the image that is used as the reference point for positioning the image and sets the center of rotation for rotating the image. lorg can take integer values 1..9. lorg=1 set the origin at the top-left of the image, lorg=2 locates the top-center of the image and so on. Refer to Fig 2 for the location of the 9 possible values.

rot:Number - Rotation angle applied to the image when rendered to the canvas., measured in degrees, +ve anti-clockwise. Rotation angles should be in the range -180° to 180°. The center of rotation is the lorg point, i.e, if lorg=1 the image is rotated about the top left corner by rot° anti-clockwise. If lorg=5 the image is rotated about its center point.

Returns:

String - A unique string providing a reference to the Image object. This may be used in subsequent calls to updateImg or deleteImg.

updateImg

Syntax:

swfCtx.updateImg(imgRef:String, x:Number, y:Number, width:Number, lorg:Number, rot:Number)

Description:

Updates the position, size and rotation values of a previously loaded image.

Parameters:

imgRef:String - Reference string identifying the image to be moved or altered. The image reference is returned by the original call to drawImg that created the image object.

x:Number - X coordinate of the reference point at which the image is to be rendered. X is in world coordinates set by the most recent call to setWorldCoords.

y:Number - Y coordinate of the reference point at which the image is to be rendered. Y is in world coordinates set by the most recent call to setWorldCoords.

w:Number - Width of the rendered image (before any rotation is applied) measured in units of the X axis in the world coordinate system.

deleteImg

Syntax:

swfCtx.deleteImg(imgRef:String, x:Number, y:Number, width:Number, lorg:Number, rot:Number)

Description:

Deletes an image from the panel, all other drawing is left unaffected.

Parameters:

imgRef:String - Reference string identifying the image to be deleted. The image reference is returned by the original call to drawImg that created the image object.

drawAxes

Syntax:

swfCtx.drawAxes(orgX:Number, orgY:Number, xmin:Number, xmax:Number, ymin:Number, ymax:Number, xMinorTic:Number, yMinorTic:Number, xMajorTic:Number, yMajorTic:Number)

Description:

Draws a set of Cartesian coordinate (X, Y) axes.

Parameters:

orgX:Number - X coordinate of the intersection of the X and Y axes. Measured in the X axis world coordinates.

orgY:Number - Y coordinate of the intersection of the X and Y axes. Measured in the Y axis world coordinates.

xmin:Number - Minimum X axis value, the value of the left end of the X axis. Measured in the X axis world coordinates.

xmax:Number - Maximum X axis value, the value of the right end of the X axis. Measured in the X axis world coordinates.

ymin:Number - Minimum Y axis value, the value of the bottom end of the Y axis. Measured in the Y axis world coordinates.

ymax:Number - Maximum Y axis value, the value of the top end of the Y axis. Measured in the Y axis world coordinates.

xMinorTic:Number - Spacing between minor tick marks drawn on the X axis. Measured in the X axis world coordinates.

yMinorTic:Number - Spacing between minor tick marks drawn on the Y axis. Measured in the Y axis world coordinates.

xMajorTic:Number - Spacing between major tick marks drawn on the X axis. Major tick spacing should be a simple multiple of the minor tick spacing. Measured in the X axis world coordinates. The major tick marks are automatically labeled with their world coordinate value.

yMajorTic:Number - Spacing between major tick marks drawn on the Y axis. Major tick spacing should be a simple multiple of the minor tick spacing. Measured in the Y axis world coordinates. The major tick marks are automatically labeled with their world coordinate value.

drawBoxAxes

Syntax:

swfCtx.drawBoxAxes(orgX:Number, orgY:Number, xmin:Number, xmax:Number, ymin:Number, ymax:Number, xTicSpacing:Number, yTicSpacing:Number, xUnits:String, yUnits:String, title:String)

Description:

Draws a set of X, Y axes in the shape of a box. Tick marks are drawn on left and bottom axes and the first and last ticks on each axis are labeled with there world coordinate value. Optional units labels and a title may be added.

Parameters:

orgX:Number - X coordinate of the intersection of the X and Y axes. Measured in the X axis world coordinates.

orgY:Number - Y coordinate of the intersection of the X and Y axes. Measured in the Y axis world coordinates.

xmin:Number - Minimum X axis value, the value of the left end of the X axis. Measured in the X axis world coordinates.

xmax:Number - Maximum X axis value, the value of the right end of the X axis. Measured in the X axis world coordinates.

ymin:Number - Minimum Y axis value, the value of the bottom end of the Y axis. Measured in the Y axis world coordinates.

ymax:Number - Maximum Y axis value, the value of the top end of the Y axis. Measured in the Y axis world coordinates.

xTicSpacing:Number - Spacing between tick marks drawn on the X axis. Measured in the X axis world coordinates.

yTicSpacing:Number - Spacing between tick marks drawn on the Y axis. Measured in the Y axis world coordinates.

xUnits:String - Text of the label to be drawn just below the center of the X axis. This text should describe the units of the X axis, eg "kHz". The string is prepended with the xTicSpacing value and the string "/div" is appended.

yUnits:String - Text of the label to be drawn at the left of the center of the Y axis. This text should describe the units of the Y axis, eg "dB". The string is prepended with the yTicSpacing value and the label "/div" is drawn below the yUnits label.

title:String - Text of the label to be drawn at the top left of the axes box, normally used to describe the graphed data.

drawXYAxes

Syntax:

swfCtx.drawXYAxes(orgX:Number, orgY:Number, xmin:Number, xmax:Number, ymin:Number, ymax:Number)

Description:

Draws a set of Cartesian coordinate (X, Y) axes with automatic tick marking of the axes.

Parameters:

orgX:Number - X coordinate of the intersection of the X and Y axes. Measured in the X axis world coordinates.

orgY:Number - Y coordinate of the intersection of the X and Y axes. Measured in the Y axis world coordinates.

xmin:Number - Minimum X axis value, the value of the left end of the X axis. Measured in the X axis world coordinates.

xmax:Number - Maximum X axis value, the value of the right end of the X axis. Measured in the X axis world coordinates.

ymin:Number - Minimum Y axis value, the value of the bottom end of the Y axis. Measured in the Y axis world coordinates.

ymax:Number - Maximum Y axis value, the value of the top end of the Y axis. Measured in the Y axis world coordinates.

showMkr

Syntax:

swfCtx.showMkr(x:Number, y:Number, color:String)

Description:

Displays a small hollow square maker.

Parameters:

x:Number - X coordinate of the center of the marker, measured in world coordinates.

y:Number - Y coordinate of the center of the marker, measured in world coordinates.

color:String - Color of the marker. The color may be expressed in any of the three HTML/CSS color formats (see setPenColor).

Note: The is no reference needed to identify the marker as there is only one marker for each graphics context. Note: The marker may be hidden by the hideMkr method or moved to a new location by the moveMkr method. Showing the marker or moving the marker has no effect on any drawing beneath the maker.

moveMkr

Syntax:

swfCtx.moveMkr(x:Number, y:Number)

swfGraphLib JavaScript Graphics Library

Features of swfGraphLib

swfGraphLib Examples

Line Graph

Image Rotate Animated Example

Multiple Graphs

Box Axes Example

Inserting a swfGraph into a Web Page.

swfGraphLib Reference Manual

swfGraphCtx Properties

Syntax:

Properties:

swfGraphCtx Methods

clearPanel

Syntax:

Description:

Parameters:

setViewport

Syntax:

Description:

Parameters:

fillViewport

Syntax:

Description:

Parameters:

setWorldCoords

Syntax:

Description:

Parameters:

setPenColor

Syntax:

Description:

Parameters:

setPenWidth

Syntax:

Description:

Parameters:

setFontSize

Syntax:

Description:

Parameters:

move

Syntax:

Description:

Parameters:

line

Syntax:

Description:

Parameters:

polyLine

Syntax:

Description:

Parameters:

arrow

Syntax:

Description:

Parameters:

rect

Syntax:

Description:

Parameters:

shape

Syntax:

Description:

Parameters:

label

Syntax:

Description:

Parameters:

Returns:

updateLabel

Syntax:

Description:

Parameters:

deleteLabel

Syntax:

Description:

Parameters:

drawImg

JAVASCRIPT GRAPHICS using Flash^®