JSPlot Documentation: Vector graphics objects
- The plotting canvas
- Plotting data
- Plotting functions
- Vector graphics
- Graph plotting styles
- Graph options
- Graph axis options
- 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) |