From: piir@... (Todd Gardner)
Date: 2004-06-17T11:28:26+09:00
Subject: Re: SVG::Graph looks awesome...

gabriele renzi <surrender_it@remove.yahoo.it> wrote in message news:<u0pvc0d219195kb9u2c5nin4bon55acbvu@4ax.com>...
> il 15 Jun 2004 18:52:30 -0700, piir@earthlink.net (Todd Gardner) ha
> scritto::
> 
> >Hello everyone,
> >
> >I'm trying to install SVG::Graph through the link below.
> >
> 
> download the .zip package. Then unzip it and open a prompt. 
> go to the directory and type: 
>  ruby install.rb
> Now it is installed (it is on my xp box)

Hello Gabriele,

I have done that however, I don't know it's working right.  I'm trying
to run that code for Line.rb from the site
http://www.germane-software.com/software/SVG/SVG::Graph/doc/
->SVG::Graph::Line.

The code does not generate any graphics, only text is generated in
SciTE 1.59.  What do I have to install or what am I doing wrong?

Thank you,

Todd
=Output for Line.rb=============================================
>rubyw Line.rbw
Content-type: image/svg+xml

<?xml version='1.0'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 300 500'
height='500' width='300' xmlns='http://www.w3.org/2000/svg'>
    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
    <!-- Created with SVG::Graph -->
    <!-- Sean Russell -->
    <!-- Based on SVG::TT::Graph for Perl by Leo Lapworth & Stephan
