Math chart - component for mathematical functions charts

1. Quick start

Install it using npm or yarn:

npm install math-charts --save
yarn add math-charts --save

Import FunctionsGraph class to your project:

import { FunctionsGraph } from 'math-chart';

Set chart container using desired html canvas element id:

let graph = new FunctionsGraph();
graph.SetContainer('testCanvas');

Set starting viewport (X axis start, Y axis start and scale) and add some functions:

graph.SetViewport(-8, -2, 1);
graph.AddFunction('x^2');
graph.AddFunction('lg(-x)');
graph.AddFunction('ln(x+3)');

Draw a graph!

graph.Draw();

Graph can be panned using mouse and resized using mouse wheel.

2. Examples

Evaluate mathematical expressions:

import { Interpreter } from 'math-chart';

let interpreter = new Interpreter();
interpreter
.ExecuteExpression('100-4*20-(4+1)');

Result: 15

Evaluate expressions with variables:

Result: 0

import { Interpreter } from 'math-chart';

let interpreter = new Interpreter();
interpreter
.EvaluateExpression('x^2+14-y', {x:6, y:50});

Evaluate mathematical expressions without explicit multiplication:

import { Interpreter } from 'math-chart';

let interpreter = new Interpreter();
interpreter
.EvaluateExpression('2(q+2)+3(q-1)', {q:2});

Result: 11

Draw graph with multiple functions

import { FunctionsGraph } from 'math-chart';
let graph2 = new FunctionsGraph();
graph2.SetContainer('graph2');
graph2.SetViewport(-4, -3, 1);
graph2.AddFunction('x^3');
graph2.AddFunction('sqrt(x+2)');
graph2.AddFunction('2/x');
graph2.Draw();

Static graph

import { FunctionsGraph } from 'math-chart';
let graph3 = new FunctionsGraph({canResize: false, canMove: false});
graph3.SetContainer('graph3');
graph3.SetViewport(-1, -2, 1);
graph3.AddFunction('x-3');
graph3.AddFunction('-x+4');
graph3.Draw();

No grid or labels

import { FunctionsGraph } from 'math-chart';
let graph4 = new FunctionsGraph({drawGrid: false, drawGridLabels: false});
graph4.SetContainer('graph4');
graph4.SetViewport(-1, -2, 1);
graph4.AddFunction('x^(x-3)');
graph4.AddFunction('x^4+2x^3-6x^2');
graph4.Draw();

Custom colors and font

import { FunctionsGraph } from 'math-chart';

let functionColors = ['#ad8708','#edbd1e','#ffd64f'];
let graph5 = new FunctionsGraph({ functionColors: functionColors, labelFont: '12px monospace', gridColor: '#c8daf7'});
graph5.SetContainer('graph5');
graph5.SetViewport(-1, -2, 1);
graph5.AddFunction('x^3-3x^2+1');
graph5.AddFunction('2^x');
graph5.AddFunction('sin(x)+x');
graph5.Draw();

3. API

Interpreter

_{Allows numerical evalutation of functions with or without variables}

Operation	Explanation
CreateExpression(expression: string):IExpression	Parses given string expression to computable expression that can be executed by math chart plugin. Called internally by execute and evaluate expression methods
ExecuteExpression(expression: string): number	Executes numerical expression (without variables)
ExecuteParsedExpression(expression: IExpression): number	Executes parsed numerical expression (without variables), parsed with CreateExpression method
EvaluateExpression(expression: string, replacementDictionary: any): number	Evaluates string expression result using given variable replacement values. For example, {x: 2, y : 4}
EvaluateParsedExpression(expression: IExpression, replacementDictionary: any): number	Evaluates parsed expression result using given variable replacement values. For example, {x: 2, y : 4}

Functions graph

_{Manages all graph drawing}

Operation	Explanation
SetContainer(container: string)	Sets a graph container to a given canvas element id.
AddFunction(functionExpression: string)	Adds a new function to a graph
RemoveFunction(index: number)	Removes a function from a graph by given index
SetEvaluationBoundaries(start: number, step: number, count: number)	Sets functions evaluation boundaries. Start defines starting x value, step defines functions smootness, count - number of function evaluation steps
SetViewport(startX: number, startY: number, scale: number = 1)	Sets graph viewport. startX - starting value on X axis (on the left); startY - starting value on Y axis (on the bottom); scale - Graph's scale
Draw()	Explicitly redraws graph with all functions
UpdateSettings(newSettings: any)	Updates existing graph settings. If any setting is not passed, its default value is used (see below)

Functions graph configuration

_{Configuration, passed via FunctionsGraph constructor or
UpdateSettingsMethod}

Setting	Type	Role	Default value
drawGrid	Boolean	Draw a graph grid	true
drawFunctions	Boolean	Draw graph functions	true
gridColor	String - color hex	Color of a graph grid	#75ea88
labelColor	String - color hex	Color of graph labels	#000
drawGridLabels	Boolean	Draw graph labels	true
labelFont	String - font	Font of graph labels	14px serif
canResize	Boolean	Can graph be resized using mouse wheel	true
canMove	Boolean	Can graph be panned using mouse drag	true
functionColors	String[] - array of hex colors	Colors of functions	['#4286f4', '#f44141', '#772f93','#e8a23a']

4. Available operations

Operation	Expression	Arity
Sum	{x}+{y}	2
Difference - Subraction	{x}-{y}	2
Product - Multiplication	{x}*{y}	2
Quotient - Division	{x}/{y}	2
Power	{x}^{y}	2
Parenthesis	({x})	1
Square root	sqrt({x})	1
Sin	sin({x})	1
Cos	cos({x})	1
Tan	tan({x})	1
Natural logarithm	ln({x})	1
Base 10 logarithm	lg({x})	1