Bluff

  • Tags : jquery, charts, plot, graphs
  • Latest : 0.1.1
  • Last Updated: 06 September 2010
  • Grails version : 1.3.1 > *
  • Authors : clumsy
2 votes
Dependency :
compile ":bluff:0.1.1"

Documentation

Summary

Installation

grails install-plugin bluff

Description

Bluff Plugin

This plugin adds Bluff library functionality to your app. You can easily generate beautiful charts with lot of options provided. Most of the information is taken from official documentation.

Syntax

In order to use Bluff library you must first load all needed libraries by putting

<bluff:resources />
tag in the head block of your page.

The common syntax for using bluff charts is

<bluff:TYPE id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>
or
<bluff:draw id="ID" type="TYPE" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"] />

Obligatory attributes

  • ID - It's the identificator of the corresponding canvas object that wraps the chart.
  • STYLE(optional) - CSS style of the span object, containing the chart.
  • DATA - It's a list with the map series values (more information below). (Or you may use data_from_table option to load data, see information below)
  • LABELS - It's a map containing the correspondence of the tick position and the label you want to give it (e.g.: [0: '2005', 5: '2010'])
  • attrs(optional) - That can be a sequence of options available for the tag, e.g. type="line" width="100".
  • OPTIONS(optional) - A map that contains key-value representation of options of the chart.
Since 0.1.1 version of the plugin options attribute can be used in conjuction with the attrs values. The priority is given to attrs values.

Common options

  • title - Sets the title of the graph, printed at the top. Should be a string.
  • tooltip - Set to true to enable on-mouse-hover tooltips.
  • width - Sets the width of the chart canvas (default value is 300).
  • height - Sets the height of the chart canvas (default value is 225).
  • font_color - Sets the color used to render text, specified as a CSS-style string, e.g. g.font_color = '#ad845c'. This value must be set after setting the theme for the graph.
  • *_font_size - Sets the size used to render various textual fragments of the graph. Options include title_font_size, legend_font_size and marker_font_size, all of which should be numbers. Values will be scaled; you should supply pixel values intented for a graph 800px wide.
  • hide_legend - Whether the legend should be hidden (true) or not (false).
  • hide_line_markers - Set to true to hide line markers.
  • hide_line_numbers - Line numbers are not rendered if this is set to true.
  • hide_title - Set to true to prevent the title being rendered.
  • *_margin - Four options – top_margin, right_margin, bottom_margin and left_margin – set the padding around the edge of the canvas. Values should be numbers, representing pixel offsets relative to a graph 800px wide. So, for example if you set g.top_margin = 40 for a graph 400px wide, the actual margin rendered will be 20px.
  • title_margin - Alters the spacing under the title.
  • legend_margin - Alters the spacing under the title legend.
  • marker_color - CSS color used to render markers, e.g. g.marker_color = '#f5ac34'.
  • marker_count - Sets the number of horizontal marker lines rendered.
  • minimum_value, maximum_value - Use these options if you want the range rendered on the axes to extend beyond the range of the data. You must set these values after you’ve supplied all the data to the graph.
  • no_data_message - Sets the text to display if the graph has no data, e.g. g.no_data_message = 'No data'.
  • sort - Set to false if you don’t want the data to be sorted with the largest average values at the back.
  • x_axis_label - Assign a string to this option to have it printed below the x axis of the graph.
  • y_axis_increment - Sets the distance between horizontal marker lines.

Themes

You may set the theme for the chart by providing theme attribute with the theme name. There are several predefined and ready to use theme available. Such as:

  • theme_keynote
  • theme_37signals
  • theme_rails_keynote
  • theme_odeo
  • theme_pastel
  • theme_greyscale
Or you may define your own theme by using set_theme attribute and providing it with the list of options, e.g.:
[   colors: ['#202020', 'white', '#a21764', '#8ab438',  '#999999', '#3a5b87', 'black'],
    marker_color: '#aea9a9',
    font_color: 'black',
    background_colors: ['#ff47a4', '#ff1f81']
]

Data

There are two ways of providing the chart with data. It's either providing it as is, setting data attribute with the list of map values like 'series name': [VALUES] or using data_from_table attribute with the id of special formatted table.

Table must be declared before the chart.
The example of such table:
<table id="data_table">
  <caption>Annual Fruit Sales</caption>
    <thead>
      <tr>
        <th scope="col"></th>
        <th scope="col">Apples</th>
        <th scope="col">Oranges</th>
        <th scope="col">Watermelon</th>
        <th scope="col">Peaches</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row"></th>
        <td>1</td> <td>4</td> <td>2</td> <td>9</td>
      </tr>
        <tr>
          <th scope="row">2003</th>
          <td>2</td> <td>8</td> <td>3</td> <td>9</td>
        </tr>
        <tr>
          <th scope="row"></th>
          <td>3</td> <td>7</td> <td>1</td> <td>10</td>
        </tr>
        <tr>
          <th scope="row">2004</th>
          <td>4</td> <td>9</td> <td>5</td> <td>8</td>
        </tr>
        <tr>
          <th scope="row"></th>
          <td>4</td> <td>8</td> <td>6</td> <td>7</td>
        </tr>
        <tr>
          <th scope="row">2005</th>
          <td>3</td> <td>9</td> <td>8</td> <td>9</td>
      </tr>
  </tbody>
</table>

Labels

You may define the lables of any particular iteration by providing the labels attribute with the map, containing values like 0: 'label'. Where the key value is the iteration number.

