Graphr.js

graphr.js is a easy to use graphing library to draw graphs of equations using JS Canvas API. It has no dependencies.

Usage

All you need to do is include either the graphr.js file or the graphr.min.js and you are all set to draw graphs, beautfully. graphr.min.js is just the minified form of graphr.js. For development, it is advised to use graphr.js and for productions, graphr.min.js

API

The Constructor

new Graphr()
Creates a new Graphr object with the settings provided.

Parameters

new Graphr(settings, canvasElement)

• settings - object - optional: An object passed to the contructor containing the settings for the Graphr object. The following properties of the settings can be provided to be used in the returned Graphr object.
  
  1. width: An integer specifying the width of the graph. Default: 500
  2. height: An integer specifying the height of the graph in pixels. Default: 250
  3. backgroundColor: A string specifying the background color of the graph. The string can be any of the CSS colors, including HEX, RGB or color names like red, blue, pink etc. Default: "#223"
  4. grid: A boolean value specifying if the graph has a grid. Default: true
  5. gridColor: A string specifying the color of grid of the graph if the grid property is true. The string can be any of the CSS colors, including HEX, RGB or color names like red, blue, pink etc. Default: "#fff"
  6. rangeStart: An integer specifying the starting point of the x axis of the graph. Default: -10
  7. rangeStart: An integer specifying the ending point of the x axis of the graph. Default: 10
  
  

  Any graph will be drawn between x = rangeStart and x = rangeEnd. rangeEnd must be larger than rangeStart.

• canvasElement - HTML Canvas Element - optional: Graphr.js renders the graphs on a canvas elements which it creates on its own. If however, you want to provide your own canvas element on which Graphr.js must draw the graphs, you can do so by providing the canvas element itself as the second parameter. You may want to do this for several reasons like, adding your own CSS styling to the graph, for an example.

Note
The constructor must be called after the document is ready and loaded. All the settings of the Graphr object can be modified later on (Refer to Modifying Graphr Settings).

Return Value

Returns a new Graphr object with the settings provided.

Example

var graph = new Graphr({ 

	height: 400, 

	width: 400, 

	backgroundColor: "#222",

	gridColor: "#666",

	rangeStart: -5,

	rangeEnd: 5

});

The above code will generate the following graph.

Adding Graphs

The Graphr object can be thought of like a graph paper. You can add multiple graphs to it and they will be drawn onto the "graph paper" . The equations are added using the .addGraph() method.

Parameters

.addGraph(equation, graphColor)

• equation - function - required: The equation of the graph to be drawn. The equation is a function which receives a number as a parameter and should return a number.
• graphColor - string - optional: A string specifying the color of the graph to be drawn. The string can be any of the CSS colors, including HEX, RGB or color names like red, blue, pink etc. Default: "#ff5155"

Note
Several graphs can be added to a single Graphr object. They can even be modified later on (Refer to Modifying Existing Graphs).

Return Value

Returns a number specifying the id of the graph. It is a good to store the returned id for it is used to make any changes to the graph drawn later (Refer to Modifying Existing Graphs).

Example

var graph = new Graphr({ 

	height: 400, 

	width: 400, 

	backgroundColor: "#222",

	gridColor: "#666",

	rangeStart: -3,

	rangeEnd: 3

});

graph.addGraph(function(x){return x * x;}, "#2ecc81");

graph.addGraph(function(x){return Math.sin(x);}, "#ff5155");

The above code will generate the following graph.

Adding Graphs

The Graphr object can be thought of like a graph paper. You can add multiple graphs to it and they will be drawn onto the "graph paper" . The equations are added using the .addGraph() method.

Parameters

.addGraph(equation, graphColor)

• equation - function - required: The equation of the graph to be drawn. The equation is a function which receives a number as a parameter and should return a number.
• graphColor - string - optional: A string specifying the color of the graph to be drawn. The string can be any of the CSS colors, including HEX, RGB or color names like red, blue, pink etc. Default: "#ff5155"

Note
Several graphs can be added to a single Graphr object. They can even be modified later on (Refer to Modifying Existing Graphs).

Return Value

Returns a number specifying the id of the graph. It is a good to store the returned id for it is used to make any changes to the graph drawn later (Refer to Modifying Existing Graphs).

Example

var graph = new Graphr({ 

	height: 400, 

	width: 400, 

	backgroundColor: "#222",

	gridColor: "#666",

	rangeStart: -3,

	rangeEnd: 3

});

graph.addGraph(function(x){return x * x;}, "#2ecc81");

graph.addGraph(function(x){return Math.sin(x);}, "#ff5155");

The above code will generate the following graph.