Morgan -->
    <!-- //////////////////////////////////////////////////////////////////-->
  <defs>
    <style type='text/css'>      <![CDATA[/* Copy from here for
external style sheet */
..svgBackground{
  fill:#ffffff;
}
..graphBackground{
  fill:#f0f0f0;
}

/* graphs titles */
..mainTitle{
  text-anchor: middle;
  fill: #000000;
  font-size: 16px;
  font-family: "Arial", sans-serif;
  font-weight: normal;
}
..subTitle{
  text-anchor: middle;
  fill: #999999;
  font-size: 14px;
  font-family: "Arial", sans-serif;
  font-weight: normal;
}

..axis{
  stroke: #000000;
  stroke-width: 1px;
}

..guideLines{
  stroke: #666666;
  stroke-width: 1px;
  stroke-dasharray: 5 5;
}

..xAxisLabels{
  text-anchor: middle;
  fill: #000000;
  font-size: 12px;
  font-family: "Arial", sans-serif;
  font-weight: normal;
}

..yAxisLabels{
  text-anchor: end;
  fill: #000000;
  font-size: 12px;
  font-family: "Arial", sans-serif;
  font-weight: normal;
}

..xAxisTitle{
  text-anchor: middle;
  fill: #ff0000;
  font-size: 14px;
  font-family: "Arial", sans-serif;
  font-weight: normal;
}

..yAxisTitle{
  fill: #ff0000;
  text-anchor: middle;
  font-size: 14px;
  font-family: "Arial", sans-serif;
  font-weight: normal;
}

..dataPointLabel{
  fill: #000000;
  text-anchor:middle;
  font-size: 10px;
  font-family: "Arial", sans-serif;
  font-weight: normal;
}

..staggerGuideLine{
  fill: none;
  stroke: #000000;
  stroke-width: 0.5px;  
}

/* default line styles */
..line1{
	fill: none;
	stroke: #ff0000;
	stroke-width: 1px;	
}
..line2{
	fill: none;
	stroke: #0000ff;
	stroke-width: 1px;	
}
..line3{
	fill: none;
	stroke: #00ff00;
	stroke-width: 1px;	
}
..line4{
	fill: none;
	stroke: #ffcc00;
	stroke-width: 1px;	
}
..line5{
	fill: none;
	stroke: #00ccff;
	stroke-width: 1px;	
}
..line6{
	fill: none;
	stroke: #ff00ff;
	stroke-width: 1px;	
}
..line7{
	fill: none;
	stroke: #00ffff;
	stroke-width: 1px;	
}
..line8{
	fill: none;
	stroke: #ffff00;
	stroke-width: 1px;	
}
..line9{
	fill: none;
	stroke: #ccc6666;
	stroke-width: 1px;	
}
..line10{
	fill: none;
	stroke: #663399;
	stroke-width: 1px;	
}
..line11{
	fill: none;
	stroke: #339900;
	stroke-width: 1px;	
}
..line12{
	fill: none;
	stroke: #9966FF;
	stroke-width: 1px;	
}
/* default fill styles */
..fill1{
	fill: #cc0000;
	fill-opacity: 0.2;
	stroke: none;
}
..fill2{
	fill: #0000cc;
	fill-opacity: 0.2;
	stroke: none;
}
..fill3{
	fill: #00cc00;
	fill-opacity: 0.2;
	stroke: none;
}
..fill4{
	fill: #ffcc00;
	fill-opacity: 0.2;
	stroke: none;
}
..fill5{
	fill: #00ccff;
	fill-opacity: 0.2;
	stroke: none;
}
..fill6{
	fill: #ff00ff;
	fill-opacity: 0.2;
	stroke: none;
}
..fill7{
	fill: #00ffff;
	fill-opacity: 0.2;
	stroke: none;
}
..fill8{
	fill: #ffff00;
	fill-opacity: 0.2;
	stroke: none;
}
..fill9{
	fill: #cc6666;
	fill-opacity: 0.2;
	stroke: none;
}
..fill10{
	fill: #663399;
	fill-opacity: 0.2;
	stroke: none;
}
..fill11{
	fill: #339900;
	fill-opacity: 0.2;
	stroke: none;
}
..fill12{
	fill: #9966FF;
	fill-opacity: 0.2;
	stroke: none;
}
/* default line styles */
..key1,.dataPoint1{
	fill: #ff0000;
	stroke: none;
	stroke-width: 1px;	
}
..key2,.dataPoint2{
	fill: #0000ff;
	stroke: none;
	stroke-width: 1px;	
}
..key3,.dataPoint3{
	fill: #00ff00;
	stroke: none;
	stroke-width: 1px;	
}
..key4,.dataPoint4{
	fill: #ffcc00;
	stroke: none;
	stroke-width: 1px;	
}
..key5,.dataPoint5{
	fill: #00ccff;
	stroke: none;
	stroke-width: 1px;	
}
..key6,.dataPoint6{
	fill: #ff00ff;
	stroke: none;
	stroke-width: 1px;	
}
..key7,.dataPoint7{
	fill: #00ffff;
	stroke: none;
	stroke-width: 1px;	
}
..key8,.dataPoint8{
	fill: #ffff00;
	stroke: none;
	stroke-width: 1px;	
}
..key9,.dataPoint9{
	fill: #cc6666;
	stroke: none;
	stroke-width: 1px;	
}
..key10,.dataPoint10{
	fill: #663399;
	stroke: none;
	stroke-width: 1px;	
}
..key11,.dataPoint11{
	fill: #339900;
	stroke: none;
	stroke-width: 1px;	
}
..key12,.dataPoint12{
	fill: #9966FF;
	stroke: none;
	stroke-width: 1px;	
}


..keyText{
  fill: #000000;
  text-anchor:start;
  font-size: 10px;
  font-family: "Arial", sans-serif;
  font-weight: normal;
}
/* End copy for external style sheet */
]]></style>
  </defs>
    <!-- include default stylesheet if none specified -->
    <!--SVG Background-->
  <rect x='0' class='svgBackground' y='0' height='500' width='300'/>
  <g transform='translate( 50.2 10 )'>
    <rect x='0' class='graphBackground' y='0' height='471'
width='160.8'/>
    <path class='axis' d='M 0 0 v471' id='xAxis'/>
    <path class='axis' d='M 0 471 h160.8' id='yAxis'/>
    <text x='0.0' class='xAxisLabels' y='486' style='text-anchor:
middle'>Jan</text>
    <text x='68.4' class='xAxisLabels' y='486' style='text-anchor:
middle'>Feb</text>
    <text x='136.8' class='xAxisLabels' y='486' style='text-anchor:
middle'>Mar</text>
    <text x='-3' class='yAxisLabels' y='475.0' style='text-anchor:
end'>12.0</text>
    <text x='-3' class='yAxisLabels' y='430.3' style='text-anchor:
end'>15.465</text>
    <path class='guideLines' d='M0 426.3 h160.8'/>
    <text x='-3' class='yAxisLabels' y='385.6' style='text-anchor:
end'>18.93</text>
    <path class='guideLines' d='M0 381.6 h160.8'/>
    <text x='-3' class='yAxisLabels' y='340.9' style='text-anchor:
end'>22.395</text>
    <path class='guideLines' d='M0 336.9 h160.8'/>
    <text x='-3' class='yAxisLabels' y='296.2' style='text-anchor:
