--- /dev/null
+#!/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";
--- /dev/null
+<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>