<?php
require_once("../lib/phpchartdir.php");

#Random number generator to create 301 values
$rantable = new RanTable(1, 1, 301);
$rantable->setCol(0, 100, -1, 1);
$data = $rantable->getCol(0);

#compute X and R in group of 3
$noOfGroups = (int)(count($data) / 3);
for ($i = 0; $i < $noOfGroups; ++$i) {
	$subgroup = new ArrayMath(array($data[3 * $i], $data[3 * $i + 1], $data[3 * $i + 2]));
	$X[] = $subgroup->avg();
	$R[] = $subgroup->max() - $subgroup->min();
}

$mR = new ArrayMath($R);
$mR = $mR->avg();
$mRUCL = 2.574 * $mR;
$mRLCL = 0.00;
$XBar = new ArrayMath($X);
$XBar = $XBar->avg();
$XUCL = $XBar + 1.023 * $mR;
$XLCL = $XBar - 1.023 * $mR;

#Create a XYChart object of size 600 x 550 pixels, with a pale yellow (0xffff80)
#background, a black border, and 1 pixel 3D border effect
$c = new XYChart(600, 550, 0xffff80, 0x0, 1);

#Set the plotarea at (55, 45) and of size 470 x 210 pixels, with white
#background. Turn on both horizontal and vertical grid lines with light grey
#color (eeeeee)
$c->setPlotArea(55, 45, 470, 210, 0xffffff, -1, -1, 0xeeeeee, -1);

#Add a title box to the chart using 11 pts Arial Bold Italic font. The text is
#white (0xffffff) on a dark red (0x800000) background, with a 1 pixel 3D border.
$t = $c->addTitle("X Bar R", "arialbi.ttf", 11, 0xffffff);
$t->setBackground(0x800000, -1, 1);

#Configure the axes
$c->xAxis->setTitle("Subgroup");
$c->xAxis->setLinearScale(0, count($X) - 1);
$c->yAxis->setTitle("Individual Value");

#Add a line layer to the chart for the data
$layer = $c->addLineLayer($X, 0xff);

#Put the xBar, UCL, LCL on the left y-axis
$c->syncYAxis();
$t = $c->yAxis2->setLabelStyle();
$t->setFontColor(Transparent);
$c->yAxis2->addMark($XBar, 0x8000, $c->formatValue($XBar, "Xbar:{value|2}"));
$c->yAxis2->addMark($XUCL, 0xcc0000, $c->formatValue($XUCL, "UCL:{value|2}"));
$c->yAxis2->addMark($XLCL, 0xcc0000, $c->formatValue($XLCL, "LCL:{value|2}"));

#Create another chart object for the range chart
$c2 = new XYChart(600, 270, Transparent);

#Set the plotarea at (55, 15) and of size 470 x 210 pixels, with white
#background. Turn on both horizontal and vertical grid lines with light grey
#color (0xc0c0c0)
$c2->setPlotArea(55, 15, 470, 210, 0xffffff, -1, -1, 0xeeeeee, -1);

#Configure the axes
$c2->xAxis->setLinearScale(0, count($R) - 1);
$c2->setXAxisOnTop();
$c2->yAxis->setTitle("Moving Range");

#Add a line layer to the chart for the range
$layer = $c2->addLineLayer($R, 0xff);
$layer->addDataSet(array($mRUCL));

#Put the mR, UCL, LCL on the left y-axis
$c2->syncYAxis();
$t = $c2->yAxis2->setLabelStyle();
$t->setFontColor(Transparent);
$c2->yAxis2->addMark($mR, 0x8000, $c->formatValue($mR, "mR:{value|2}"));
$c2->yAxis2->addMark($mRUCL, 0xcc0000, $c->formatValue($mRUCL, "UCL:{value|2}"));
$c2->yAxis2->addMark(0, 0xcc0000, "LCL:0.00");

#merge this second chart into the first chart
$d = $c->makeChart3();
$d->merge($c2->makeChart3(), 0, 300, TopLeft, 0);

