small Protovis example
authorDobrica Pavlinusic <dpavlin@rot13.org>
Sat, 13 Jun 2009 16:12:23 +0000 (16:12 +0000)
committerDobrica Pavlinusic <dpavlin@rot13.org>
Sat, 13 Jun 2009 16:12:23 +0000 (16:12 +0000)
git-svn-id: svn+ssh://mjesec/home/dpavlin/svn/webpac2/trunk@1229 07558da8-63fa-0310-ba24-9fe276d99e06

vhost/dipl/data.cgi [new file with mode: 0755]
vhost/dipl/pie.html [new file with mode: 0644]

diff --git a/vhost/dipl/data.cgi b/vhost/dipl/data.cgi
new file mode 100755 (executable)
index 0000000..c7e3c70
--- /dev/null
@@ -0,0 +1,19 @@
+#!/usr/bin/perl
+
+use warnings;
+use strict;
+
+use JSON;
+use DBI;
+
+print "Content-type: text/javascript\n\r\n\r";
+
+my $dbh = DBI->connect('dbi:Pg:dbname=dipl','dpavlin','', { RaiseError => 1, AutoCommit => 0 });
+
+my $data = $dbh->selectall_arrayref(q{
+       select sum(ttc),ca from citirani group by ca order by sum desc ;
+});
+print "var data = ",to_json(
+#       [ map { $_->[0] } @$data ] 
+       $data
+),";\n\r";
diff --git a/vhost/dipl/pie.html b/vhost/dipl/pie.html
new file mode 100644 (file)
index 0000000..ca3d32c
--- /dev/null
@@ -0,0 +1,59 @@
+<html>
+  <head>
+    <title>citirani pie</title>
+    <script type="text/javascript" src="vis.stanford.edu/protovis/protovis.js"></script>
+    <script type="text/javascript" src="data.cgi"></script>
+    <style type="text/css">
+      body { max-width: 7in; }
+    </style>
+  </head>
+  <body>
+
+<a href="http://vis.stanford.edu/protovis/api/">Protovis</a>
+
+<script type="text/javascript+protovis">
+
+//var data = [ 282, 189, 174, 163, 152, 140, 138, 130, 117, 116, 116, 94, 76, 44, 38 ];
+
+var width  = 600;
+var height = 400;
+
+var vis = new pv.Panel()
+       .width(width)
+       .height(height)
+       ;
+
+function radius(d) {
+       return Math.sqrt(d[0]) * 10;
+}
+
+var pie = vis.add(pv.Wedge)
+       .data(data)
+       .left( width / 2 )
+       .bottom( height / 2 )
+       .outerRadius(function(d) radius(d))
+       .angle(function() 2 * Math.PI / data.length)
+       ;
+
+// ca
+vis.add(pv.Label)
+       .data(data)
+       .left(  function(d)  radius(d) * Math.cos(pie.midAngle()) + width  / 2)
+       .bottom(function(d) -radius(d) * Math.sin(pie.midAngle()) + height / 2)
+       .textAlign("center").textBaseline("middle")
+       .text(function(d) d[1] )
+       ;
+
+// ttc
+vis.add(pv.Label)
+       .data(data)
+       .left(  function()  50 * Math.cos(pie.midAngle()) + width  / 2)
+       .bottom(function() -50 * Math.sin(pie.midAngle()) + height / 2)
+       .textAlign("center").textBaseline("middle")
+       .text(function(d) d[0] )
+       ;
+vis.root.render();
+</script>
+
+  </body>
+</html>