Javascript Mathematical Functions And Graphs Library | Plotta.js

How to make use of it:

Download and import the plotta.js library into the HTML file.

<script src="dist/plotta.js"></script>

Create an HTML5 canvas component on which you’d like to draw the mathematical functions.

<canvas id="canvas"></canvas>

Prepare your data for the mathematical features.

const xy = x => x;
const testData = {
  linedatas: [
    {
      id: 'line1',
      type: 'func',
      legend: 'cos',
      color: '#55A8DE',
      visible: true,
      func: Math.cos,
      dotNum: 1000
    },
    {
      id: 'line2',
      type: 'func',
      legend: 'sin',
      color: '#A2CCB6',
      visible: true,
      func: Math.sin,
      dotNum: 1000
    },
    {
      id: 'line3',
      type: 'func',
      legend: 'x = y',
      color: '#C94346',
      visible: true,
      func: xy,
      dotNum: 1000
    },
    {
      id: 'line4',
      type: 'func',
      legend: 'sinh',
      color: '#F7CE6F',
      visible: true,
      func: Math.sinh,
      dotNum: 1000
    },
    {
      id: 'line5',
      type: 'func',
      legend: 'cosh',
      color: '#9168F6',
      visible: true,
      func: Math.cosh,
      dotNum: 1000
    }
  ],
  config: {
    font: '',
    legendVisible: true,
    title: {
      location: 'center',
      color: '#666666',
      text: 'Plotta.js'
    },
    grid: {
      type: '',
      visible: true,
      color: '#888888'
    },
    border: {
      type: '',
      visible: true,
      color: '#DDDDDD',
      width: 1
    },
    tics: {
      visible: true,
      color: '#888888',
      value: {
        x: 2,
        y: 2
      }
    },
    axis: {
      x: {
        visible: true,
        label: 'X',
        color: '#666666',
        location: 'center',
        range: {
          start: -10,
          end: 10
        }
      },
      y: {
        visible: true,
        label: 'Y',
        color: '#666666',
        location: 'center',
        range: {
          start: -10,
          end: 10
        }
      }
    },
    table: {
      visible: true
    }
  }
};

Plot the info as mathematical features and graphs.

const canvas = document.getElementById("canvas");
var plotta = new Plotta(canvas, testData);

API strategies.

const canvas = document.getElementById("canvas");
var plotta = new Plotta(canvas, testData);

// update data
plotta.UpdateGraph(new data)

// add a new line
plotta.AddLine(line data)

// delete a line
DeleteLine(line id)

// set font
SetFont(font)

// set title
SetTitle(title)

// set title color
SetTitleColor(color)

// set title location: left, center, or right
SetTitleLocation(location)

// show grid
ShowGrid(true or false)

// set grid color
SetGridColor(color)

// show border
ShowBorder(true or false)

// set border color
SetBorderColor(color)

// set border width
SetBorderWidth(width)

// show ticks
ShowTics(true or false)

// set tick color
SetTicsColor(color)

// set tick value
SetTicsValue(value)

// show x-axis label
ShowAxisXLabel(true or false)

// set x-axis label
SetAxisXLabel(label)

// set x-axis label color
SetAxisXLabelColor(color)

// set x-axis label location
SetAxisXLabelLocation(location)

// show y-axis label
ShowAxisYLabel(true or false)

// set y-axis label
SetAxisYLabel(label)

// set y-axis label color
SetAxisYLabelColor(color)

// set y-axis label location
SetAxisYLabelLocation(location)

// show table
ShowTable(true or false)

Render Mathematical Functions And Graphs, Plotta.js Plugin/Github

See Demo And Download