scruffy 0.2.2 → 0.2.3

data/website/images/graphs/stacking_test.svg

@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"  type=""?>
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="360" xmlns="http://www.w3.org/2000/svg">
+  <g id="scruffy_graph">
+    <g transform="translate(0.0, 0.0)" id="background">
+      <defs>
+        <linearGradient x2="0%" y2="100%" x1="0%" id="BackgroundGradient" y1="0%">
+          <stop stop-color="black" offset="5%"/>
+          <stop stop-color="#4A465A" offset="95%"/>
+        </linearGradient>
+      </defs>
+      <rect width="600.0" x="0" y="0" height="360.0" fill="url(#BackgroundGradient)"/>
+    </g>
+    <g transform="translate(30.0, 7.2)" id="title">
+      <text class="title" font-size="25.2" x="270.0" text-anchor="middle" y="25.2" stroke="none" stroke-width="0" fill="white">Comparative Agent Performance</text>
+    </g>
+    <g transform="translate(12.0, 93.6)" id="view">
+      <g>
+        <g transform="translate(0.0, 4.752)" id="values">
+          <text font-size="16.91712" x="96.12" text-anchor="end" y="211.464" fill="white">-77%</text>
+          <text font-size="16.91712" x="96.12" text-anchor="end" y="158.598" fill="white">2%</text>
+          <text font-size="16.91712" x="96.12" text-anchor="end" y="105.732" fill="white">81%</text>
+          <text font-size="16.91712" x="96.12" text-anchor="end" y="52.866" fill="white">161%</text>
+          <text font-size="16.91712" x="96.12" text-anchor="end" y="0.0" fill="white">240%</text>
+        </g>
+        <g transform="translate(106.8, 0.0)" id="grid">
+          <line x2="427.2" y2="0.0" x1="0" style="stroke: white; stroke-width: 2;" y1="0.0"/>
+          <line x2="427.2" y2="52.866" x1="0" style="stroke: white; stroke-width: 2;" y1="52.866"/>
+          <line x2="427.2" y2="105.732" x1="0" style="stroke: white; stroke-width: 2;" y1="105.732"/>
+          <line x2="427.2" y2="158.598" x1="0" style="stroke: white; stroke-width: 2;" y1="158.598"/>
+          <line x2="427.2" y2="211.464" x1="0" style="stroke: white; stroke-width: 2;" y1="211.464"/>
+        </g>
+        <g transform="translate(106.8, 218.592)" id="labels">
+          <text font-size="17.1072" x="0.0" text-anchor="middle" y="19.008" fill="white">Jan</text>
+          <text font-size="17.1072" x="85.44" text-anchor="middle" y="19.008" fill="white">Feb</text>
+          <text font-size="17.1072" x="170.88" text-anchor="middle" y="19.008" fill="white">Mar</text>
+          <text font-size="17.1072" x="256.32" text-anchor="middle" y="19.008" fill="white">Apr</text>
+          <text font-size="17.1072" x="341.76" text-anchor="middle" y="19.008" fill="white">May</text>
+          <text font-size="17.1072" x="427.2" text-anchor="middle" y="19.008" fill="white">Jun</text>
+        </g>
+        <g transform="translate(106.8, 0.0)" id="graphs">
+          <g class="graph_layer" id="component_graphs_graph_0">
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="3.56" y="53.2990548204159" height="160.279585179584" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="4.61732" y="57.5283348204159" height="157.107625179584" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="3.56" y="53.2990548204159" height="158.164945179584" fill="#FDD84E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="74.76" y="-46.6366729678639" height="260.215312967864" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="75.81732" y="-42.4073929678639" height="257.043352967864" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="74.76" y="-46.6366729678639" height="258.100672967864" fill="#FDD84E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="145.96" y="67.290056710775" height="146.288583289225" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="147.01732" y="71.519336710775" height="143.116623289225" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="145.96" y="67.290056710775" height="144.173943289225" fill="#FDD84E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="217.16" y="60.6276748582231" height="152.950965141777" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="218.21732" y="64.8569548582231" height="149.779005141777" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="217.16" y="60.6276748582231" height="150.836325141777" fill="#FDD84E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="288.36" y="-26.649527410208" height="240.228167410208" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="289.41732" y="-22.4202474102079" height="237.056207410208" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="288.36" y="-26.649527410208" height="238.113527410208" fill="#FDD84E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="359.56" y="59.9614366729679" height="153.617203327032" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="360.61732" y="64.1907166729679" height="150.445243327032" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="359.56" y="59.9614366729679" height="151.502563327032" fill="#FDD84E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="3.56" y="73.2862003780718" height="140.292439621928" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="4.61732" y="77.5154803780718" height="137.120479621928" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="3.56" y="73.2862003780718" height="138.177799621928" fill="#72AE6E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="74.76" y="-6.66238185255199" height="220.241021852552" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="75.81732" y="-2.43310185255199" height="217.069061852552" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="74.76" y="-6.66238185255199" height="218.126381852552" fill="#72AE6E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="145.96" y="99.9357277882798" height="113.64291221172" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="147.01732" y="104.16500778828" height="110.47095221172" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="145.96" y="99.9357277882798" height="111.52827221172" fill="#72AE6E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="217.16" y="79.9485822306238" height="133.630057769376" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="218.21732" y="84.1778622306238" height="130.458097769376" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="217.16" y="79.9485822306238" height="131.515417769376" fill="#72AE6E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="288.36" y="39.9742911153119" height="173.604348884688" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="289.41732" y="44.2035711153119" height="170.432388884688" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="288.36" y="39.9742911153119" height="171.489708884688" fill="#72AE6E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="359.56" y="139.910018903592" height="73.6686210964083" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="360.61732" y="144.139298903592" height="70.4966610964083" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="359.56" y="139.910018903592" height="71.5539810964083" fill="#72AE6E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="3.56" y="153.234782608696" height="60.3438573913044" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="4.61732" y="157.464062608696" height="57.1718973913044" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="3.56" y="153.234782608696" height="58.2292173913044" fill="#D1695E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="74.76" y="153.234782608696" height="60.3438573913044" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="75.81732" y="157.464062608696" height="57.1718973913044" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="74.76" y="153.234782608696" height="58.2292173913044" fill="#D1695E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="145.96" y="99.9357277882798" height="113.64291221172" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="147.01732" y="104.16500778828" height="110.47095221172" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="145.96" y="99.9357277882798" height="111.52827221172" fill="#D1695E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="217.16" y="146.572400756144" height="67.0062392438563" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="218.21732" y="150.801680756144" height="63.8342792438564" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="217.16" y="146.572400756144" height="64.8915992438563" fill="#D1695E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="288.36" y="133.24763705104" height="80.3310029489603" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="289.41732" y="137.47691705104" height="77.1590429489603" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="288.36" y="133.24763705104" height="78.2163629489603" fill="#D1695E" style="opacity: 1.0; stroke: none;"/>
+            <g transform="translate(-1.05732, -1.05732)">
+              <rect width="66.19464" x="359.56" y="153.234782608696" height="60.3438573913044" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+              <rect width="66.19464" x="360.61732" y="157.464062608696" height="57.1718973913044" style="fill: black; fill-opacity: 0.15; stroke: none;"/>
+            </g>
+            <rect width="64.08" x="359.56" y="153.234782608696" height="58.2292173913044" fill="#D1695E" style="opacity: 1.0; stroke: none;"/>
+          </g>
+        </g>
+      </g>
+    </g>
+    <g transform="translate(30.0, 46.8)" id="legend">
+      <rect width="10.8" x="167.4" y="0" height="10.8" fill="#FDD84E"/>
+      <text font-size="1.3824" x="169.128" y="1.0368" fill="white" style="color: white">Jack</text>
+      <rect width="10.8" x="243.0" y="0" height="10.8" fill="#72AE6E"/>
+      <text font-size="1.3824" x="244.728" y="1.0368" fill="white" style="color: white">Jill</text>
+      <rect width="10.8" x="318.6" y="0" height="10.8" fill="#D1695E"/>
+      <text font-size="1.3824" x="320.328" y="1.0368" fill="white" style="color: white">Hill</text>
+    </g>
+  </g>
+</svg>

