Skip to content

Graphie Helper Functions

kramtark edited this page Nov 8, 2011 · 9 revisions

graphie-helpers

rectchart( divisions, colors[, row #] )

Produces a single row of blocks which may be divided into several sections and colors. To make multiple rows, you must use the "row #" field to specify which row it is for formatting purposes.

init({ range: [ [0, 1], [0, 1] ], scale: [250, 25] });
rectchart( [10, 5], ["#28AE7B", "#999"] )

rectchart()

piechart( divisions, colors, radius )

Produces a pie chart which may be divided into several sections and colors. You must also specify the radius in "units" (based on the scale parameter from the graph's initialization).

init({ range: [ [-3, 3], [-3, 3] ], scale: 25 });
piechart( [5, 3], ["#e00", "#999"], 2 );

piechart()

ParallelLines( x1, y1, x2, y2, distance )

Creates a graph object with two parallel lines based on the coordinates of the "lower" line which begins at (x1, y1) and ends at (x2, y2). The second line will be placed parallel to the first at "distance" units above it. These must be explicitly drawn using the graph.pl.draw() command. To add a line which intersects both, use graph.pl.drawTransverse( angle ), but you must include the angles module to do so. Note that the angle here is drawn from the horizontal, not from the drawn lines (in the case that you are not drawing them horizontally).

init({ range: [ [ -1, 11 ], [ -1, 3 ] ] });
graph.pl = new ParallelLines( 0, 0, 10, 0, 1 );
graph.pl.draw();
graph.pl.drawTransverse( 45 );

ParallelLines()

Unasked Questions

How do I draw 3D figures as in the "Solid Geometry" exercise?

Those figures are drawn "manually" using the tools from graphie.js; specifically, path() and arc(). Here is the code used in that exercise to draw a "cube":

init({
    range: [ [-1, 4], [-0.6, 3.1] ]
});
path([ [0, 0], [0, 2], [2, 2], [2, 0], true ]);
path([ [2, 0], [3, 1], [3, 3], [1, 3], [0, 2] ]);
path([ [2, 2], [3, 3] ]);

Manually drawn cube