/jquery-graphie

a cute little graphing library

Primary LanguageJavaScript

Graphie

A cute little graphing library with an adorably minimal amount of functionality.

Visit http://jquery-graphie.heroku.com for examples.

Using graphie

  • Include Raphael and the plugin.
  • Call $.graphie() on any <dl>, <ul> or <ol> that contains numeric values.
  • Graphie will add a class of 'graphie' on any object that it draws within, allowing you to set dimensions & background color of that object in CSS.

Options (defaults shown)

$item.graphie({
  type: 'line',             // can be either 'line' or 'column'
  line: {
    bgcolor: '#5ad0ea',     // Background color of line/columns. Set to false for no background.
    smoothing: 'auto',      // You can set an arbitrary line smoothing value here (number without 'px'). Change to 0 for straight lines.
    column_width: 'auto'    // You can set an arbitrary width here (number without 'px').
    stroke: '#5ad0ea'       // Stroke color
    stroke_width: 0         // Stroke width. Looks best with no bgcolor.
  },
  labels: {
    x: 5,                   // Label distance from sides
    y: 5,                   // Label distance from bottom
    color: '#000',          // These
    family: 'Helvetica',    // are
    weight: 'bold',         // obvious,
    size: 12                // right?
  }
});