<%@page import="ChartDirector.*" %>
<%
//The data for the line chart

/*double[] data0 = {50, 55, 47, 36, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67,
    67, 58, 59, 73, 77, 84, 82, 80, 84};
double[] data1 = {36, 28, 25, 33, 38, 20, 22, 30, 25, 33, 30, 24, 28, 36, 30,
    45, 46, 42, 48, 45, 43, 52, 64, 70};*/

double[] data0 = {50, 55, 47, 36, 42, 49, 63, 62, 73, 59};
double[] data1 = {66, 62, 50, 43, 48, 46, 58, 69, 81, 63};
double[] data2 = {70, 59, 54, 47, 50, 47, 60, 67, 85, 60};


//The labels for the line chart
/*String[] labels = {"Jan-00", "Feb-00", "Mar-00", "Apr-00", "May-00", "Jun-00",
    "Jul-00", "Aug-00", "Sep-00", "Oct-00", "Nov-00", "Dec-00", "Jan-01",
    "Feb-01", "Mar-01", "Apr-01", "May-01", "Jun-01", "Jul-01", "Aug-01",
    "Sep-01", "Oct-01", "Nov-01", "Dec-01"};*/

String[] labels = {"330009", "330010", "330011", "330012", "330013", "330014",
    "330015", "330016", "330017", "330018"};

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

//Use a pale yellow background (0xffff80) with a black (0x0) edge and a 1 pixel
//3D border
//c.setBackground(0xffff80, 0x0, 1);
c.setBackground(0xFFFFFF, 0x0, 1);

//Set plotarea at (55, 45) with size of 420 x 200 pixels. Use white (0xffffff)
//background. Enable both horizontal and vertical grid by setting their colors
//to light grey (0xc0c0c0)
c.setPlotArea(55, 45, 420, 200, 0xffffff).setGridColor(0xc0c0c0, 0xc0c0c0);

//Add a legend box at (55, 45) (top of plot area) using 8 pts Arial Bold font
//with horizontal layout Set border and background colors of the legend box to
//Transparent
LegendBox legendBox = c.addLegend(55, 45, false, "arialbd.ttf", 8);
legendBox.setBackground(Chart.Transparent);

//Reserve 10% margin at the top of the plot area during auto-scaling to leave
//space for the legends.
c.yAxis().setAutoScale(0.1);

//Add a title to the chart using 11 pts Arial Bold Italic font. The text is
//white 0xffffff on a dark red 0x800000 background.
ChartDirector.TextBox title = c.addTitle("ASSESSMENT SUMMARY",
    "arialbi.ttf", 11, 0x000000);
//title.setBackground(0x800000, -1, 1);
title.setBackground(0xE1E1E1, -1, 1);

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

//Set the labels on the x axis. Draw the labels vertical (angle = 90)
c.xAxis().setLabels(labels).setFontAngle(90);

//Add a vertical mark at x = 17 using a semi-transparent purple (0x809933ff)
//color and Arial Bold font. Attached the mark (and therefore its label) to the
//top x axis.
Mark mark = c.xAxis2().addMark(17, 0x809933ff, "EMPLOYEE",
    "arialbd.ttf");

//Set the mark line width to 2 pixels
mark.setLineWidth(2);

//Set the mark label font color to purple (0x9933ff)
mark.setFontColor(0x9933ff);

//Add a copyright message at (475, 240) (bottom right of plot area) using Arial
//Bold font
ChartDirector.TextBox copyRight = c.addText(475, 240,
    "(c) Computer Science Co,ltd.", "arialbd.ttf");
copyRight.setAlignment(Chart.BottomRight);

//Add a line layer to the chart
Layer layer = c.addLineLayer();

//Set the default line width to 3 pixels
layer.setLineWidth(3);

//Add the data sets to the line layer
layer.addDataSet(data0, -1, "YEAR 2001");
layer.addDataSet(data1, -1, "YEAR 2002");
layer.addDataSet(data2, -1, "YEAR 2003");

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

//Create an image map for the chart
/*String chartImageMap = c.getHTMLImageMap("XYSTUB.jsp", "",
    "title='{dataSetName} @ {xLabel} = USD {value|0} millions'");*/

String[] labels1 = {"KHANCHAI", "PANTIP", "SUREERAT", "PATRAWUT", "UDOM", "UTUMPORN","SUPPACHOK", "BUNMA", "JARINYA", "ANUCHA"};
c.xAxis().setLabels(labels1).setFontAngle(90);

String chartImageMap = c.getHTMLImageMap("XYSTUB.jsp", "",
    "title='{xLabel} @ score {value|0}'");

//Create an image map for the legend box
String legendImageMap = legendBox.getHTMLImageMap("javascript:doSomething();",
    " ", "title='This legend key is clickable!'");

//Obtain the image map coordinates for the title, mark, and copyright message.
//These will be used to define the image map inline. (See HTML code below.)
String titleCoor = title.getImageCoor();
String markCoor = mark.getImageCoor();
String copyRightCoor = copyRight.getImageCoor();
%>

<html>
<body>
<br>
<br>
<table width="90%" align="center">
  <tr> 
    <td> <h1 align="center"><img src="chart1.chart?no_cache=<%=Chart.getUniqueId()%>" border="0" usemap="#map1"> 
        <map name="map1">
          <%=chartImageMap%> <%=legendImageMap%> 
          <area <%=titleCoor%>  href='javascript:doSomething();'
    title='The title is clickable!'>
          <area <%=markCoor%> href='javascript:doSomething();'
    title='The "Merge with Star Tech" text is clickable!'>
          <area <%=copyRightCoor%> href='javascript:doSomething();'
    title='The copyright text is clickable!'>
        </map>
        <SCRIPT>
function doSomething() {
    /*alert("This is suppose to do something meaningful, but for demo " +
          "purposes, we just pop up this message box to prove that " +
          "the object can response to mouse clicks.");*/
}
</SCRIPT>
      </h1></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>