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

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.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tweenjs/0.5.1/tweenjs.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js"></script>
<script src="../js/groph.min.js"></script>

Run Groph

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.