<%@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>