# output the chart
header("Content-type: image/png");
print($c->makeChart2(PNG));
?>

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@page import="ChartDirector.*" %>
<%
	//Random number generator to create 301 values
	RanTable rantable = new RanTable(1, 1, 301);
	rantable.setCol(0, 100, -1, 1);
	double[] data = rantable.getCol(0);
	
	//compute X and R in group of 3
	int noOfGroups = data.length / 3;
	double[] X = new double[noOfGroups];
	double[] R = new double[noOfGroups];
	for (int i = 0; i < noOfGroups; ++i) {
	    ArrayMath subgroup = new ArrayMath(new double[] {data[3 * i], data[3 * i + 1], data[3 * i + 2]});
	    X[i] = subgroup.avg();
	    R[i] = subgroup.max() - subgroup.min();
	}
	
	double mR = new ArrayMath(R).avg();
	double mRUCL = 2.574 * mR;
	double mRLCL = 0.00;
	double XBar = new ArrayMath(X).avg();
	double XUCL = XBar + 1.023 * mR;
	double XLCL = XBar - 1.023 * mR;

	//Create a XYChart object of size 600 x 550 pixels, with a pale yellow (0xffff80)
	//background, a black border, and 1 pixel 3D border effect
	XYChart c = new XYChart(600, 550, 0xffff80, 0x0, 1);
	
	//Set the plotarea at (55, 45) and of size 470 x 210 pixels, with white
	//background. Turn on both horizontal and vertical grid lines with light grey
	//color (eeeeee)
	c.setPlotArea(55, 45, 470, 210, 0xffffff, -1, -1, 0xeeeeee, -1);
	
	//Add a title box to the chart using 11 pts Arial Bold Italic font. The text is
	//white (0xffffff) on a dark red (0x800000) background, with a 1 pixel 3D border.
	c.addTitle("X Bar R", "arialbi.ttf", 11, 0xffffff).setBackground(0x800000, -1, 1);
	
	//Configure the axes
	c.xAxis().setTitle("Subgroup");
	c.xAxis().setLinearScale(0, X.length - 1);
	c.yAxis().setTitle("Individual Value");
	
	//Add a line layer to the chart for the data
	LineLayer layer = c.addLineLayer(X, 0xff);
	
	//Put the xBar, UCL, LCL on the left y-axis
	c.syncYAxis();
	c.yAxis2().setLabelStyle().setFontColor(Chart.Transparent);
	c.yAxis2().addMark(XBar, 0x8000, "Xbar:" + (Math.round(XBar * 100) / 100.0));
	c.yAxis2().addMark(XUCL, 0xcc0000, "UCL:" + (Math.round(XUCL * 100) / 100.0));
	c.yAxis2().addMark(XLCL, 0xcc0000, "LCL:" + (Math.round(XLCL * 100) / 100.0));
	
	//Create another chart object for the range chart
	XYChart c2 = new XYChart(600, 270, Chart.Transparent);
	
	//Set the plotarea at (55, 15) and of size 470 x 210 pixels, with white
	//background. Turn on both horizontal and vertical grid lines with light grey
	//color (0xc0c0c0)
	c2.setPlotArea(55, 15, 470, 210, 0xffffff, -1, -1, 0xeeeeee, -1);
	
	//Configure the axes
	c2.xAxis().setLinearScale(0, R.length - 1);
	c2.setXAxisOnTop();
	c2.yAxis().setTitle("Moving Range");
	
	//Add a line layer to the chart for the range
	layer = c2.addLineLayer(R, 0xff);
	layer.addDataSet(new double[] {mRUCL});
	
	//Put the mR, UCL, LCL on the left y-axis
	c2.syncYAxis();
	c2.yAxis2().setLabelStyle().setFontColor(Chart.Transparent);
	c2.yAxis2().addMark(mR, 0x8000, "mR:" + (Math.round(mR * 100) / 100.0));
	c2.yAxis2().addMark(mRUCL, 0xcc0000, "UCL:" + (Math.round(mRUCL * 100) / 100.0));
	c2.yAxis2().addMark(0, 0xcc0000, "LCL:0.00");
	
	//merge this second chart into the first chart
	c.makeChart3().merge(c2.makeChart3(), 0, 300, Chart.TopLeft, 0);

	// Output the chart
	String chart1URL = c.makeSession(request, "chart1");
%>
<html>
<body style="margin:5px 0px 0px 5px">
<img src='<%=response.encodeURL("getchart.jsp?"+chart1URL)%>' border="0">
</body>
</html>