PlotKit を使った Perl CGI の雛形
2008-03-18-4
[Programming]
PlotKit[2007-12-26-2]を使ってJavaScriptでグラフ表示するCGIの雛形。
あとで使うためにコードごと公開しておきます。
好きに使ってください。添削歓迎。
雛形なので、フォームに何を入力しても変化はありません。あしからず。
実行結果はこちらから → http://chalow.net/misc/plotkit.cgi
ソースコード：
ref.
- [を] HTML::Template から Template Toolkit に乗り換える準備
[2008-02-21-2]
- [を] PlotKit でグラフを作成[2007-12-26-2]
- グラフを作成するjavascript「PlotKit」
http://www.skuare.net/test/chart.html
JSコード部分はここのをベースに。
追記080319: 修正第一回。loop.count の使用、layout.style の指定など。
あとで使うためにコードごと公開しておきます。
好きに使ってください。添削歓迎。
雛形なので、フォームに何を入力しても変化はありません。あしからず。
実行結果はこちらから → http://chalow.net/misc/plotkit.cgi
ソースコード：
#!/usr/bin/perl -T
use strict;
use warnings;
use Template;
use CGI;
use utf8;
use Encode;
use open ':utf8';
binmode STDIN, ":utf8";
binmode STDOUT, ":utf8";
my $q = new CGI;
print $q->header(-charset => "UTF-8");
my $key = decode('utf-8', $q->param('key') || "");
my $style = $q->param('style') || "pie";
my $r_ref;
### vvvvv
$r_ref = [
{label => "ハロー", val => 10},
{label => "foo", val => 20},
{label => "bar", val => 15},
];
### ^^^^^
my $tt = Template->new() || die $Template::ERROR, "\n";
my $vars = {
r_ref => $r_ref,
key => $key,
style => $style,
};
$tt->process(\*DATA, $vars) || die $tt->error(), "\n";
__END__
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>plotkit-cgi</title>
<script type="text/javascript" src="/js/mochikit/MochiKit.js"></script>
<script type="text/javascript" src="/js/plotkit/Base.js"></script>
<script type="text/javascript" src="/js/plotkit/Layout.js"></script>
<script type="text/javascript" src="/js/plotkit/Canvas.js"></script>
<script type="text/javascript" src="/js/plotkit/SweetCanvas.js"></script>
<script type="text/javascript" src="/js/plotkit/excanvas.js"></script>
</head>
<body>
<h1>plotkit-cgi</h1>
<form method="get">
<input type="text" name="key" value="[% key %]" size="80" />
<br />
[% FOR item = [ 'pie', 'bar', 'line' ] %]
<input type="radio" name="style" value="[% item %]"
[% IF style == item %]checked[% END %]>[% item %]
[% END %]
<input type="submit" value="go" />
</form>
<script type="text/javascript">
var options = {
"IECanvasHTC": "/js/plotkit/iecanvas.htc",
"colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
"padding": {left: 0, right: 0, top: 10, bottom: 30},
"xTicks": [[% FOR r_ref %]{v:[% loop.count - 1 %], label:"[% label %]"},
[% END %]],
"axisLabelFontSize": 14,
"drawYAxis": false
};
function drawGraph() {
var layout = new PlotKit.Layout("[% style %]", options);
layout.addDataset("sqrt", [[% FOR r_ref %][[% loop.count - 1 %],[% val %]],
[% END %]]);
layout.evaluate();
var canvas = MochiKit.DOM.getElement("graph");
var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
plotter.render();
}
MochiKit.DOM.addLoadEvent(drawGraph);
</script>
<div><canvas id="graph" height="300" width="300"></canvas></div>
</body>
</html>
ref.
- [を] HTML::Template から Template Toolkit に乗り換える準備
[2008-02-21-2]
- [を] PlotKit でグラフを作成[2007-12-26-2]
- グラフを作成するjavascript「PlotKit」
http://www.skuare.net/test/chart.html
JSコード部分はここのをベースに。
追記080319: 修正第一回。loop.count の使用、layout.style の指定など。
この記事に言及しているこのブログ内の記事