Home

JSPlot Documentation: Graph options

  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

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.

Share

Follow