Line

<bluff:line id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates line chart.

Options

  • line_width - Sets the widths of the lines used to join data points.
  • hide_lines - Set to true to prevent drawing of lines; dots will still be rendered.
  • hide_dots - Set to true to prevent drawing dots at data points.
  • dot_radius - Sets the radius of dots used to plot data points.
  • baseline_value, baseline_color - Sets a value at which to draw a horizontal line on the graph as a ‘baseline’. The default color is red, use baseline_color to change this.

Sample

<bluff:line id="line" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Line" tooltips="true" options="[line_width: 2]"/>

Net

<bluff:net id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates net chart.

Options

  • line_width - Sets the widths of the lines used to join data points.
  • hide_dots - Set to true to prevent drawing dots at data points.
  • dot_radius - ets the radius of dots used to plot data points.

Sample

<bluff:net id="net" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Net" tooltips="true" options="[line_width: 2]" />

Dot

<bluff:dot id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates dot chart.

Sample

<bluff:dot id="dot" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Dot" tooltips="true" options="[line_width: 2]" />

Area

<bluff:area id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates area chart.

Sample

<bluff:area id="area" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: \\[4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Area" tooltips="true" />

StackedArea

<bluff:stackedArea id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates stacked area chart.

Sample

<bluff:stackedArea id="stackedArea" data="${[Apples [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Stacked Area" tooltips="true" />

Pie

<bluff:pie id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates pie chart.

Options

  • zero_degree - Sets the angle at which to begin drawing, in degrees.
  • hide_labels_less_than - Sets a minimum percentage (0 to 100) required for a text label to be printed for a slice. Slices smaller than this will not get text labels. Use 0 to show all labels. e.g. g.hide_labels_less_than = 10.

Sample

<bluff:pie id="pie" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Pie" tooltips="true" />

MiniPie

<bluff:miniPie id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates mini pie chart.

Options

  • legend_position - Sets where the legend is placed in relation to the graph. Possible values are 'right' and 'bottom', 'bottom' is the default.

Sample

<bluff:miniPie id="miniPie" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Mini Pie" tooltips="true" />

Bar

<bluff:bar id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates bar chart.

Options

  • bar_spacing - Sets how much of the available space a bar’s width takes up. Should be a value between 0 and 1, where 1 leaves no space between bars and 0 produces bar with zero width.

Sample

<bluff:bar id="bar" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Bar" tooltips="true" />

MiniBar

<bluff:miniBar id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates mini bar chart.

Options

  • legend_position - Sets where the legend is placed in relation to the graph. Possible values are 'right' and 'bottom', 'bottom' is the default.
  • bar_spacing - Sets how much of the available space a bar’s width takes up. Should be a value between 0 and 1, where 1 leaves no space between bars and 0 produces bar with zero width.

Sample

<bluff:miniBar id="miniBar" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Mini Bar" tooltips="true" />

StackedBar

<bluff:stackedBar id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates stacked bar chart.

Options

  • bar_spacing - Sets how much of the available space a bar’s width takes up. Should be a value between 0 and 1, where 1 leaves no space between bars and 0 produces bar with zero width.

Sample

<bluff:stackedBar id="stackedBar" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Stacked Bar" tooltips="true" />

SideBar

<bluff:sideBar id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates sidebar chart.

Options

  • bar_spacing - Sets how much of the available space a bar’s width takes up. Should be a value between 0 and 1, where 1 leaves no space between bars and 0 produces bar with zero width.

Sample

<bluff:sideBar id="sideBar" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Sidebar" tooltips="true" />

MiniSideBar

<bluff:miniSideBar id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates mini sidebar chart.

Options

  • legend_position - Sets where the legend is placed in relation to the graph. Possible values are 'right' and 'bottom', 'bottom' is the default.
  • bar_spacing - Sets how much of the available space a bar’s width takes up. Should be a value between 0 and 1, where 1 leaves no space between bars and 0 produces bar with zero width.

Sample

<bluff:miniSideBar id="miniSideBar" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Mini Sidebar" tooltips="true" />

SideStackedBar

<bluff:sideStackedBar id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates side stacked bar chart.

Options

  • bar_spacing - Sets how much of the available space a bar’s width takes up. Should be a value between 0 and 1, where 1 leaves no space between bars and 0 produces bar with zero width.

Sample

<bluff:sideStackedBar id="sideStackedBar" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Side Stacked Bar" tooltips="true" />

AccumulatorBar

<bluff:accumulatorBar id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates accumulator bar chart.

Only one seria of data must be provided.

Sample

<bluff:accumulatorBar id="accumulatorBar" data="${[Apples: [1, 2, 3, 4, 4, 3]]}" labels="0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Accumulator Bar" tooltips="true" />

Spider

<bluff:spider id="ID" data="DATA" [or data_from_table] labels="LABELS" [attrs] [options="OPTIONS"]/>

Generates spider chart.

Sample

<bluff:spider id="spider" data="${[Apples: [1, 2, 3, 4, 4, 3], Oranges: [4, 8, 7, 9, 8, 9], Melons: [2, 3, 1, 5, 6, 8], Peaches: [9, 9, 10, 8, 7, 9]]}" labels="[0: '2003', 2: '2004', 4: '2005']" theme="theme_pastel" title="Spider" tooltips="true" />

Change notes

  • 0.1.1 - Added attrs and options conjunction in defining chart options.