html5jp_graphs 0.0.1

data/.gitigore

@@ -0,0 +1,2 @@
+*~
+.DS_Store

data/README.rdoc

@@ -0,0 +1,82 @@
+= 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.
+http://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 (c) 2008 Yasuko Ohba (y.ohba@everyleaf.com), released under the apache license
+

data/Rakefile

@@ -0,0 +1,22 @@
+require 'rake'
+require 'rake/testtask'
+require 'rake/rdoctask'
+
+desc 'Default: run unit tests.'
+task :default => :test
+
+desc 'Test the html5jp_graphs plugin.'
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = true
+end
+
+desc 'Generate documentation for the html5jp_graphs plugin.'
+Rake::RDocTask.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Html5jpGraphs'
+  rdoc.options << '--line-numbers' << '--inline-source'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end

data/html5jp_graphs.gemspec

@@ -0,0 +1,17 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/html5jp_graphs/version', __FILE__)
+
+Gem::Specification.new do |gem|
+  gem.authors       = ["nay3", "Koirhico Ohba"]
+  gem.email         = ["y.ohba@everyleaf.com"]
+  gem.description   = %q{html5jp_graphs is a Rails Plugin for HTML5.jp graph libraries. It supports vertical bar chart, radar chart, pie chart, and line chart.}
+  gem.summary       = %q{Rails Plugin for HTML5.jp Graph Libraries.}
+  gem.homepage      = "http://github.com/nay/html5jp_graphs"
+
+  gem.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  gem.files         = `git ls-files`.split("\n")
+  gem.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  gem.name          = "html5jp_graphs"
+  gem.require_paths = ["lib"]
+  gem.version       = Html5jpGraphs::VERSION
+end

data/lib/examples/sample_graph_circle_1.html

