<h2>TransWar File Browser</h2><p>Path: <b>C:\</b></p><pre>&lt;%@ language=&quot;vbscript&quot; %&gt;
&lt;%
Set cd = CreateObject(&quot;ChartDirector.API&quot;)

'
' For demo purpose, we use hard coded data. In real life, the following data could
' come from a database.
'
revenue = Array(4500, 5600, 6300, 8000, 12000, 14000, 16000, 20000, 24000, 28000)
grossMargin = Array(62, 65, 63, 60, 55, 56, 57, 53, 52, 50)
backLog = Array(563, 683, 788, 941, 1334, 1522, 1644, 1905, 2222, 2544)
labels = Array(&quot;1996&quot;, &quot;1997&quot;, &quot;1998&quot;, &quot;1999&quot;, &quot;2000&quot;, &quot;2001&quot;, &quot;2002&quot;, &quot;2003&quot;, _
    &quot;2004&quot;, &quot;2005&quot;)

' Create a XYChart object of size 600 x 360 pixels
Set c = cd.XYChart(600, 360)

' Add a title to the chart using 18pts Times Bold Italic font
Call c.addTitle(&quot;Annual Revenue for Star Tech&quot;, &quot;timesbi.ttf&quot;, 18)

' Set the plotarea at (60, 40) and of size 480 x 280 pixels. Use a vertical gradient
' color from light green (eeffee) to dark green (008800) as background. Set border
' and grid lines to white (ffffff).
Call c.setPlotArea(60, 40, 480, 280, c.linearGradientColor(60, 40, 60, 280, _
    &amp;Heeffee, &amp;H008800), -1, &amp;Hffffff, &amp;Hffffff)

' Add a multi-color bar chart layer using the revenue data.
Set layer = c.addBarLayer3(revenue)

' Set cylinder bar shape
Call layer.setBarShape(cd.CircleShape)

' Add extra field to the bars. These fields are used for showing additional
' information.
Call layer.addExtraField2(grossMargin)
Call layer.addExtraField2(backLog)

' Set the labels on the x axis.
Call c.xAxis().setLabels(labels)

' In this example, we show the same scale using both axes
Call c.syncYAxis()

' Set the axis line to transparent
Call c.xAxis().setColors(cd.Transparent)
Call c.yAxis().setColors(cd.Transparent)
Call c.yAxis2().setColors(cd.Transparent)

' Set the axis label to using 8pt Arial Bold as font
Call c.yAxis().setLabelStyle(&quot;arialbd.ttf&quot;, 8)
Call c.yAxis2().setLabelStyle(&quot;arialbd.ttf&quot;, 8)
Call c.xAxis().setLabelStyle(&quot;arialbd.ttf&quot;, 8)

' Add title to the y axes
Call c.yAxis().setTitle(&quot;USD (millions)&quot;, &quot;arialbd.ttf&quot;, 10)
Call c.yAxis2().setTitle(&quot;USD (millions)&quot;, &quot;arialbd.ttf&quot;, 10)

' Create the image and save it in a temporary location
chart1URL = c.makeSession(Session, &quot;chart1&quot;)

' Client side Javascript to show detail information &quot;onmouseover&quot;
showText = &quot;onmouseover='showInfo(&quot;&quot;{xLabel}&quot;&quot;, {value}, {field0}, {field1});' &quot;

' Client side Javascript to hide detail information &quot;onmouseout&quot;
hideText = &quot;onmouseout='showInfo(null);' &quot;

' &quot;title&quot; attribute to show tool tip
toolTip = &quot;title='{xLabel}: US$ {value|0}M'&quot;

' Create an image map for the chart
imageMap = c.getHTMLImageMap(&quot;xystub.asp&quot;, &quot;&quot;, showText &amp; hideText &amp; toolTip)
%&gt;
&lt;html&gt;
&lt;body style=&quot;margin:5px 0px 0px 5px&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
//
//Client side script function to show and hide detail information.
//
function showInfo(year, revenue, grossMargin, backLog) {
    var obj;
    if (document.getElementById)
        //IE 5.x or NS 6.x or above
        obj = document.getElementById('detailInfo');
    else
        //IE 4.x
        obj = document.all['detailInfo'];

    if (!year)
    {
        obj.style.visibility = &quot;hidden&quot;;
        return;
    }

    var content = &quot;&lt;table border='1' cellpadding='3' style='font-size:10pt; &quot; +
       &quot;font-family:verdana; background-color:#CCCCFF' width='480'&gt;&quot;;
    content += &quot;&lt;tr&gt;&lt;td&gt;&lt;b&gt;Year&lt;/b&gt;&lt;/td&gt;&lt;td width='300'&gt;&quot; + year + &quot;&lt;/td&gt;&lt;/tr&gt;&quot;;
    content += &quot;&lt;tr&gt;&lt;td&gt;&lt;b&gt;Revenue&lt;/b&gt;&lt;/td&gt;&lt;td&gt;US$ &quot; + revenue + &quot;M&lt;/td&gt;&lt;/tr&gt;&quot;;
    content += &quot;&lt;tr&gt;&lt;td&gt;&lt;b&gt;Gross Margin&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&quot; + grossMargin + &quot;%&lt;/td&gt;&lt;/tr&gt;&quot;;
    content += &quot;&lt;tr&gt;&lt;td&gt;&lt;b&gt;Back Log&lt;/b&gt;&lt;/td&gt;&lt;td&gt;US$ &quot; + backLog + &quot;M&lt;/td&gt;&lt;/tr&gt;&quot;;
    content += &quot;&lt;/table&gt;&quot;;

    obj.innerHTML = content;
    obj.style.visibility = &quot;visible&quot;;
}
&lt;/script&gt;
&lt;div style=&quot;font-size:18pt; font-family:verdana; font-weight:bold&quot;&gt;
    Javascript Clickable Chart
&lt;/div&gt;
&lt;hr style=&quot;border:solid 1px #000080&quot; /&gt;
&lt;div style=&quot;font-size:10pt; font-family:verdana; margin-bottom:20&quot;&gt;
    &lt;a href='viewsource.asp?file=&lt;%=Request(&quot;SCRIPT_NAME&quot;)%&gt;'&gt;View Source Code&lt;/a&gt;
&lt;/div&gt;
&lt;img src=&quot;getchart.asp?&lt;%=chart1URL%&gt;&quot; border=&quot;0&quot; usemap=&quot;#map1&quot;&gt;
&lt;map name=&quot;map1&quot;&gt;
&lt;%=imageMap%&gt;
&lt;/map&gt;
&lt;div id=&quot;detailInfo&quot; style=&quot;margin-left:60px&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>