# Render Mathematical Functions And Graphs Using JavaScript – Plotta.js

Category: Chart & Graph , Javascript | August 6, 2022
Author: iamsjy17 1,143 views Go to website August 6, 2022 MIT

## Description:

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

## Basic usage:

`<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)
// 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