Home

JSPlot Documentation: Vector graphics objects

  1. The plotting canvas
  2. Plotting data
  3. Plotting functions
  4. Vector graphics
  5. Graph plotting styles
  6. Graph options
  7. Graph axis options
  8. Vector graphics objects

JSPlot supports some basic vector graphics objects, which can be added to the drawing canvas alongside charts. This page provides an API reference for the classes used to create vector graphics objects. See the API reference for the JSPlot_Canvas class for details of how to render these objects onto a drawing canvas.

Also see this example for a demonstration of these classes in use.

JSPlot_Arrow class

Instances of the JSPlot_Arrow class can be used to add arrows and lines to the drawing canvas.

my_pointer = new JSPlot_Arrow(settings);

Argument Allowed values Description
settings Associative array An associative array of configuration options. Allowed key values are listed below.

Allowed configuration parameters within the settings array are as follows:

Field Allowed values Description
arrowType string Allowed values:
single – A single-headed arrow
double – A double-headed bi-directional arrow
back – A single-headed arrow pointing backwards
none – A line with no arrow head
color Any valid JSPlot_Color instance The color of the arrow or line
strokeLineWidth Number The width of the line (pixels)
origin [Number, Number] The pixel coordinates of the start of the arrow
target [Number, Number] The pixel coordinates of the end of the arrow
z_index Number The stack order of the element on the canvas. An element with greater stack order is always in front of an element with a lower stack order.
JSPlot_Circle class

Instances of the JSPlot_Circle class can be used to add circles to the drawing canvas.

my_circle = new JSPlot_Circle(settings);

Argument Allowed values Description
settings Associative array An associative array of configuration options. Allowed key values are listed below.

Allowed configuration parameters within the settings array are as follows:

Field Allowed values Description
strokeColor Any valid JSPlot_Color instance The color to stroke the outline of the circle
fillColor Any valid JSPlot_Color instance The color to fill the interior of the circle
strokeLineWidth Number The width of the line (pixels) to stroke around the outline of the circle
origin [Number, Number] The pixel coordinates of the center of the circle
radius Number The radius of the circle, in pixels
z_index Number The stack order of the element on the canvas. An element with greater stack order is always in front of an element with a lower stack order.
JSPlot_Ellipse class

Instances of the JSPlot_Ellipse class can be used to add ellipses to the drawing canvas.

my_ellipse = new JSPlot_Ellipse(settings);

Argument Allowed values Description
settings Associative array An associative array of configuration options. Allowed key values are listed below.

Allowed configuration parameters within the settings array are as follows:

Field Allowed values Description
strokeColor Any valid JSPlot_Color instance The color to stroke the outline of the circle
fillColor Any valid JSPlot_Color instance The color to fill the interior of the circle
strokeLineWidth Number The width of the line (pixels) to stroke around the outline of the circle
origin [Number, Number] The pixel coordinates of the center of the circle
major_axis Number The major axis of the ellipse, in pixels
minor_axis Number The minor axis of the ellipse, in pixels
position_angle Number The position angle of the major axis of the ellipse, in degrees clockwise from vertical
z_index Number The stack order of the element on the canvas. An element with greater stack order is always in front of an element with a lower stack order.
JSPlot_Rectangle class

Instances of the JSPlot_Rectangle class can be used to add rectangle to the drawing canvas.

my_box = new JSPlot_Rectangle(settings);

Argument Allowed values Description
settings Associative array An associative array of configuration options. Allowed key values are listed below.

Allowed configuration parameters within the settings array are as follows:

Field Allowed values Description
strokeColor Any valid JSPlot_Color instance The color to stroke the outline of the rectangle
fillColor Any valid JSPlot_Color instance The color to fill the interior of the rectangle
strokeLineWidth Number The width of the line (pixels) to stroke around the outline of the rectangle
origin [Number, Number] The pixel coordinates of the top-left corner of the rectangle
height Number The height of the rectangle, in pixels. Negative values are allowed.
width Number The width of the rectangle, in pixels. Negative values are allowed.
z_index Number The stack order of the element on the canvas. An element with greater stack order is always in front of an element with a lower stack order.
JSPlot_Text class

Instances of the JSPlot_Text class can be used to add text labels to the drawing canvas.

my_label = new JSPlot_Text(settings);

Argument Allowed values Description
settings Associative array An associative array of configuration options. Allowed key values are listed below.

Allowed configuration parameters within the settings array are as follows:

Field Allowed values Description
color Any valid JSPlot_Color instance The color of the text
fontSize Number The font size for the text (pixels)
fontFamily String The name of the CSS font family to use
fontStyle String Allowed options:
"" – Normal text
"italic" – Italic text
fontWeight String Allowed options:
"" – Normal text
"bold" – Bold text
h_align String The horizontal alignment of the text relative to the anchor point. Allowed options:
left – Left alignment
center – Center alignment
right – Right alignment
v_align String The vertical alignment of the text relative to the anchor point. Allowed options:
top – Top alignment
middle – Central alignment
bottom – Bottom alignment
origin [Number, Number] The pixel coordinates of the anchor point for the text
text String The text string to be rendered
z_index Number The stack order of the element on the canvas. An element with greater stack order is always in front of an element with a lower stack order.
JSPlot_Color class

Instances of the JSPlot_Color class are used to specify the colors to be used in plots and vector graphics. The constructor takes four parameters to specify the color and opacity (alpha), each of which should be between 0 and 1 inclusive:

my_color = new JSPlot_Color(red, green, blue, alpha);

Argument Allowed values Description
red Number (0–1) Red channel component
green Number (0–1) Green channel component
blue Number (0–1) Blue channel component
alpha Number (0–1) Alpha channel, from 0 (transparent) to 1 (fully opaque)

Follow