RainPro supports two basic methods of internet publishing – you can save your chart in one of the two standard picture formats (GIF or PNG) or you can export it in text format as ‘Vector Markup Language’ (VML) which is rendered very effectively by IE5, or as SVG (the newer W3C graphics standard). The necessary support functions are in the companion RainVML workspace along with support for direct output to PDF.

Saving charts in picture format
From Dyalog APL you can use PostScrp.MakePNG or PostScrp.MakeGIF directly, but note that Dyalog can only make uncompressed GIF files, so if you want to use this format, it may be worth loading the file into a program such as PaintShop Pro and resaving it to reduce the file size.

To make a really simple web page, you can open Notepad, and type a couple of lines such as:

<h2>Here is My Chart</h2>
<img src="mychart.png">
<p>That was easy!</p>

Save the file as ‘c:\temp\first.htm’, and double-click it in Windows Explorer. You will see the text (with the top line in bold), a placeholder for the picture, as it doesn’t exist yet, and the last line in normal text.

To make an example chart, and save it as a picture:

ch.Set 'head' 'My First Chart'
ch.Pie 5 4 3 2
PG„ch.Close
png„PostScrp.MakePNG PG

You will find that png is a 3-element nested vector. It has the integer representation of the picture in the first element, a ‘client-side image map’ in the second element and the id of the chart in the third.

      ½png
3
      ½¨png
 5750  30  8 
      2œpng
<MAP name="chart186">         
</MAP>
      3œpng
chart186

The first element may be written ‘raw’ to file to make an image in the correct format:

      20†œpng
¯119 80 78 71 13 10 26 10 0 0 0 13 73 72 68 82 0 0 1 ¯80
      'c:\temp\mychart.png' PostScrp.rput œpng

You can now view the completed web page (with the chart in place) in your browser.

The optional left argument of MakePNG sets the scale factor – for example to make a miniature:

      'c:\temp\mychart.png' PostScrp.rput œ0.4 PostScrp.MakePNG PG

Press F5 again in the browser to see a much smaller pie.

Note on GIFs and PNGs
The GIF format is universally acceptable (it works in all browsers from Netscape-1 upwards) but the compression algorithm used was retrospectively claimed as copyright by Unisys who charge a ridiculous fee for developers (like us) to license it.

The PNG format is supported by any browser with a version number of 4 and above, and is an all-round better performer. It is also public, free and well supported by Microsoft tools such as Word97. Use it if you are reasonably sure your readers mostly have up-to-date browsers!

Saving the chart in VML
Vector Markup Language (VML) is a new facility in IE5 which allows you to include high-quality vector graphics in your web page. These are written entirely as text, are typically much smaller than the corresponding picture, and print very much better. The VML support in RainPro is quite comprehensive, but you will notice that rotated text is not rendered particularly well by the browser, and you might prefer the PNG format for 3D charts for this reason.

To convert any Rain graph to VML, use vml.PS to convert the intermediate PostScript format to a text vector of VML code, then you can use Clip to put it on the clipboard. Simply paste the result into your HTML file, put the required magic words into the header (see vml.header) and view it in IE5! See VMLTest for a simple example which you can adapt. There are several examples of VML-based graphics on the Causeway website, but of course you will need IE5 to view them.

Save the chart as a Java Applet
If you want to make your chart available as a vector graphic to non-Microsoft operating systems or older browsers (such as Netscape running under Linux) you should use PostScrp.MakeApplet to convert the graph to a set of applet parameters to the Rain Java viewer. You should download the required classes (see rainview.zip on the support page) from the Causeway website and include the viewer applet in the same directory as the charts you wish to view. Alternatively, change the code parameter in the applet tag to point to http://www.causeway.co.uk/demos/jview/rainview which will pick up the latest copy from our web site.

Adding hypertext jumps to charts
If you really want to know what is going on here, you can read about “Client-side Image Maps” in any good introduction to HTML. The object is to allow any data point to act as a hypertext jump, so that you can readily implement graphically-based ‘drill-down’ applications on your website. As a simple example, we might want to see some annotations related to the second sector of a piechart:

       ch.Set 'head' 'My First Chart'
       ch.Set 'xlabs' 'One' 'Two' 'Three' 'Four'
       ch.Href 2 1 'notes.htm'
       ch.Pie 5 4 3 2
       PG„ch.Close
       png„PostScrp.MakePNG PG

The new function introduced here ch.Href has a simple job to do. For any data point (addressed by row,column – piecharts have all their values in column-1) you can associate an internet address. The map is built for you by PostScrp.MakePNG ...

      2œpng
<MAP name="chart17487">
<area shape="poly" coords="225,159,163,208,183,226,209,236,236,237,262,228,284,211,286,208" href="notes.htm">
</MAP>

You can now paste this map into your web page (conventionally at the beginning of the body section). Typically your HTML code will now look like ...

<MAP name="chart17487">
<area shape="poly" coords="225,159,163,208,183,226,209,236,236,237,262,228,284,211,286,208" href="notes.htm">
</MAP>
<h2>Here is My Chart</h2>
<img src="mychart.png" usemap="#chart17487" border=0>
<p>That was easy!</p>

I added ‘border=0’ out of neatness, as I object to the heavy blue line that browsers put around pictorial jumps; you can safely leave it out. Now you can also see why we need those uniquely numbered maps – it allows you to have several mapped charts on the same page.

The pie should look much the same as before in the browser, but now when you wave the mouse over the second pie sector, the mouse turns into a pointing hand, and you can click anywhere on the sector to see the detailed notes. You can easily define multiple jumps, and build the correct URL strings to call back to your Dyalog web server – see the notes on ch.Href for full details.

Summary
Charts may be saved as image files, and may be referred to from the IMG tag in normal HTML code. If you make a special section called an image map, this can contain various shape definitions which may themselves act as hypertext jumps. You associate your image with the map by referring to its name in the usemap attribute of the IMG tag. In the future, the spread of VML will allow high-quality vector graphics to be viewed directly in the browser.