https://github.com/phenax/graph-plotting
Javascript library that lets you plot points and lines based on the Cartesian system with a very simple api, on an html5 canvas.
https://github.com/phenax/graph-plotting
canvas graph javascript-library plot
Last synced: 3 months ago
JSON representation
Javascript library that lets you plot points and lines based on the Cartesian system with a very simple api, on an html5 canvas.
- Host: GitHub
- URL: https://github.com/phenax/graph-plotting
- Owner: phenax
- License: apache-2.0
- Created: 2016-12-11T07:29:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-28T14:30:05.000Z (about 7 years ago)
- Last Synced: 2025-01-16T19:52:33.231Z (5 months ago)
- Topics: canvas, graph, javascript-library, plot
- Language: JavaScript
- Size: 27.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Graph
[](https://travis-ci.org/phenax/graph-plotting)
Javascript library that lets you plot points and lines based on the Cartesian system with a very simple api, on an html5 canvas.
[Preview](http://htmlpreview.github.io/?https://github.com/phenax/graph-plotting/blob/master/index.html)
### API
* Create the graph
```javascript
const ctx= canvas.getContext('2d');
const graph= new Graph({
context: ctx,
labels: {
x: 'foo',
y: 'bar'
},
dimens: {
width: $canvas.width,
height: $canvas.height,
}
});
```
* Set the axes for the graph(This will also determine the scale for the graph)
```javascript
graph
.setAxisX([-100, 100])
.setAxisY([-100, 100]);
```
* Plot a point on the graph
```javascript
graph.plot(x, y);
```
* Plot a line
- Standard form
```javascript
graph.plotLine({ 'standard': { m: 1, c: 20 }});
```
- 2 Point form
```javascript
graph.plotLine({ '2 points': [ [ 0, 0 ], [ 2, 1 ] ]});
```
* Show the graph
```javascript
graph.show();
```