# Raphael Pie Chart Part 1

So awhile back I created a pie chart in raphael without the use of the SVG arc command. So, my old pie chart works, but it has lots of vector points – it’s all done with moveTo and lineTo. Rather than use the pie chart example from Raphael, I wanted to see if I could create my own from scratch. I got 80% there but then had to peak at how this (http://raphaeljs.com/growing-pie.html) example works. Here are a few arcs put together:

And here is the source code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="raphael-min.js"></script> <script> $(function(){ var p = new Raphael(0,0,"100%","100%"); p.path(arc(200,200,150,0,2) + arc(200,200,150,2,3) + arc(200,200,150,3,4.5) + arc(200,200,150,4.5,5) + arc(200,200,150,5,Math.PI*2)).attr("stroke", "white"); function arc(x, y, radius, start, end){ var f = ((end - start) > Math.PI) ? 1 : 0; var sx = radius * Math.cos(start); var sy = radius * Math.sin(start); var ex = x + radius * Math.cos(end); var ey = y + radius * Math.sin(end); var path = "M " + x + " " + y + " l " + sx + " " + sy + " A " + radius + " " + radius + " 0 " + f + " 1 " + ex + " " + ey + " z"; return path; } }); </script> <style> body,html{ background-color : #333; } </style> </head> <body> </body> </html> SVG arc commands are pretty confusing. I had a few problems making this. The first was that I used “L” instead of “l”. Turns out “l” is relative positioning. Another problem was the large-arc-flag and the sweep-flag. I’m still not sure I fully grasp these. Unlike the one in the example from raphaeljs.com I wanted my arc function to use radians. Over the years I’ve just gotten used to working in radians instead of degrees. I also prefer building a large string rather than using a series of arrays to define a path. Here is what the arc segment function looks like from raphaeljs.com: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 r.customAttributes.segment = function(x, y, r, a1, a2) { var flag = (a2 - a1) > 180, clr = (a2 - a1) / 360; a1 = (a1 % 360) * Math.PI / 180; a2 = (a2 % 360) * Math.PI / 180; return { path: [ ["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"] ], fill: "hsb(" + clr + ", .75, .8)" }; }; I formatted this a bit for readability. # -webkit-transform : Use 3D for 2D My students are often surprised when I show them web app demos for the iphone. They simply weren’t aware that you could use SVG or webkit-transform/transition to get some really smooth running interactive animation and graphics. I’ve been wanting to post an intermediate level example on this site for awhile but haven’t gotten around to it until now. This will only work in a webkit browser like chrome, safari/safari mobile etc… Den ganzen Beitrag lesen… # PHP File Loads Itself This is weird idea I had right before I went to sleep last night. I might actually use it for something… have a look: loadme.php: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php$file = file_get_contents("loadme.php");   $file = preg_split("/\?\>\n/",$file); $file = preg_replace("/^/m", "z",$file);   echo \$file;   die(); ?> one two three four   '; ?>

The above just adds a z in front of each new line. So it outputs:

zone ztwo zthree zfour

It could be used for preprocessing a document. Something like:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25   <?php require_once("processor.php"); ?>;   html head meta charset="utf-8" title (test site)   body #nav .btn(one) .btn(two) .btn(three)   #left (left side)   #center .entry h1(Hello This is an entry) (this is some text) .entry h1(Another Entry) (more text)   #right (right side)   #footer (Vorbin Saucer 2012)

The php would then turn the above markup into regular html. Kind of interesting…