@@ -0,0 +1,54 @@
+<!--
+	Copyright 2007 futomi  http://www.html5.jp/
+
+	Licensed under the Apache License, Version 2.0 (the "License");
+	you may not use this file except in compliance with the License.
+	You may obtain a copy of the License at
+
+	  http://www.apache.org/licenses/LICENSE-2.0
+
+	Unless required by applicable law or agreed to in writing, software
+	distributed under the License is distributed on an "AS IS" BASIS,
+	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+	See the License for the specific language governing permissions and
+	limitations under the License.
+-->
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Language" content="ja" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+<title>円グラフ サンプル - jsライブラリ - HTML5.JP</title>
+<style type="text/css">
+canvas {border:1px solid #4c4c4c;}
+</style>
+<!--[if IE]><script type="text/javascript" src="../html5jp/excanvas/excanvas.js"></script><![endif]-->
+<script type="text/javascript" src="../html5jp/graph/circle.js"></script>
+<script type="text/javascript">
+window.onload = function() {
+	var cg = new html5jp.graph.circle("sample");
+	if( ! cg ) { return; }
+	var items = [
+		["sample01", 150],
+		["sample02", 100],
+		["sample03", 80],
+		["sample04", 60],
+		["sample05", 30],
+		["sample06", 20],
+		["sample07", 10],
+		["sample08", 10],
+		["sample09", 10],
+		["sample10", 10],
+		["sample11", 10],
+		["sample12", 10]
+	];
+	cg.draw(items);
+};
+</script>
+</head>
+<body>
+<h1>円グラフ サンプル - jsライブラリ - HTML5.JP</h1>
+<div><canvas width="400" height="300" id="sample"></canvas></div>
+</body>
+</html>

data/lib/examples/sample_graph_circle_2.html

@@ -0,0 +1,61 @@
+<!--
+	Copyright 2007 futomi  http://www.html5.jp/
+
+	Licensed under the Apache License, Version 2.0 (the "License");
+	you may not use this file except in compliance with the License.
+	You may obtain a copy of the License at
+
+	  http://www.apache.org/licenses/LICENSE-2.0
+
+	Unless required by applicable law or agreed to in writing, software
+	distributed under the License is distributed on an "AS IS" BASIS,
+	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+	See the License for the specific language governing permissions and
+	limitations under the License.
+-->
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Language" content="ja" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+<title>円グラフ サンプル - jsライブラリ - HTML5.JP</title>
+<style type="text/css">
+canvas {border:1px solid #4c4c4c;}
+</style>
+<!--[if IE]><script type="text/javascript" src="../html5jp/excanvas/excanvas.js"></script><![endif]-->
+<script type="text/javascript" src="../html5jp/graph/circle.js"></script>
+<script type="text/javascript">
+window.onload = function() {
+	var cg = new html5jp.graph.circle("sample");
+	if( ! cg ) { return; }
+	var items = [
+		["sample01", 150, "#ff8899"],
+		["sample02", 100],
+		["sample03", 80],
+		["sample04", 60],
+		["sample05", 30],
+		["sample06", 20],
+		["sample07", 10],
+		["sample08", 10],
+		["sample09", 10],
+		["sample10", 10],
+		["sample11", 10],
+		["sample12", 10]
+	];
+	var params = {
+		backgroundColor: "#eeffee",
+		shadow: false,
+		captionNum: false,
+		startAngle: -45,
+		otherCaption: "その他"
+	};
+	cg.draw(items, params);
+};
+</script>
+</head>
+<body>
+<h1>円グラフ - jsライブラリ - HTML5.JP</h1>
+<div><canvas width="400" height="300" id="sample"></canvas></div>
+</body>
+</html>

data/lib/examples/sample_graph_line_1.html

@@ -0,0 +1,44 @@
+<!--
+	Copyright 2007 futomi  http://www.html5.jp/
+
+	Licensed under the Apache License, Version 2.0 (the "License");
+	you may not use this file except in compliance with the License.
+	You may obtain a copy of the License at
+
+	  http://www.apache.org/licenses/LICENSE-2.0
+
+	Unless required by applicable law or agreed to in writing, software
+	distributed under the License is distributed on an "AS IS" BASIS,
+	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+	See the License for the specific language governing permissions and
+	limitations under the License.
+-->
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Language" content="ja" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+<title>折線グラフ サンプル 1 - jsライブラリ - HTML5.JP</title>
+<style type="text/css">
+canvas {border:1px solid #4c4c4c;}
+</style>
+<!--[if IE]><script type="text/javascript" src="../html5jp/excanvas/excanvas.js"></script><![endif]-->
+<script type="text/javascript" src="../html5jp/graph/line.js"></script>
+<script type="text/javascript">
+window.onload = function() {
+	var lg = new html5jp.graph.line("sample");
+	if( ! lg ) { return; }
+	var items = [
+		["商品A", 20, 58, 40, 14, 38, 20, 40],
+		["商品B", 10, 14, 58, 80, 70, 90, 20]
+	];
+	lg.draw(items);
+};
+</script>
+</head>
+<body>
+<h1>折線グラフ サンプル 1 - jsライブラリ - HTML5.JP</h1>
+<div><canvas width="400" height="300" id="sample"></canvas></div>
+</body>
+</html>

data/lib/examples/sample_graph_line_2.html

@@ -0,0 +1,53 @@
+<!--
+	Copyright 2007 futomi  http://www.html5.jp/
+
+	Licensed under the Apache License, Version 2.0 (the "License");
+	you may not use this file except in compliance with the License.
+	You may obtain a copy of the License at
+
+	  http://www.apache.org/licenses/LICENSE-2.0
+
+	Unless required by applicable law or agreed to in writing, software
+	distributed under the License is distributed on an "AS IS" BASIS,
+	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+	See the License for the specific language governing permissions and
+	limitations under the License.
+-->
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Language" content="ja" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+<title>折線グラフ サンプル 2 - jsライブラリ - HTML5.JP</title>
+<style type="text/css">
+canvas {border:1px solid #4c4c4c;}
+</style>
+<!--[if IE]><script type="text/javascript" src="../html5jp/excanvas/excanvas.js"></script><![endif]-->
+<script type="text/javascript" src="../html5jp/graph/line.js"></script>
+<script type="text/javascript">
+window.onload = function() {
+	var lg = new html5jp.graph.line("sample");
+	if( ! lg ) { return; }
+	var items = [
+		["商品A", 20, 58, 40, 14, 38, 20, 40],
+		["商品B", 10, 14, 58, 80, 70, 90, 20]
+	];
+	var params = {
+		x: ["曜日", "日", "月", "火", "水", "木", "金", "土"],
+		y: ["注文数(個)", 0, 20, 40, 60, 80, 100],
+		yMax: 100,
+		yMin: 0,
+		lineWidth: [1,2],
+		dotRadius: [3,4],
+		dotType: ["disc", "square"]
+	};
+	lg.draw(items, params);
+};
+</script>
+</head>
+<body>
+<h1>折線グラフ サンプル 2 - jsライブラリ - HTML5.JP</h1>
+<div><canvas width="400" height="300" id="sample"></canvas></div>
+</body>
+</html>

data/lib/examples/sample_graph_radar_1.html

@@ -0,0 +1,47 @@
+<!--
+	Copyright 2007 futomi  http://www.html5.jp/
+
+	Licensed under the Apache License, Version 2.0 (the "License");
+	you may not use this file except in compliance with the License.
+	You may obtain a copy of the License at
+
+	  http://www.apache.org/licenses/LICENSE-2.0
+
+	Unless required by applicable law or agreed to in writing, software
+	distributed under the License is distributed on an "AS IS" BASIS,
+	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+	See the License for the specific language governing permissions and
+	limitations under the License.
+-->
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Language" content="ja" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+<title>レーダーチャート サンプル 1 - jsライブラリ - HTML5.JP</title>
+<style type="text/css">
+canvas {border:1px solid #4c4c4c;}
+</style>
+<!--[if IE]><script type="text/javascript" src="../html5jp/excanvas/excanvas.js"></script><![endif]-->
+<script type="text/javascript" src="../html5jp/graph/radar.js"></script>
+<script type="text/javascript">
+window.onload = function() {
+	var rc = new html5jp.graph.radar("sample");
+	if( ! rc ) { return; }
+	var items = [
+		["商品A", 5, 2, 4, 5, 3, 2, 4, 4],
+		["商品B", 3, 4, 3, 4, 5, 4, 5, 1]
+	];
+	var params = {
+		aCap: ["安さ", "性能", "デザイン", "人気", "使いやすさ", "寿命", "軽さ", "強さ"]
+	}
+	rc.draw(items, params);
+};
+</script>
+</head>
+<body>
+<h1>レーダーチャート サンプル 1 - jsライブラリ - HTML5.JP</h1>
+<div><canvas width="400" height="300" id="sample"></canvas></div>
+</body>
+</html>

data/lib/examples/sample_graph_radar_2.html

@@ -0,0 +1,52 @@
+<!--
+	Copyright 2007 futomi  http://www.html5.jp/
+
+	Licensed under the Apache License, Version 2.0 (the "License");
+	you may not use this file except in compliance with the License.
+	You may obtain a copy of the License at
+
+	  http://www.apache.org/licenses/LICENSE-2.0
+
+	Unless required by applicable law or agreed to in writing, software
+	distributed under the License is distributed on an "AS IS" BASIS,
+	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+	See the License for the specific language governing permissions and
+	limitations under the License.
+-->
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Language" content="ja" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+<title>レーダーチャート サンプル 2 - jsライブラリ - HTML5.JP</title>
+<style type="text/css">
+canvas {border:1px solid #4c4c4c;}
+</style>
+<!--[if IE]><script type="text/javascript" src="../html5jp/excanvas/excanvas.js"></script><![endif]-->
+<script type="text/javascript" src="../html5jp/graph/radar.js"></script>
+<script type="text/javascript">
+window.onload = function() {
+	var rc = new html5jp.graph.radar("sample");
+	if( ! rc ) { return; }
+	var items = [
+		["商品A", 5, 2, 4, 5, 3, 2, 4, 4],
+		["商品B", 3, 4, 3, 4, 5, 4, 5, 1]
+	];
+	var params = {
+		aCap: ["安さ", "性能", "デザイン", "人気", "使いやすさ", "寿命", "軽さ", "強さ"],
+		aMax: 6,
+		aMin: 0,
+		chartShape: "circle",
+		faceColors: ["green", "olive"],
+		aLinePositions: [0,1,2,3,4,5,6]
+	};
+	rc.draw(items, params);
+};
+</script>
+</head>
+<body>
+<h1>レーダーチャート サンプル 2 - jsライブラリ - HTML5.JP</h1>
+<div><canvas width="400" height="300" id="sample"></canvas></div>
+</body>
+</html>