prototypeベースでグラフを作成するjavascript「Plotr」

Solutoire.comPlotrは棒グラフ、円グラフ、線グラフを作成できるjavascriptです。
グラフを作成するjavascript「PlotKit」で紹介したPlotKitがMochiKitを使用するのに対して、Plotrではprototypeを使用しています。

sponsors

使用方法

Plotrからダウンロードしてきたファイルをアップロードし以下のようにheadに書き込みます。
<script src="http://yourdomain/prototype.js" type="text/javascript"></script>
<script src="http://yourdomain/excanvas.js" type="text/javascript"></script>
<script src="http://yourdomain/plotr.js" type="text/javascript"></script>
次にグラフを表示したい場所に以下を書きます。
<div><canvas id="グラフのid名" height="300" width="300"></canvas></div>
ここで指定した高さと幅が表示されるグラフの大きさになります。
以上はPlotKitと同様です。
次からはPlotrでのデータの設定を棒グラフ折れ線グラフ円グラフで紹介します。

sponsors

Javascriptサンプルページ一覧
skuare.net

棒グラフ

折れ線トップ
項目
棒グラフソース
<script type="text/javascript">
// データの定義
var dataset = {
'A君': [[0, 1], [1, 1], [2, 1.414], [3, 1.73]],
'B君': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73]],
'C君': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2]],
'D君': [[0, 0.86], [1, 0.83], [2, 3], [3, 1.73]]
};
// オプションの定義
var options = {
// カンバスの余白(padding)設定
padding: {left: 30, right: 0, top: 10, bottom: 30},
// 背景色の設定
backgroundColor: '#f2f2f2',
// グラフの色を設定(blue、red、greenなど)
colorScheme: 'blue',
// 棒グラフの形状(縦:vertical)
barOrientation: 'horizontal',
// 項目ラベルの指定
xTicks: [
{v:0, label:'初日'},
{v:1, label:'2日目'},
{v:2, label:'3日目'},
{v:3, label:'4日目'}
]
};
var horizontal = new Plotr.BarChart('グラフのid名',options);
horizontal.addDataset(dataset);
horizontal.render();
// 項目を作成
horizontal.addLegend($('項目のid名'));
</script>

HTML(項目の表示)
<fieldset id=\"項目のid名\">
<legend>Legend</legend>
</fieldset>

折れ線グラフ

トップ
項目
折れ線グラフソース
<script type="text/javascript">
dataset = {
'1月': [[0, 3], [1, 2], [2, 1.414], [3, 2.3]],
'2月': [[0, 1.4], [1, 2.67], [2, 1.34], [3, 1.2]],
'3月': [[0, 0.46], [1, 1.45], [2, 1.0], [3, 1.6]],
'4月': [[0, 0.3], [1, 0.83], [2, 0.7], [3, 0.2]]
};
options = {
padding: {left: 30, right: 0, top: 10, bottom: 30},
// 折れ線グラフの色指定
colorScheme: new Hash({
'1月': '#1c4a7e',
'2月': '#bb5b3d',
'3月': '#3a8133',
'4月': '#813379'
}),
backgroundColor: '#f2f2f2',
shouldFill: false,
// 項目の指定
xTicks: [
{v:0, label:'IE6'},
{v:1, label:'IE7'},
{v:2, label:'FF2'},
{v:3, label:'Opera 9'}
]
};
var line = new Plotr.LineChart('グラフのid名',options);
line.addDataset(dataset);
line.render();
line.addLegend($('lines_legend'));
</script>

円グラフ

折れ線トップ
項目
円グラフソース
<script type="text/javascript">
var dataset = {
'A君': [[0, 3], [1, 2], [2, 1.414], [3, 2.3]],
'B君': [[0, 1.4], [1, 2.67], [2, 1.34], [3, 1.2]],
'C君': [[0, 0.46], [1, 1.45], [2, 1.0], [3, 1.6]],
'D君': [[0, 0.3], [1, 0.83], [2, 0.7], [3, 0.2]]
};
var options = {
padding: {left: 30, right: 0, top: 10, bottom: 30},
backgroundColor: '#FFFFFF',
colorScheme: 'red',
xTicks: [
{v:0, label:'初日'},
{v:1, label:'2日目'},
{v:2, label:'3日目'},
{v:3, label:'4日目'}
]
};
var pie = new Plotr.PieChart('pie1',options);
pie.addDataset(dataset);
pie.render();
pie.addLegend($('pie_legend'));
</script>