JSPlot Documentation: Graph options
- The plotting canvas
- Plotting data
- Plotting functions
- Vector graphics
- Graph plotting styles
- Graph options
- Graph axis options
- Vector graphics objects
Documentation lives here.
JSPlot_Graph class: API reference
Instances of the JSPlot_Graph class are used to add a graph to a drawing canvas. It is possible to display multiple graphs on the same drawing canvas.
my_graph = new JSPlot_Graph(datasets, settings);
| Argument | Allowed values | Description |
| datasets | Array |
An array of datasets to plot onto the graph. These should be instances of the JSPlot_DataSet class. |
| 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 |
| annotations | An array of JSPlot_Label_Arrow and/or JSPlot_Label_Text instances. | This list of annotations is used to superimpose text labels and arrows over the top of the graph. |
| aspect | Number | The ratio of the length of the vertical (y) axis, to the length of the horizontal (x) axis. Default is 0.618 on 2D plots, and 1 on 3D plots. |
| aspectZ | Number | The ratio of the length of the third (z) axis, to the length of the horizontal (x) axis on 3D plots. Default: 1 |
| axesColor | Any valid JSPlot_Color instance | The color of the axes of the graph |
| bar | Boolean | Not implemented. |
| boxFrom | Number | The horizontal line which forms the bottom of the bars on bar charts. Default 0. |
| boxWidth | Number | If set, all of the bars of bar charts have the same width along the horizontal axis. If left unset, all the bars automatically fill the available horizontal space. Default: null. |
| clip | Boolean | If true, then data points are clipped at the edges of the plot, and not allowed to extend over the axis lines. If false, then data points are allowed to extend over the axis lines. |
| fontSize | Number | Scaling factor for the displayed size of all text on the graph. |
| gridAxes | Array of strings | A list of the axes which should produce grid lines associated with their tick marks. Default: ['x1', 'y1', 'z1']. |
| gridMajorColor | Any valid JSPlot_Color instance | The color of the major grid lines drawn behind the graph |
| gridMinorColor | Any valid JSPlot_Color instance | The color of the minor grid lines drawn behind the graph |
| interactiveMode | String | A string indicating how the plot should respond when the user clicks or drags it. Options are: none – the plot does not respond to being dragged, pan – the plot's axis ranges move in response to being dragged, rotate – (3D plots only) the plot rotates when dragged. |
| key | Boolean | Boolean indicating whether the graph should show a legend listing all the plotted datasets. |
| keyColumns | Number | The number of columns into whether the graph's legend should be arranged. Default: null (automatic). |
| keyOffset | Array of two numbers | This is used to manually tweak the position of the graph legend, in pixels. Default [0, 0]. |
| keyPosition | String | A string indicating the position of the graph legend. Allowed values: tl – top left, tm – top centre, tr – top right, ml – middle left, mm – middle centre, mr – middle right, bl – bottom left, bm – bottom centre, br – bottom right, above – above, below – below, left – left, right – right. |
| origin | Array of two numbers | The position of the bottom-left corner of the graph on the canvas, in pixels. Default [0, 0]. |
| textColor | Any valid JSPlot_Color instance | The color of the text labels associated with a graph |
| threeDimensional | Boolean | A boolean indicating whether this chart is two-dimensional (false) or three-dimensional (true). Default false. |
| title | String | A title to write at the top of the graph. |
| titleOffset | Array of two numbers | This is used to manually tweak the position of the title of the graph, in pixels. Default [0, 0]. |
| width | Number or String | The width of the graph – either specified as a numerical number of pixels, or as a percentage of the available canvas width, e.g. "50%". Alternatively, if set null, the graph automatically scales to fill the available canvas width. Default: null. |
| widthIncludesAxes | Boolean | A boolean indicating whether the specified width of the chart should include its axes, or specify the width of the plotting area. This should usually be set true, but it may be useful to set it false when trying to make multiple graphs line up on a shared canvas. Default true. |
| viewAngleXY | Number | The viewing angle of 3D charts around the XY-plane (degrees). Default: 60 degrees. |
| viewAngleYZ | Number | The viewing angle of 3D charts around the YZ-plane (degrees). Default: 30 degrees. |
| x1_axis | Array | An array of settings to pass to the bottom horizontal axis's JSPlot_Axis instance |
| x2_axis | Array | An array of settings to pass to the top horizontal axis's JSPlot_Axis instance |
| y1_axis | Array | An array of settings to pass to the left vertical axis's JSPlot_Axis instance |
| y2_axis | Array | An array of settings to pass to the right vertical axis's JSPlot_Axis instance |
| z1_axis | Array | An array of settings to pass to the front z-axis's JSPlot_Axis instance (3D plots only) |
| z2_axis | Array | An array of settings to pass to the back z-axis's JSPlot_Axis instance (3D plots only) |
JSPlot_DataSet class
Instances of the JSPlot_DataSet class are used to add datasets to graphs. An array of such instances should be passed to the datasets argument of the JSPlot_Graph constructor.
my_dataset = new JSPlot_DataSet(title, styling, data, update_callback);
| Argument | Allowed values | Description |
| title | String | The label for this dataset in the graph's legend. Set to a blank string to create no legend entry for this dataset. |
| styling | Associative array | An associative array of styling options for this dataset. Allowed key values are listed below. |
| data | Array of arrays of numbers | The data to be plotted. |
| update_callback | Function | Supply an optional callback-function to be called whenever the ranges of the axes on the graph on which this data is displayed get updated. This is used internally by the JSPlot_FunctionEvaluator class to ensure that datasets which are automatically generated by evaluating Javascript functions are re-evaluated over an appropriate span of values whenever the user scrolls the graph. |
Allowed configuration parameters within the styling array are as follows:
| Field | Allowed values | Description |
| color | Any valid JSPlot_Color instance | The color to use when drawing each data point. If null, then a sequence of colors is automatically cycled through. |
| fillColor | Any valid JSPlot_Color instance | The color to use when filling each data point. This setting is not used by all plot styles. |
| plotStyle | String | The style to use when plotting this data set. See this page for a complete list of the available styles. |
| lineType | Number | The style of line (e.g. solid, dotted, dashed) to use when plotting this data set. See this page for a complete list of the available styles. |
| pointType | Number | The style of points (e.g. circles, squares, triangles) to use when plotting this data set. See this page for a complete list of the available styles. |
| lineWidth | Number | The width of line to use when drawing a line between the data points of this data set, in plot styles which do this. Default: 1 |
| pointLineWidth | Number | The width of line to use when drawing data points, in plot styles which do this. Default: 1 |
| pointSize | Number | A scaling factor to apply to the size of all the points drawn for this dataset. Default: 1 |
JSPlot_Label_Arrow class
Instances of the JSPlot_Label_Arrow class can be used to superimpose arrows on top of graphs. A list of annotations to superimpose over a graph should be passed as that graph's annotations setting.
my_annotation = new JSPlot_Label_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 |
| axis_x | Any valid JSPlot_Axis instance | The horizontal axis along which the position of this arrow is specified. |
| axis_y | Any valid JSPlot_Axis instance | The vertical axis along which the position of this arrow is specified. |
| axis_z | Any valid JSPlot_Axis instance | The Z-axis along which the position of this arrow is specified (3D plots only). |
| 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 this arrow. |
| strokeLineWidth | Number | The width of line to use when drawing this arrow. Default: 1 |
| origin | [Number, Number] | The coordinates of the start of the arrow, measured against the selected axes. Two coordinates should be supplied on 2D graphs, and three coordinates on 3D graphs. |
| target | [Number, Number] | The coordinates of the end of the arrow, measured against the selected axes. Two coordinates should be supplied on 2D graphs, and three coordinates on 3D graphs. |
| z_index | Number | The stack order of the items to be superimposed over this graph. An element with greater stack order is always in front of an element with a lower stack order. |
JSPlot_Label_Text class
Instances of the JSPlot_Label_Text class can be used to superimpose text labels on top of graphs. A list of annotations to superimpose over a graph should be passed as that graph's annotations setting.
my_annotation = new JSPlot_Label_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 |
| axis_x | Any valid JSPlot_Axis instance | The horizontal axis along which the position of this text label is specified. |
| axis_y | Any valid JSPlot_Axis instance | The vertical axis along which the position of this text label is specified. |
| axis_z | Any valid JSPlot_Axis instance | The Z-axis along which the position of this text label is specified (3D plots only). |
| color | Any valid JSPlot_Color instance | The color of this text label. |
| fontFamily | String | The font family to use for this text label. Default: Arial,Helvetica,sans-serif |
| fontSize | Number | A scaling factor to apply to the font size of this text label. Default: 13 |
| fontStyle | String | The font style to use for this text label: either a blank string, or italic Default: None. |
| fontWeight | String | The font weight to use for this text label: either a blank string, or bold Default: None. |
| h_align | String | The horizontal alignment of this label, relative to the specified position. Options: left, center, right. Default: center. |
| position | [Number, Number] | The coordinates of the position of the label, measured against the selected axes. Two coordinates should be supplied on 2D graphs, and three coordinates on 3D graphs. |
| text | String | The text string to display. |
| v_align | String | The vertical alignment of this label, relative to the specified position. Options: top, center, bottom. Default: center. |
| z_index | Number | The stack order of the items to be superimposed over this graph. An element with greater stack order is always in front of an element with a lower stack order. |