Render Mathematical Functions And Graphs Using JavaScript – Plotta.js

Plotta.js a vanilla JavaScript plotting library used to draw/plot mathematical functions using JavaScript and HTML canvas element.

Basic usage:

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

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

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

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

Prepare your data for the mathematical functions.

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 data as mathematical functions and graphs.

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

API methods.

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)

Changelog:

v2.0.0 (08/006/2022)

• Modify the input dataset to match the model
• Add platform-specific types
• add showLegend, showTitle
• Bug Fixes

v1.1.1 (06/07/2021)

• Bug Fixes
• Refactors