end'>25.86</text>
    <path class='guideLines' d='M0 292.2 h160.8'/>
    <text x='-3' class='yAxisLabels' y='251.5' style='text-anchor:
end'>29.325</text>
    <path class='guideLines' d='M0 247.5 h160.8'/>
    <text x='-3' class='yAxisLabels' y='206.8' style='text-anchor:
end'>32.79</text>
    <path class='guideLines' d='M0 202.8 h160.8'/>
    <text x='-3' class='yAxisLabels' y='162.1' style='text-anchor:
end'>36.255</text>
    <path class='guideLines' d='M0 158.1 h160.8'/>
    <text x='-3' class='yAxisLabels' y='117.4' style='text-anchor:
end'>39.72</text>
    <path class='guideLines' d='M0 113.4 h160.8'/>
    <text x='-3' class='yAxisLabels' y='72.7' style='text-anchor:
end'>43.185</text>
    <path class='guideLines' d='M0 68.7 h160.8'/>
    <text x='-3' class='yAxisLabels' y='28.0' style='text-anchor:
end'>46.65</text>
    <path class='guideLines' d='M0 24.0 h160.8'/>
    <path class='line2' d='M0 471 M0 471 L0.0 -199.5 68.4 -870.0 136.8
-1317.0 '/>
    <circle cy='-199.5' class='dataPoint2' r='2.5' cx='0.0'/>
    <circle cy='-870.0' class='dataPoint2' r='2.5' cx='68.4'/>
    <circle cy='-1317.0' class='dataPoint2' r='2.5' cx='136.8'/>
    <path class='line1' d='M0 471 M0 471 L0.0 -65.4000000000001 68.4
-1540.5 136.8 -467.7 '/>
    <circle cy='-65.4000000000001' class='dataPoint1' r='2.5'
cx='0.0'/>
    <circle cy='-1540.5' class='dataPoint1' r='2.5' cx='68.4'/>
    <circle cy='-467.7' class='dataPoint1' r='2.5' cx='136.8'/>
    <g>
      <text x='0.0' class='dataPointLabel' y='-205.5' style=' stroke:
#fff; stroke-width: 2;'>15</text>
      <text x='0.0' class='dataPointLabel' y='-205.5'>15</text>
      <text x='68.4' class='dataPointLabel' y='-876.0' style=' stroke:
#fff; stroke-width: 2;'>30</text>
      <text x='68.4' class='dataPointLabel' y='-876.0'>30</text>
      <text x='136.8' class='dataPointLabel' y='-1323.0' style='
stroke: #fff; stroke-width: 2;'>40</text>
      <text x='136.8' class='dataPointLabel' y='-1323.0'>40</text>
      <text x='0.0' class='dataPointLabel' y='-71.4000000000001'
style=' stroke: #fff; stroke-width: 2;'>12</text>
      <text x='0.0' class='dataPointLabel'
y='-71.4000000000001'>12</text>
      <text x='68.4' class='dataPointLabel' y='-1546.5' style='
stroke: #fff; stroke-width: 2;'>45</text>
      <text x='68.4' class='dataPointLabel' y='-1546.5'>45</text>
      <text x='136.8' class='dataPointLabel' y='-473.7' style='
stroke: #fff; stroke-width: 2;'>21</text>
      <text x='136.8' class='dataPointLabel' y='-473.7'>21</text>
    </g>
  </g>
  <g transform='translate(221.0 30)'>
    <rect x='0' class='key1' y='0' height='12' width='12'/>
    <text x='17' class='keyText' y='12'>Sales 2002</text>
    <rect x='0' class='key2' y='17' height='12' width='12'/>
    <text x='17' class='keyText' y='29'>Sales 2003</text>
  </g>
</svg>>Exit code: 0

=Code for Line.rb========================================================
require 'SVG/Graph/Line'

  fields = %w(Jan Feb Mar);
  data_sales_02 = [12, 45, 21]
  data_sales_03 = [15, 30, 40]

  graph = SVG::Graph::Line.new({
          :height => 500,
          :width => 300,
    :fields => fields,
  })

  graph.add_data({
          :data => data_sales_02,
    :title => 'Sales 2002',
  })

  graph.add_data({
          :data => data_sales_03,
    :title => 'Sales 2003',
  })

  print "Content-type: image/svg+xml\r\n\r\n";
  print graph.burn();

======================================================================