<%@page import="ChartDirector.*" %>
<%
//
//For demo purpose, we use hard coded data. In real life, the following data
//could come from a database.
//
double[] revenue = {4500, 5600, 6300, 8000, 12000, 14000, 16000, 20000, 24000,
    28000};
double[] grossMargin = {62, 65, 63, 60, 55, 56, 57, 53, 52, 50};
double[] backLog = {563, 683, 788, 941, 1334, 1522, 1644, 1905, 2222, 2544};
double[] receviable = {750, 840, 860, 1200, 2200, 2700, 2800, 3900, 4900, 6000};
String[] labels = {"1992", "1993", "1994", "1995", "1996", "1997", "1998",
    "1999", "2000", "2001"};

//Create a XYChart object of size 440 x 200 pixels
XYChart c = new XYChart(440, 200);

//Add a title to the chart using Times Bold Italic font
c.addTitle("Annual Revenue for Star Tech", "timesbi.ttf");

//Set the plotarea at (60, 5) and of size 350 x 150 pixels
c.setPlotArea(60, 25, 350, 150);

//Add an area chart layer for the revenue data
c.addAreaLayer(revenue, 0x3333cc, "Revenue").setBorderColor(
    Chart.SameAsMainColor);

//Set the x axis labels using the given labels
c.xAxis().setLabels(labels);

//Add a title to the y axis
c.yAxis().setTitle("USD (K)");

//Create the image and save it in a temporary location
request.getSession().setAttribute("chart1", c.makeChart2(Chart.PNG));

//Client side Javascript to show detail information "onmouseover"
String showText = "onmouseover='setDIV(\"info{x}\", \"visible\");' ";

//Client side Javascript to hide detail information "onmouseout"
String hideText = "onmouseout='setDIV(\"info{x}\", \"hidden\");' ";

//"title" attribute to show tool tip
String toolTip = "title='{xLabel}: USD {value|0}K'";

//Create an image map for the chart
String imageMap = c.getHTMLImageMap("XYSTUB.jsp", "", showText + hideText +
    toolTip);
%>

<html>
<body>
<h1>Javascript Clickable Chart</h1>
<p><a href="VIEWSOURCE.jsp?file=<%=request.getServletPath()%>">
View Source Code
</a></p>

<p style="width:500px">
Move the mouse cursor over the area chart to see what happens!
This effect is achieved by using image maps with client side Javascript.
</p>

<img src="chart1.chart?no_cache=<%=Chart.getUniqueId()%>" border="0" usemap="#map1">
<map name="map1">
<%=imageMap%>
</map>

<br>

<!-----------------------------------------------------
    Create the DIV layers to show detail information
-------------------------------------------------------->

<%for(int i = 0; i < revenue.length; ++i) {%>

    <div id="info<%=i%>"
        style="visibility:hidden;position:absolute;left:65px;">
        <b>Year <%=labels[i]%></b><br>
        Revenue : USD <%=revenue[i]%>K<br>
        Gross Margin : <%=grossMargin[i]%>%<br>
        Back Log : USD <%=backLog[i]%>K<br>
        A/C Receviable : USD <%=receviable[i]%>K<br>
    </div>

<%}%>

<!-----------------------------------------------------
    Client side utility function to show and hide
    a layer. Works in both IE and Netscape browsers.
-------------------------------------------------------->
<SCRIPT>
function setDIV(id, cmd) {
    if (document.getElementById)
        //IE 5.x or NS 6.x or above
        document.getElementById(id).style.visibility = cmd;
    else if (document.all)
        //IE 4.x
        document.all[id].style.visibility = cmd;
    else
        //Netscape 4.x
        document[id].visibility = cmd;
}
</SCRIPT>

</body>
</html>