Home | Pictures of 3D objects

Graphs |
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. 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,wait) 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(). JavaScript version 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,wait) 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) 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 object to set the size and color of the graph window before creating a series for that graph:: gd = graph( width=600, height=150, foreground=color.black, background=color.white ) 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).

Top of page