Prototype.js library for creating accessible charts & graphs from table elements using HTML 5 Canvas
JavaScript
Switch branches/tags
Nothing to show
Pull request Compare This branch is 26 commits ahead of sbeam:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
.gitignore
LICENSE
Proto.Visualize.Tooltips.js
Proto.Visualize.js
README.markdown
demopage.css
excanvas.compiled.js
index.html
interactive.html

README.markdown

#Proto.Visualize ##A data visualization library for Prototype.js

Proto.Visualize allows for quick and easy creation of Pie, Line and Bar charts using tabular data on the page.

This library is a conversion of the Visualize plugin for jQuery, originally created by The Filament Group, and later improved by Iraê Carvalho and Sam Beam.

##Usage

A chart can be created by making the following call:

var myChat = new Proto.Visualize(tableElement, type[, container]\[, options]);
  • tableElement (string|DOMElement) - This is a reference to the containing your data. This can be either the id of the table, or a direct DOMElement reference.
  • type (string) - Type of graph to be created. Available Options: bar, line, area, pie. If omitted, bar is assumed.
  • container (string|DOMElement) - Optional container element for the graph to be created in. If this is omitted, a new container is created immediately after the table element. This can be either the id of the table, or a direct DOMElement reference.
  • options (object) - Optional object containing the options for the display of the graph.
  • ###Options

    Name Type Description Default
    width number Width of chart. Width of table
    height number Height of chart. Height of table
    chartId stromg ID applied to the chart container object. Only used if no container was supplied. null
    chartClass string CSS class applied to the chart container object. Only used if no container was supplied. null
    appendTitle boolean Add title to chart. true
    title string Title for the chart. Text of table's Caption element, if present
    appendKey boolean Add the color key to the chart. true
    colors array Array of hex values, used in order of appearance. See source.
    textColors array Array of hex values. Each item corresponds with colors array. null/undefined items will fall back to CSS text color. Empty array
    parseDirection string Direction to parse the table data. Accepts 'x' and 'y'. 'x'
    pieMargin number Space around outer circle of Pie chart, in pixels. 20
    pieLabelPos string Position of text labels in Pie chart. Accepts 'inside' and 'outside'. 'inside'
    pieLabelsAsPercent boolean Caption with the percentage of the whole instead of the actual value. true
    lineWeight number Stroke weight for lines in line and area charts. 4
    lineDots string or false Display a dot on each line point. Accepts false, 'single' and 'double' false
    barGroupMargin number Space around each group of bars in a bar chart. 10
    barMargin number Creates space around bars in bar chart (added to both sides of each bar). 1
    interaction boolean Enables mouse interaction events with the chart contents, triggering visualize:over and visualize:out events on the canvas. false

    Other more fine tuned options are available by viewing the source.

    ###Note for Internet Explorer support

    This plugin uses the HTML 5 canvas element, which is not supported in an version of Internet Explorer at this time. Fortunately, Google maintains a library that translates canvas scripting into VML, allowing it to work in all versions of internet explorer. The script is included in the zip. To use it, just be sure to include the script in your page using a conditional comment, like this:

    <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->

    ##Distributed under the MIT License

    Copyright (c) 2011, Jarvis Badgley - chiper[at]chipersoft[dot]com
    
    Permission is hereby granted, free of charge, to any person obtaining
    a copy of this software and associated documentation files (the
    "Software"), to deal in the Software without restriction, including
    without limitation the rights to use, copy, modify, merge, publish,
    distribute, sublicense, and/or sell copies of the Software, and to
    permit persons to whom the Software is furnished to do so, subject to
    the following conditions:
    
    The above copyright notice and this permission notice shall be
    included in all copies or substantial portions of the Software.
    
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
    LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
    OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
    WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.