data/website/index.html

@@ -0,0 +1,294 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>
+      
+  </title>
+  <script src="javascripts/rounded_corners_lite.inc.js" type="text/javascript"></script>
+<style>
+
+</style>
+  <script type="text/javascript">
+    window.onload = function() {
+      settings = {
+          tl: { radius: 10 },
+          tr: { radius: 10 },
+          bl: { radius: 10 },
+          br: { radius: 10 },
+          antiAlias: true,
+          autoPad: true,
+          validTags: ["div"]
+      }
+      var versionBox = new curvyCorners(settings, document.getElementById("version"));
+      versionBox.applyCornersToAll();
+    }
+  </script>
+</head>
+<body>
+<div id="main">
+
+    <h1></h1>
+    <div id="version" class="clickable" onclick='document.location = "http://rubyforge.org/projects/scruffy"; return false'>
+      <p>Get Version</p>
+      <a href="http://rubyforge.org/projects/scruffy" class="numbers">0.2.3</a>
+    </div>
+    <p><a href="index.html">Home</a>
+<a href="doc">Documentation</a>
+<a href="http://rubyforge.org/projects/scruffy/">RubyForge Project</a></p>
+
+
+	<h1>Don&#8217;t Worry.</h1>
+
+
+	<h1>Be Scruffy.</h1>
+
+
+	<blockquote>
+		<p>Beautiful Graphs for Ruby.</p>
+	</blockquote>
+
+
+	<h2>What is Scruffy?</h2>
+
+
+	<p>Scruffy is a Ruby library for generating attractive and powerful graphs, useful for web applications, print media and many others.</p>
+
+
+	<p>Scruffy&#8217;s key features include:</p>
+
+
+	<ul>
+	<li><strong>Built on <span class="caps">SVG</span></strong><br/>
+Scruffy uses <span class="caps">SVG</span> internally for rendering graphs. This allows Scruffy to render your graph identically at almost any size.</li>
+	</ul>
+
+
+	<ul>
+	<li><strong>Mix-n-Match Graphs</strong><br/>
+A Scruffy graph isn&#8217;t limited to a single graph type (line, bar, area, etc). You can specify a different type for every data set.</li>
+	</ul>
+
+
+	<ul>
+	<li><strong>Snapshot Rendering</strong><br/>
+You can render a Scruffy graph as many times as you want, and change any settings between renders. Data, colors, even the graph size and image type can all be changed for the next render.</li>
+	</ul>
+
+
+	<ul>
+	<li><strong>Easily Extendable</strong><br/>
+Scruffy is designed to be extremely extendible. Adding new graph types or themes can be done in as little as a few lines of code. If you need more control over your graphs, you can customize the layouts, data generation, almost anything.</li>
+	</ul>
+
+
+	<h2>Installing</h2>
+
+
+	<p><pre class='syntax'><span class="ident">sudo</span> <span class="ident">gem</span> <span class="ident">install</span> <span class="ident">scruffy</span></pre></p>
+
+
+	<h2>Demonstration of usage</h2>
+
+
+	<h3>Pie Chart
+<pre class='syntax'>
+    <span class="ident">graph</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Graph</span><span class="punct">.</span><span class="ident">new</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">title</span> <span class="punct">=</span> <span class="punct">&quot;</span><span class="string">Favourite Snacks</span><span class="punct">&quot;</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">renderer</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Renderers</span><span class="punct">::</span><span class="constant">Pie</span><span class="punct">.</span><span class="ident">new</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:pie</span><span class="punct">,</span> <span class="punct">'</span><span class="string"></span><span class="punct">',</span> <span class="punct">{</span>
+      <span class="punct">'</span><span class="string">Apple</span><span class="punct">'</span> <span class="punct">=&gt;</span> <span class="number">20</span><span class="punct">,</span>
+      <span class="punct">'</span><span class="string">Banana</span><span class="punct">'</span> <span class="punct">=&gt;</span> <span class="number">100</span><span class="punct">,</span>
+      <span class="punct">'</span><span class="string">Orange</span><span class="punct">'</span> <span class="punct">=&gt;</span> <span class="number">70</span><span class="punct">,</span>
+      <span class="punct">'</span><span class="string">Taco</span><span class="punct">'</span> <span class="punct">=&gt;</span> <span class="number">30</span>
+    <span class="punct">}</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span> <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">pie_test.svg</span><span class="punct">&quot;</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span> <span class="symbol">:width</span> <span class="punct">=&gt;</span> <span class="number">300</span><span class="punct">,</span> <span class="symbol">:height</span> <span class="punct">=&gt;</span> <span class="number">200</span><span class="punct">,</span>
+      <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">pie_test.png</span><span class="punct">&quot;,</span> <span class="symbol">:as</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">png</span><span class="punct">'</span>
+</pre></h3>
+
+
+	<p><img src="images/graphs/pie_test.png" alt="" /></p>
+
+
+	<h3>Line Graph
+<pre class='syntax'>
+    <span class="ident">graph</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Graph</span><span class="punct">.</span><span class="ident">new</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">title</span> <span class="punct">=</span> <span class="punct">&quot;</span><span class="string">Sample Line Graph</span><span class="punct">&quot;</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">renderer</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Renderers</span><span class="punct">::</span><span class="constant">Standard</span><span class="punct">.</span><span class="ident">new</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:line</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Example</span><span class="punct">',</span> <span class="punct">[</span><span class="number">20</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">70</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">106</span><span class="punct">]</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span> <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">line_test.svg</span><span class="punct">&quot;</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span>  <span class="symbol">:width</span> <span class="punct">=&gt;</span> <span class="number">300</span><span class="punct">,</span> <span class="symbol">:height</span> <span class="punct">=&gt;</span> <span class="number">200</span><span class="punct">,</span>
+      <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">line_test.png</span><span class="punct">&quot;,</span> <span class="symbol">:as</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">png</span><span class="punct">'</span>
+</pre></h3>
+
+
+	<p><img src="images/graphs/line_test.png" alt="" /></p>
+
+
+	<h3>Bar Graph
+<pre class='syntax'>
+    <span class="ident">graph</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Graph</span><span class="punct">.</span><span class="ident">new</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">title</span> <span class="punct">=</span> <span class="punct">&quot;</span><span class="string">Sample Line Graph</span><span class="punct">&quot;</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">renderer</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Renderers</span><span class="punct">::</span><span class="constant">Standard</span><span class="punct">.</span><span class="ident">new</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:line</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Example</span><span class="punct">',</span> <span class="punct">[</span><span class="number">20</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">70</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">106</span><span class="punct">]</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span> <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">line_test.svg</span><span class="punct">&quot;</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span>  <span class="symbol">:width</span> <span class="punct">=&gt;</span> <span class="number">300</span><span class="punct">,</span> <span class="symbol">:height</span> <span class="punct">=&gt;</span> <span class="number">200</span><span class="punct">,</span>
+      <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">line_test.png</span><span class="punct">&quot;,</span> <span class="symbol">:as</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">png</span><span class="punct">'</span>
+</pre></h3>
+
+
+	<p><img src="images/graphs/bar_test.png" alt="" /></p>
+
+
+	<h3>Split Graph
+<pre class='syntax'>
+    <span class="ident">graph</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Graph</span><span class="punct">.</span><span class="ident">new</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">title</span> <span class="punct">=</span> <span class="punct">&quot;</span><span class="string">Long-term Comparisons</span><span class="punct">&quot;</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">value_formatter</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Formatters</span><span class="punct">::</span><span class="constant">Currency</span><span class="punct">.</span><span class="ident">new</span><span class="punct">(</span>
+      <span class="symbol">:special_negatives</span> <span class="punct">=&gt;</span> <span class="constant">true</span><span class="punct">,</span> <span class="symbol">:negative_color</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">#ff7777</span><span class="punct">')</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">renderer</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Renderers</span><span class="punct">::</span><span class="constant">Split</span><span class="punct">.</span><span class="ident">new</span><span class="punct">(</span>
+      <span class="symbol">:split_label</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">Northeastern (Top) / Central (Bottom)</span><span class="punct">')</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:area</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Jeff</span><span class="punct">',</span>
+      <span class="punct">[</span><span class="number">20</span><span class="punct">,</span> <span class="punct">-</span><span class="number">5</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">70</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">106</span><span class="punct">,</span> <span class="number">203</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">50</span><span class="punct">,</span> <span class="number">203</span><span class="punct">,</span> <span class="number">289</span><span class="punct">,</span> <span class="number">20</span><span class="punct">],</span>
+      <span class="symbol">:category</span> <span class="punct">=&gt;</span> <span class="symbol">:top</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:area</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Jerry</span><span class="punct">',</span>
+      <span class="punct">[-</span><span class="number">10</span><span class="punct">,</span> <span class="number">70</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">102</span><span class="punct">,</span> <span class="number">201</span><span class="punct">,</span> <span class="number">26</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">106</span><span class="punct">,</span> <span class="number">203</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">50</span><span class="punct">,</span> <span class="number">39</span><span class="punct">],</span>
+      <span class="symbol">:category</span> <span class="punct">=&gt;</span> <span class="symbol">:top</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:bar</span><span class="punct">,</span>  <span class="punct">'</span><span class="string">Jack</span><span class="punct">',</span>
+      <span class="punct">[</span><span class="number">30</span><span class="punct">,</span> <span class="number">0</span><span class="punct">,</span> <span class="number">49</span><span class="punct">,</span> <span class="number">29</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">203</span><span class="punct">,</span> <span class="number">70</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">102</span><span class="punct">,</span> <span class="number">201</span><span class="punct">,</span> <span class="number">26</span><span class="punct">,</span> <span class="number">130</span><span class="punct">],</span>
+      <span class="symbol">:category</span> <span class="punct">=&gt;</span> <span class="symbol">:bottom</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:line</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Brasten</span><span class="punct">',</span>
+      <span class="punct">[</span><span class="number">42</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">75</span><span class="punct">,</span> <span class="number">150</span><span class="punct">,</span> <span class="number">130</span><span class="punct">,</span> <span class="number">70</span><span class="punct">,</span> <span class="punct">-</span><span class="number">10</span><span class="punct">,</span> <span class="punct">-</span><span class="number">20</span><span class="punct">,</span> <span class="number">50</span><span class="punct">,</span> <span class="number">92</span><span class="punct">,</span> <span class="punct">-</span><span class="number">21</span><span class="punct">,</span> <span class="number">19</span><span class="punct">],</span>
+      <span class="symbol">:categories</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="symbol">:top</span><span class="punct">,</span> <span class="symbol">:bottom</span><span class="punct">]</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:line</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Jim</span><span class="punct">',</span>
+      <span class="punct">[-</span><span class="number">10</span><span class="punct">,</span> <span class="punct">-</span><span class="number">20</span><span class="punct">,</span> <span class="number">50</span><span class="punct">,</span> <span class="number">92</span><span class="punct">,</span> <span class="punct">-</span><span class="number">21</span><span class="punct">,</span> <span class="number">56</span><span class="punct">,</span> <span class="number">92</span><span class="punct">,</span> <span class="number">84</span><span class="punct">,</span> <span class="number">82</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">39</span><span class="punct">,</span> <span class="number">120</span><span class="punct">],</span>
+      <span class="symbol">:categories</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="symbol">:top</span><span class="punct">,</span> <span class="symbol">:bottom</span><span class="punct">]</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">point_markers</span> <span class="punct">=</span> <span class="punct">['</span><span class="string">Jan</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Feb</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Mar</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Apr</span><span class="punct">',</span> <span class="punct">'</span><span class="string">May</span><span class="punct">',</span>
+      <span class="punct">'</span><span class="string">Jun</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Jul</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Aug</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Sep</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Oct</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Nov</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Dec</span><span class="punct">']</span>
+    
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span> <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">split_test.svg</span><span class="punct">&quot;</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span>  <span class="symbol">:width</span> <span class="punct">=&gt;</span> <span class="number">500</span><span class="punct">,</span>
+      <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">split_test.png</span><span class="punct">&quot;,</span> <span class="symbol">:as</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">png</span><span class="punct">'</span>
+</pre></h3>
+
+
+	<p><img src="images/graphs/split_test.png" alt="" /></p>
+
+
+	<h3>Stacking Graph Types
+<pre class='syntax'>
+    <span class="ident">graph</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Graph</span><span class="punct">.</span><span class="ident">new</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">title</span> <span class="punct">=</span> <span class="punct">&quot;</span><span class="string">Comparative Agent Performance</span><span class="punct">&quot;</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">value_formatter</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Formatters</span><span class="punct">::</span><span class="constant">Percentage</span><span class="punct">.</span><span class="ident">new</span><span class="punct">(</span><span class="symbol">:precision</span> <span class="punct">=&gt;</span> <span class="number">0</span><span class="punct">)</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:stacked</span> <span class="keyword">do</span> <span class="punct">|</span><span class="ident">stacked</span><span class="punct">|</span>
+      <span class="ident">stacked</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:bar</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Jack</span><span class="punct">',</span> <span class="punct">[</span><span class="number">30</span><span class="punct">,</span> <span class="number">60</span><span class="punct">,</span> <span class="number">49</span><span class="punct">,</span> <span class="number">29</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">120</span><span class="punct">]</span>
+      <span class="ident">stacked</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:bar</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Jill</span><span class="punct">',</span> <span class="punct">[</span><span class="number">120</span><span class="punct">,</span> <span class="number">240</span><span class="punct">,</span> <span class="number">0</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">140</span><span class="punct">,</span> <span class="number">20</span><span class="punct">]</span>
+      <span class="ident">stacked</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:bar</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Hill</span><span class="punct">',</span> <span class="punct">[</span><span class="number">10</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">90</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">10</span><span class="punct">]</span>
+    <span class="keyword">end</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">point_markers</span> <span class="punct">=</span> <span class="punct">['</span><span class="string">Jan</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Feb</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Mar</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Apr</span><span class="punct">',</span> <span class="punct">'</span><span class="string">May</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Jun</span><span class="punct">']</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span> <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">stacking_test.svg</span><span class="punct">&quot;</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span>  <span class="symbol">:width</span> <span class="punct">=&gt;</span> <span class="number">500</span><span class="punct">,</span> <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">stacking_test.png</span><span class="punct">&quot;,</span> <span class="symbol">:as</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">png</span><span class="punct">'</span>
+</pre></h3>
+
+
+	<p><img src="images/graphs/stacking_test.png" alt="" /></p>
+
+
+	<h3>Multi-viewport Multi-layered
+<pre class='syntax'>
+    <span class="ident">graph</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Graph</span><span class="punct">.</span><span class="ident">new</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">title</span> <span class="punct">=</span> <span class="punct">&quot;</span><span class="string">Some Kind of Information</span><span class="punct">&quot;</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">renderer</span> <span class="punct">=</span> <span class="constant">Scruffy</span><span class="punct">::</span><span class="constant">Renderers</span><span class="punct">::</span><span class="constant">Cubed</span><span class="punct">.</span><span class="ident">new</span>
+
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:area</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Jeff</span><span class="punct">',</span> <span class="punct">[</span><span class="number">20</span><span class="punct">,</span> <span class="punct">-</span><span class="number">5</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">70</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">106</span><span class="punct">],</span>
+      <span class="symbol">:categories</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="symbol">:top_left</span><span class="punct">,</span> <span class="symbol">:bottom_right</span><span class="punct">]</span>    
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:area</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Jerry</span><span class="punct">',</span> <span class="punct">[-</span><span class="number">10</span><span class="punct">,</span> <span class="number">70</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">102</span><span class="punct">,</span> <span class="number">201</span><span class="punct">,</span> <span class="number">26</span><span class="punct">],</span>
+      <span class="symbol">:categories</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="symbol">:bottom_left</span><span class="punct">,</span> <span class="symbol">:buttom_right</span><span class="punct">]</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:bar</span><span class="punct">,</span>  <span class="punct">'</span><span class="string">Jack</span><span class="punct">',</span> <span class="punct">[</span><span class="number">30</span><span class="punct">,</span> <span class="number">0</span><span class="punct">,</span> <span class="number">49</span><span class="punct">,</span> <span class="number">29</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">203</span><span class="punct">],</span>
+      <span class="symbol">:categories</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="symbol">:bottom_left</span><span class="punct">,</span> <span class="symbol">:top_right</span><span class="punct">]</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:line</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Brasten</span><span class="punct">',</span> <span class="punct">[</span><span class="number">42</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">75</span><span class="punct">,</span> <span class="number">150</span><span class="punct">,</span> <span class="number">130</span><span class="punct">,</span> <span class="number">70</span><span class="punct">],</span>
+      <span class="symbol">:categories</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="symbol">:top_right</span><span class="punct">,</span> <span class="symbol">:bottom_left</span><span class="punct">]</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">add</span> <span class="symbol">:line</span><span class="punct">,</span> <span class="punct">'</span><span class="string">Jim</span><span class="punct">',</span> <span class="punct">[-</span><span class="number">10</span><span class="punct">,</span> <span class="punct">-</span><span class="number">20</span><span class="punct">,</span> <span class="number">50</span><span class="punct">,</span> <span class="number">92</span><span class="punct">,</span> <span class="punct">-</span><span class="number">21</span><span class="punct">,</span> <span class="number">56</span><span class="punct">],</span>
+      <span class="symbol">:categories</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="symbol">:top_left</span><span class="punct">,</span> <span class="symbol">:bottom_right</span><span class="punct">]</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">point_markers</span> <span class="punct">=</span> <span class="punct">['</span><span class="string">Jan</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Feb</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Mar</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Apr</span><span class="punct">',</span> <span class="punct">'</span><span class="string">May</span><span class="punct">',</span> <span class="punct">'</span><span class="string">Jun</span><span class="punct">']</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span> <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">multi_test.svg</span><span class="punct">&quot;</span>
+    <span class="ident">graph</span><span class="punct">.</span><span class="ident">render</span>  <span class="symbol">:width</span> <span class="punct">=&gt;</span> <span class="number">500</span><span class="punct">,</span> <span class="symbol">:to</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">multi_test.png</span><span class="punct">&quot;,</span> <span class="symbol">:as</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">png</span><span class="punct">'</span>
+</pre></h3>
+
+
+	<p><img src="images/graphs/multi_test.png" alt="" /></p>
+
+
+	<h2>Source Code</h2>
+
+
+	<p>The trunk repository is <code>svn://rubyforge.org/var/svn/scruffy/trunk</code> for anonymous access.</p>
+
+
+	<p>Rubyforge Project is <a href="http://rubyforge.org/projects/scruffy/" class="major">here</a></p>
+
+
+	<h2>News</h2>
+
+
+	<ul>
+	<li><strong>July 8th, 2008, Scruffy 0.2.3</strong> &#8211; Pie Charts added.</li>
+	</ul>
+
+
+	<ul>
+	<li><strong>August 18th, 2006, Scruffy 0.2.2</strong> &#8211; Significant changes from 0.1.0!  New layouts, better rendering, etc.
+Check out more examples at <a href="http://www.ibrasten.com/articles/tag/scruffy">iBrasten.com</a></li>
+	</ul>
+
+
+	<ul>
+	<li><strong>August 11th, 2006, Scruffy 0.1.0</strong> &#8211; the first release intended for public use &#8211; has been posted!</li>
+	</ul>
+
+
+	<h2>License</h2>
+
+
+	<p>This code is free to use under the terms of the <span class="caps">MIT</span> license.</p>
+
+
+	<h2>Contact</h2>
+
+
+	<p>Scruffy was created by <a href="http://www.ibrasten.com">Brasten Sager</a>.</p>
+
+
+	<p>Collaborative work by <a href="http://www.ajostman.com/blog">A.J. Ostman</a>.</p>
+
+
+<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
+<script type="text/javascript">
+    _uacct = &#8220;UA-1742674-1&#8221;;
+    urchinTracker();
+</script>
+    <p class="coda">
+      9th July 2008<br>
+    </p>
+</div>
+
+<!-- insert site tracking codes here, like Google Urchin -->
+
+</body>
+</html>