Fork me on GitHub
Drop files here
Update Graph Save Graph Load Graph
Width: 550px Height: 450px Aspect-Ratio: 1

Development Website

To see the source code for Graphit and/or contribute, comment on, or suggest features for Graphit, visit the development site on Github: https://github.com/siefkenj/graphit

Overview

Graphit allows you to create and save mathematical plots directly from your browser. A graph is defied by javascript code and then converted to SVG with a modified version of the ASCIIsvg library.

To create a graph, go to the Graph tab and enter your graph commands into the text box. Every graph should start with initPicture(min_x,max_x,min_y,max_y). Axes can be added with the axes command and plots can be added with plot. See the Examples tab for examples on how to use these commands.

When you've modified the code for a graph, click Update Graph to update the preview of your graph, and when you are satisfied with your graph, click Save Graph to save an SVG copy to you computer. Depending on your browser settings, you may be prompted to give a filename for the graph or it may be automatically assigned a name and saved to your downloads folder. You may have to change the filename to end in .svg if it does not end in .svg already. This SVG copy can then be converted into a pdf or image file using a tool like Inkscape for inclusion into a LaTeX document, or it can be directly embedded into a web page as an SVG.

If you later decided you want to edit an svg created with graphit that you have saved to your computer, you can click Load Graph in the Graph tab or drag and drop the file into your web browser.

Technical Notes

The code used to make a graph with graphit is actually real (slightly-preparsed) javascript code. That means any javascript constructs (for example, multiple commands on a single line with ;) are usable with graphit. All graphing parameters (like fontsize, etc.) are javascript variables and graphing commands are javascript functions (e.g. initPicture(-4.3,4.3,-3.3,3.3)) which use any pertinent global variables to issue the appropriate SVG drawing operation.

Using global variables like this gives the appearance of a stack-based graphing language. Since commands reference global variables, one must take care not to use the var keyword to define a graphing parameter, since it would then be a local variable and have no affect on graphing commands.

Math Functions and Constants

Graphing Variables

These variables affect how things on your plot are drawn

Graphing Functions

These functions allow you to draw on your graph

Colors

Colors can be specified in two ways: a predefined color name or a hexadecimal color number prefixed with the '#' symbol. Either way, a color must be specified in quotes. Hexadecimal colors take the form #rrggbb or #rgb where r, g, b are red, green, blue respectively taking values from 0 to 255 for the two-digit-per-color case and 0-15 for the one-digit-per-color case.

Select the file format to save in