Javascript Math Toolkit Function Graphing Engine Update


The jsMathToolkit (Canvas) function graphing engine is currently under development and is written on top of EaselJS.  Some of the engine features are listed below.

– Ability to zoom and pan the graph and control formatting of tic labels.

– Layer functions on the graph with a GraphLayer class and toggle visibility by layer name.

– User-defined functions, pre-programmed function library, and ability to plot freeform functions using the jsMathToolkit function parser.

– Auto-estimate first derivative for functions in which user can not or does not wish to program the derivative evaluation.

– Apply line decorators to graph layers, which allows selected functions to be plotted with dashed or dotted lines.

– Rich set of overlay tools including markers and slice tools that allow interaction with the graph.

Here is the very first sample plot.



and here is the code

graph = new fcnGraphRef.FcnGraphEngine(stage);
graph.set_graphBounds( defaultLeft, defaultTop, defaultRight, defaultBottom, axisLength, axisHeight );
graph.set_axisParams( 3, '#cccccc', 1.0, 3, '#cccccc', 1.0, true, true );
graph.set_gridParams( 1, '#ebebeb', 0.5, majorInc, minorInc, "", '#ebebeb', decimals, true );
var layer = new layerRef.GraphLayer();
var f = function(x){ return Math.sin(x); };
layer.set_function( f );
layer.set_lineProperties( '#ffff00', 2 );
graph.addLayer( "SIN", layer );

Currently, zoom/pan works on the grid, but has not been implemented with the function layers. Auto-derivative has been coded, but not tested and integrated into the engine. The function parser is working but needs integration into the GraphLayer. Line decorators have been tested outside the engine. Overlay tools have been used in many other demos and simply need to be more seamlessly integrated into the engine.

I’ll post more as these features are added. Thanks for your interest.

One Comment on “Javascript Math Toolkit Function Graphing Engine Update

  1. Pingback: Javascript Math Toolkit Function Graphing Engine Update Part II : The Algorithmist