THEMETRIAL

Render Mathematical Functions And Graphs Using JavaScript – Plotta.js

Author:iamsjy17
Views Total:2,568 views
Official Page:Go to website
Last Update:June 7, 2021
License:MIT

Preview:

Render Mathematical Functions And Graphs Using JavaScript – Plotta.js

Description:

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="https://www.cssscript.com/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:

v1.1.1 (06/07/2021)


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.