Git Product home page Git Product logo

html5jp_graphs's Introduction

Html5jpGraphs

Html5jpGraphs is a Rails Plugin for HTML5.jp Graph Libraries.

HTML5.jp Graph Libraries are written by futomi, released under Apache License, Version 2.0. www.html5.jp/library/index.html

There are 4 kinds of graphs in HTML5.jp.

  • vertical bar chart

  • radar chart

  • line chart

  • pie chart

With this plugin, you can easily draw graphs using helper methods. Helper methods accepts both simple array data and your original complex model objects.

Install

> git clone git://github.com/nay/html5jp_graphs.git vendor/plugins/html5jp_graphs

If you use Rails 2.1 or later, you can install with this command.

> ruby script/plugin install git://github.com/nay/html5jp_graphs.git

Setup

First of all, you need to include javascripts. You can include these files by using :all option.

<%= javascript_include_tag :all %>

Also you can include required files separately.

  • required for all graphs … excanvas.js, excanvas-compressed.js

  • vertical bar chart … vbar.js

  • radar chart … radar.js

  • pie chart … circle.js

  • line chart … line.js

Then, add :htmltjp_graphs as a helper in your controllers.

class GraphsController < ApplicationController
  helper :html5jp_graphs
end

Example

Draw a Vertical Bar Chart

<%= vertical_bar_chart [['accesses', 520, 340, 804, 602], ['clicks', 101, 76, 239, 321]] %>

 or you can use your own model obejct (with some methods. Please see RDoc for the requirements).

<%= vertical_bar_chart access_click_summaries %>

Draw a Radar Chart

<%= radar_chart [['review1', 5, 4, 3], ['review2', 3, 5, 2]], :aCap => ['price', 'style', 'sound'] %>

<%= radar_chart reviews %>

Draw a Line Chart

<%= line_chart [['accesses', 520, 340, 804, 602], ['clicks', 101, 76, 239, 321]] %>

<%= line_chart access_click_summaries %>

Draw a Pie Chart

<%= pie_chart([["very good", 400], ["good", 300], ["bad", 100], ["very bad", 300]]) %>

<%= pie_chart opinions %>

Options

You can use all options in HTML5.jp. Note that string options should be wrapped in ‘ ’, or it would be used as a script code.

For example, to specify the backgroundColor option to a radar chart, write like this.

<%= radar_chart reviews, :backgroundColor => "'red'" %>

Copyright © 2008 Yasuko Ohba ([email protected]), released under the apache license

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.