TruGraph

Getting Started

To use TruGraph in your project, first import the modules into your project using:

import TruGraph from 'trugraph'

Basic Usage

To add a graph to your page call TruGraph as follows:

let graph = new TruGraph(id, data, layout)

• REQUIRED: id is the id of the container element you wish to append your graph to.
• REQUIRED: data is an object (or array of objects) containing the information about the expressions you wish to graph, such as the mathematical function, color, stroke, arrowheads, etc.
• OPTIONAL: layout is an object used to set the properties of the graph, such as the axes, legends, etc.

Data Object Properties

|Property |Type|Options |Default | |-------------|--------|-----------------------------------------------------------------------------------------|---------------------------------| |expression |string |see math-expressions package |x^2 | |colour |string |hex, rgb, or rgba color scheme |#FF0000 | |thickness |integer |any integer value |2 | |style |string |solid |solid | |domain |array |Must contain 2 values. Any number or the string values 'negative infinity' and 'infinity'|['negative infinity', 'infinity']| |range |array |Must contain 2 values. Any number or the string values 'negative infinity' and 'infinity'|['negative infinity', 'infinity']| |endpoints |Boolean |true or false |true | |endpointLeft |string |'arrow', 'open-circle', 'closed-circle' |'arrow' | |endpointRight|string |'arrow', 'open-circle', 'closed-circle' |'arrow' |

Layout Object Properties

|Property |Type|Options |Default | |--------------|--------|------------------------------------------------------------------------------------------------|-------------------| |visibleDomain |array |Must contain 2 values. Any number or the string values 'negative infinity' and 'infinity' |[-10,10] | |visibleRange |array |Must contain 2 values. Any number or the string values 'negative infinity' and 'infinity' |[-10,10] | |dependentVar |string |Set the variable to be labelled on the horizontal axis of the graph |'x' | |independentVar|string |Set the variable to be labelled on the vertical axis of the graph |'y' | |border |boolean |Set to true to show a border around the graph, false for no border |true | |borderColour |string |hex, rgb, or rgba color scheme |'#000000' | |borderWidth |integer |Value to set the thickness of the border |2 | |square |boolean |When set to true the graph will always render in a square regardless of the container dimensions|false | |x |object |See axis properties below | | |y |object |See axis properties below | | |graphTitle |string |Any string of characters |'This is the Title'|

Axis Properties

|Property |Type|Options |Default| |--------------|--------|----------------------------------------------------------------------------|-----------| |gridLines |boolean |Set to true to show the axis gridlines on the graph, or false to remove them|true | |gridstart |number |A reference value on the axis for gridlines to start from |0 | |gridspace |number |A value for the spacing between gridlines |0.5 | |tickStart |number |A reference value on the axis for axis ticks to start from |0 | |tickSpace |number |A value for the spacing between gridlines |0.5 |