https://github.com/boycce/groph
Beautiful graphs built on-top of pixi's super fast canvas renderer.
https://github.com/boycce/groph
Last synced: about 1 year ago
JSON representation
Beautiful graphs built on-top of pixi's super fast canvas renderer.
- Host: GitHub
- URL: https://github.com/boycce/groph
- Owner: boycce
- License: mit
- Created: 2014-10-24T13:50:08.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-06-26T03:06:22.000Z (almost 3 years ago)
- Last Synced: 2025-03-20T16:48:46.896Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 245 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Groph
====
Create sexy looking line graphs, built with the help of Pixi using the canvas element. Currently groph's API only supports line charts and a single style, but no doubt this will soon change.
### Road Map ###
- Support for more line chart styling options
- Add a destroy method
- Reduce dependencies
- ~~Resposive charts~~
- Create github pages
### Contribute ###
We would love for you to be apart of this project and in the journey of laying down a path for faster, more expressive charting API, in support of canvas (and soon WebGL) which both have optimistic futures. In your pull request please do not commit `groph.min.js`.
### Features ###
- Canvas renderer, what drives Google maps
- Reuse groph instances for a faster build
- Responsive
- Sleek animations
### Example ###
- [Line graph 1](https://github.com/Boyyce/groph/blob/master/example/index.html)
### Usage ###
Include on your page groph and its dependencies. I have compiled pixi with the bare necessities in under < 57kb. This is located inside the `vendors` directory.
```html
```
Run Groph
```javascript
var groph = new Groph({
selector : '#graph1',
w : 1008,
h : 365,
data1: [15, 50, 200, 243, 400, 302, 400],
data2: [10, 33, 155, 110, 300, 150, 250]
});
```
### Options ###
- `selector`: jQuery selector of your element.
- `w`: Width of the graph
- `h`: Height of the graph
- `pointMax`: Max value of the graph
- `pointMin`: Min value of the graph
- `graphScale`: Scale the graph
- `graphPadding`: eg. `[60, 10, 50, 20]`
- `data1`: Array of your incoming data
- `data2`: Array of your incoming data
- `anim`: Animate on init
- `cwd`: Where the textures are loaded from (two so far).
- ... see code for more
### API Methods ###
- `remove`: Removes groph and DOM reference but keeps processed and canvas data.
- `remake`: Sets up groph again. You can re-pass any settings
Enjoy.