Skip to content

Deprecated Graph API

marcia edited this page Jun 27, 2011 · 1 revision

It's possible to include graphs in your problems, hints, and solution/answers. A basic graph is defined with a class of graph. Width and height are specified as CSS in a style attribute like so:

<div class="graph" style="width: 200px; height: 200px;">
    <!-- Graph-related commands here. -->
</div>

You can then use graph-related commands to do rendering. At the moment the exact API for rendering is very much in flux. We're currently using a variation of the ASCIIsvg API but are looking to switch to something better.

For a current list of commands see the following: http://www1.chapman.edu/~jipsen/svg/asciisvgcommands.html

If you wish to set the styling for how drawing should look you can currently do this in the data-style attribute on the graph element. For example:

<div class="graph" style="width: 400px; height: 400px;"
    data-style="font-size: 15px; font-family: sans-serif; font-style: bold; stroke: blue;">
</div>

Additionally there are built-in styles of graphs. At the moment the only built-in style is "plane" (which gives you a -10 - 10 x/y coordinate grid). This can be set using the data-graph-type attribute.

An example full graph definition is as follows:

<div class="graph" style="width: 400px; height: 400px;"
        data-style="font-size: 15px; font-family: sans-serif; font-style: bold; stroke: blue;"
        data-graph-type="plane">
    plot('(' + quadratic + line + ')/' + line);
    ASdot([a, limtoa], 4, "black", "white");
</div>