Author: | iamsjy17 |
---|---|
Views Total: | 991 views |
Official Page: | Go to website |
Last Update: | August 6, 2022 |
License: | MIT |
Preview:

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="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