Date:  02/05/2002 07:27:41 PM Msg ID:  000324
From:  Brian W Thread:  000324
Subject:  Creating SVG graphics/charts with FW

For those interested below is a fwx file that will generate a Scalabe Vector Graphic (SVG). We're using it for realtime data graphs. Your'll need the plug in from Adobe to see it:

http://www.adobe.com/svg/

Documentation for SVG is at:
http://www.w3.org/TR/SVG/index.html

Note the content type: "image/svg+xml"
========code========

<%
Response.ContentType = "image/svg+xml"

ybase1=40
xbase1=40
%><?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="600" height="400" viewBox="0 0 600 400">
  <desc>Chart1</desc>
<defs>
<clipPath id="clip1" >
    <rect x="<%=xbase1%>.5" y="<%=ybase1%>.5" width="504" height="288" />
</clipPath>
</defs>
  <!-- Show outline of canvas using 'rect' element -->
  <rect x="<%=xbase1%>.5" y="<%=ybase1%>.5" width="504" height="288"
        fill="none" stroke="#888888" stroke-width="1" />
<%

************** DRAW IT ****************
%>
<polyline fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.5"
    clip-path="url(#clip1)" 
        points="<%

FOR n= 1 to 100

    y1=STR((ybase1+288)-Rand()*288,6,1)
    x1=STR(n*5+xbase1,6,1)
    Response.Write(ALLTRIM(x1)+','+ALLTRIM(y1)+' ')
ENDFOR
%>"
/>

<text y="20" x="<%=xbase1+252%>" style="text-anchor:middle; fill:black; font-family:Arial, sans-serif; font-size:12;">
Last update <%=DATETIME()%>
</text>
</svg>