In this section we describe features for plotting graphs with tick marks and labels. If you move the mouse over the graph, crosshairs and the x,y position are displayed. See the example program MakeGraphs.
You can now choose between two graphing packages, one which is faster, which is the one used in previous versions (currently based on Flot), or one which offers rich interactive capabilities such as zooming and panning but is slower (currently based on Plotly). The default is the fast version, corresponding to specifying fast=True in a graph, gcurve, gdots, gvbars, or ghbars statement. To use the slower but more interactive version, say fast=False. In many programs the "slow" version may run nearly as fast as the "fast" version, but if you plot a large number of data points the speed difference can be significant.
Both versions offer capabilities new to GlowScript: If you specify markers=True when creating a gcurve object, dots will be displayed at each gcurve point, and you can specify marker_radius (the default is slightly larger than the gcurve width) and marker_color (the default is the gcurve color). For a graphing object you can specify label="cos(x)" and this text, in the color of the object, will appear at the upper right. If you say legend=False the label is not actually shown.
Do try fast=True to see the many options provided. As you drag the mouse across the graph with the mouse button up, you are shown the numerical values of the plotted points. You can drag with the mouse button down to select a region of the graph, and the selected region then fills the graph. As you drag just below the graph you can pan left and right, and if you drag along the left edge of the graph you can pan up and down. As you move the mouse you'll notice that there are many options at the upper right. Hover over each of the options for a brief description. The "home" icon restores the display you saw before zooming or panning. Try this demo.
Here is a simple example of how to plot a line graph, with connected points:
f1 = series(color=color.cyan)
# x goes from 0 to 8 in steps of 0.01:
for x in range(0,8,0.01):
f1.plot(x,5*cos(2*x)*exp(-0.2*x))
A set of data to be plotted is a series, and there can be more than one series on a graph. A series can be represented by connected points (line), which is the default, by disconnected points (scatter), or by vertical bars (bar). To display a series as a scatter or bar graph, set the series type:
series( type='scatter' ... )
series( type='bar' ... )
After creating a series you can plot one or more points like this:
f1.plot(2,4)
f1.plot([ [1,5],[3,-2],[6,4] ])
When creating a series you can optionally give a list of data points:
vb=series(data=[ [1,5],[3,-2],[6,4] ])
After displaying the series as a line type, you can change the display of the data simply by changing the series type:
vb.type = 'bar'
After creating one of these graphing objects, you can reset the data to a list of points (an empty list will remove this data from the graph):
vb.data = [ [1,-2], [3,2], [8,3], [12,4] ]
You can plot more than one thing on the same graph, and specify labels. The following statements produce the graph displayed above:
p = series( color=color.red,
label='sin(x)' )
q = series()
# Can set color after making a series:
q.color = color.green
q.label = 'cos(x)'
for i in range(0,11,0.2):
rate(100)
p.plot(i+5, 3+2*sin(i))
q.plot(i+5, 3+2*cos(i))
It is often the case that skipping points may hardly affect the display but will make graph plotting much faster, in which case it's useful to specify an interval between plotting of points:
interval If interval=10, a point is added to the plot only every 10th time you ask to add a point. If interval is 0, no plot is shown. If interval is -1, no points are skipped.
Deleting an entire graph
If you say g = graph(), you can delete the entire graph by saying g.delete().
var p = series( {color:color.red,
label='sin(x)'} )
var q = series()
# Can set color after making a series:
q.color = color.green
q.label = 'cos(x)'
for (var i=0; i<=11; i+=0.2) {
rate(100)
p.plot(i+5, 3+2*sin(i))
q.plot(i+5, 3+2*cos(i))
}
Summary of options that affect a series
color Color of the series
label Text of the label for the series
width Width in pixels of a line, or the edge of a scatter circle or bar
radius Radius in pixels of a scatter circle (default is 3 pixels)
size Diameter in pixels of a scatter circle (default is 6 pixels)
delta Width of a bar (default = 1)
horizontal true for horizontal bars (default is false, giving vertical bars)
interval Skip points (see discussion above)
Special option for a line series
For a line series, if you specify dot=true the current plotting point is highlighted with a dot, which is particularly useful if a graph retraces its path. You can specify a dot_radius attribute, which specifies the width of the dot in pixels (default is 1 pixel more than half the width of the line). By default the dot has the same color as the line, but you can specify a different color, as in dot_color=color.green.
Overall graph options
You can establish a graph to set the size, position, and title for the title bar of the graph window, specify titles for the x and y axes, specify maximum values for each axis, and set foreground and background colors, before creating gcurve or other kind of graph plotting object:
gd = graph(width=600, height=150,
title='' <b>Test</b>',
xtitle='t', ytitle='N',
foreground=color.black,
background=color.white,
xmax=50,
xmin=-20,
ymax=5E3, ymin=-2E3)
In this example, the graph window will have a size of 600 by 150 pixels, and above the graph there will be an indented bold title "Test". The x and y axes of the graph will have the labels. 't' and 'N' (xtitle and ytitle do not currently handle html commands such as <b>). The foreground color is black (the default), and the background color is white (the default). Once the graph has been activated by executing gcurve or gdots or gvbars or ghbars, it is not possible to change the title, xtitle, or ytitle and further.
Instead of autoscaling the graph to display all the data, the graph in this example will have fixed limits. The horizontal axis will extend from -20 to +50, and the vertical axis will extend from -200 to +5000. If you specify xmax but not xmin, it is as though you had also specified xmin to be 0; similarly, if you specify xmin but not xmax, xmax will be 0. The same rule holds for ymax and ymin.
Offsets: If you specify xmin or ymin to be greater than zero, or xmax or ymax to be less than zero, the crossing point (origin) of the x and y axes will no longer be at (0,0), and the graphing will be offset. If you offset the origin of the graph, you must specify xmax to be greater than xmin, and/or ymax to be greater than ymin.
If you simply say graph(), the defaults are width=640, height=200, fully autoscaled. Black foreground and white background are the defaults.
You can optionally specify minimum and maximum x or y values with xmin, xmax, ymin, ymax. The following will set minimum values for x and y, with the maximum values determined by the actual data:
gd = graph( width=600, height=150,
xmin=-5, ymin=10 } )
After creating a graph, you can change any of these graph attributes:
gd.xmin = 4
gd.width = 300
You can align a graph to the left or right of another graph or a canvas:
align Set to "left" (graph forced to left side of window), "right" (graph forced to right side of window), or "none" (the default alignment). For example, if you want to place a graph to the right of a canvas, set the canvas align attribute to the string "left" and the graph align attribute to "right". If the window is too narrow, the object that is on the right will be displayed below the other object.
You can have more than one graph window: just create another graph. By default, any graphing objects created following a graph belong to that graph, or you can specify which graph a new object belongs to:
E = series(graph=graph2,
type='scatter',
color=color.blue)
Log-log and semilog plots
When creating a graph, you can specify logarithmic plots by specifying logx=True and/or logy=True; in JavaScript, true. All values must be positive, representing logarithms of numbers between infinitely small (logarithm approaches 0) and infinitely large; that is, numbers such as 0.01, 0.1, 1, 10, 100, etc. Do not specify a logx axis for horizontal bars, or logy for vertical bars, because the starting point of a bar is 0, and the log of 0 is negative infinity.
graph vs. canvas
A graph region is similar to a canvas region. The main difference is that a graph is essentially two-dimensional and has nonuniform x and y scale factors.
For more information
GlowScript incorporates the Flot 2D graphing package, and more information is available on the many features that Flot offers. The data atttribute is essentially the same as the data attribute of Flot graphs, except that GlowScript RGB colors (with components in the range 0 to 1) are converted to Flot RGB colors (with components in the range 0-255).