<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root
	xmlns:jsp="http://java.sun.com/JSP/Page"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:og="hybs-taglib.tld"
	version="2.0">
<jsp:directive.page language="java" contentType="text/html; charset=UTF-8" />

<og:head headType="query" />

<style>
	fieldset { border: 1px #0000ff solid; }
	input , select { margin-right: 5px; }
</style>

<jsp:directive.include file="/jsp/custom/query_info.jsp" />
<og:comment
	system	= "GF:エンジンサンプル"
	pgid	= "GF7312"
	title	= "ﾘｱﾙﾁｬｰﾄ２"
	date	= "2017/05/09"
	author	= "T.OTA"
	text	= ""
	version	= "001"
/>

<form method="POST" action="forward.jsp" target="RESULT" onSubmit="timeSet();">

<table border="0" frame="border" summary="form" >
	<tr>
		<og:select name="sample" >
			<og:option value="sample1"			lbl="sample1(属性設定なし)"		/>
			<og:option value="sample2"			lbl="sample2(属性設定あり)"		/>
			<og:option value="sample3"			lbl="sample3(混合ｸﾞﾗﾌ)"			/>
			<og:option value="sample4"			lbl="sample4(ｙ軸が2軸)"		/>
			<og:option value="sample5"			lbl="sample5(onClick)"			/>
			<og:option value="sample6"			lbl="sample6(timeScale)"		/>
			<og:option value="sample7"			lbl="sample7(y軸category)"		/>
			<og:option value="sample8"			lbl="sample8(x軸linear)"		/>
			<og:option value="sample9"			lbl="sample9(ﾃｽﾄ用)"			/>
			<og:option value="sample10"			lbl="sample10(pie)"				/>
<!--
			<og:option value="sample10"			lbl="sample10(range)"			/>
			<og:option value="sample11"			lbl="sample11(range位置調整)"	/>
-->
			<og:option value="sample12"			lbl="sample12(基準線ﾌﾟﾗｸﾞｲﾝ)"	/>
			<og:option value="sample13"			lbl="sample13(wheelZoom)"		/>
			<og:option value="sample14"			lbl="sample14(dragZoom)"		/>
			<og:option value="sample15A"		lbl="sample15A(横ﾃﾞｰﾀ)"			/>
			<og:option value="sample15B"		lbl="sample15B(縦ﾃﾞｰﾀ)"			/>
			<og:option value="sample16"			lbl="sample16(bubble)"			/>
			<og:option value="sample17"			lbl="sample17(scatter)"			/>
		</og:select>
		<og:select name="chartType">
			<og:option value="line"				lbl="line"	selected="selected" />
			<og:option value="bar"				lbl="bar"			/>
	<!--	<og:option value="horizontalBar"	lbl="horizontalBar"	/>		-->
			<og:option value="radar"			lbl="radar"			/>
			<og:option value="polarArea"		lbl="polarArea"		/>
			<og:option value="pie"				lbl="pie"			/>
			<og:option value="doughnut"			lbl="doughnut"		/>
		</og:select>
		<og:column name="width"			size="4"	defaultVal="800px" />
		<og:column name="height"		size="4"	/>
	</tr>
</table>

<og:fieldset lbl="ﾁｬｰﾄﾊﾟﾗﾒｰﾀ用:">
  <table border="0" frame="border" summary="form" >
	<tr>
		<td>　</td>
		<td>
			<og:column name="chartTitle"	defaultVal="{display:true,text:'タイトル',font:{size:20},color:'green',}" td="no"/>
			<og:column name="labelColumn"	value="LABELS"	disabled="disabled"	td="no"/>
			<og:column name="plugins"		value="chartLabelPlugin"	td="no"/>
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:select name="titlePosition" addNoValue="true" td="no">
				<og:option value="top"		lbl="top"	selected="selected"	/>
				<og:option value="bottom"	lbl="bottom"	/>
				<og:option value="left"		lbl="left"		/>
				<og:option value="right"	lbl="right"		/>
			</og:select>
			<og:select name="legendDisplay" addNoValue="true" td="no">
				<og:option value="true"		lbl="true(表示)"	selected="selected"	/>
				<og:option value="false"	lbl="false(非表示)"	/>
			</og:select>
			<og:select name="legendPosition" addNoValue="true" td="no">
				<og:option value="top"		lbl="top"			selected="selected"	/>
				<og:option value="bottom"	lbl="bottom"	/>
				<og:option value="left"		lbl="left"		/>
				<og:option value="right"	lbl="right"		/>
			</og:select>
			<og:column name="usePointStyle"	codeName="BOOLEAN"	defaultVal="true" td="no" />
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:select name="indexAxis" lbl="indexAxis" addNoValue="true" td="no" >
				<og:option value="x"				lbl="x"			/>
				<og:option value="y"				lbl="y"			/>
			</og:select>
			<og:column name="barWidthPer"	size="4" lbl="barWidthPer"	defaultVal="0.5" td="no" />
			<og:column name="animation"		codeName="BOOLEAN"	td="no" />
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="onClick"	size="100"	disabled="disabled"	td="no"
					value="clickLink( event,obj,'result_sample2.jsp?command=RENEW&amp;CLM={CLM}&amp;VAL={VAL}&amp;IDX={IDX}' );"/>
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="optOptions"	size="10"	defaultVal="layout:{padding:2,}"	td="no" />
			<og:column name="optPlugins"	size="10"	defaultVal=""		td="no" />
			<og:column name="optTooltip"	size="10"	defaultVal=""		td="no" />
			<og:column name="optLegend"		size="10"	defaultVal=""		td="no" />
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<hr />
			<og:column name="markValues"	size="10"	defaultVal="9000,5000"		td="no" />
			<og:column name="markColors"	size="10"	defaultVal="RED,BLUE"		td="no" />
			<og:column name="markLbls"		size="10"	defaultVal="基準値,2本目"	td="no" />
			<og:column name="markAdjust"	size="10"	defaultVal="-10,15"			td="no" />
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="xmarkValues"	size="6"	defaultVal="KING"		td="no" />
			<og:column name="xmarkColors"	size="6"	defaultVal="GREEN"		td="no" />
			<og:column name="markWidth"		size="6"	defaultVal="5"			td="no" />
			<og:column name="markDash"		size="6"	defaultVal="[5,2]"		td="no" />
			<og:column name="markFontSize"	size="6"	defaultVal="20"			td="no" />
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="useZoom"			codeName="BOOLEAN"	defaultVal="true"	td="no" />
			<og:column name="useDragZoom"		codeName="BOOLEAN"	defaultVal="false"	td="no" />
			<og:column name="useZeroDataOmit"	codeName="BOOLEAN"	defaultVal="true"	td="no" />
			<og:column name="useRenderer"		codeName="BOOLEAN"	defaultVal="true"	td="no" />
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="valueQuot"			codeName="BOOLEAN"	defaultVal="false"	td="no" />
			<og:column name="sortColumn"		size="10"			defaultVal="JOB"	td="no" />
			<og:column name="varColumns"		size="10"			defaultVal=""		td="no" />
		</td>
	</tr>
  </table>
</og:fieldset>
<br />
<og:fieldset lbl="X軸(jsChartV3)用:">
<table border="0" frame="border" summary="form" >
	<tr>
		<td><og:message lbl="x軸：ﾁｬｰﾄﾊﾟﾗﾒｰﾀ用:" /></td>
		<td>
			<og:select name="xscaleType" addNoValue="true"	td="no" >
				<og:option value="category"	lbl="category"	selected="selected"	/>
				<og:option value="linear"	lbl="linear"	/>
				<og:option value="time"		lbl="time"		/>
				<og:option value="realtime"	lbl="realtime"	/>
			</og:select>
			<og:column name="xlabel"	size="10"	defaultVal="x軸ﾗﾍﾞﾙ"	td="no" />
			<og:select name="xposition" addNoValue="true"	td="no" >
				<og:option value="top"		lbl="top"		/>
				<og:option value="bottom"	lbl="bottom"	selected="selected" />
			</og:select>
		</td>
	</tr>
	<tr>
		<td><og:message lbl="x軸：linearの場合に有効:" /></td>
		<td>
			<og:column name="xscaleCallback"	size="60"	disabled="disabled"	td="no"
					value="function(val, index){return this.getLabelForValue(val) + ' さん';}"/>
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="xbeginAtZero" codeName="BOOLEAN"	td="no" />
			<og:column name="xmax"		size="4"	td="no" />
			<og:column name="xmin"		size="4"	td="no" />
			<og:column name="xstepSize" size="4"	td="no" />
		</td>
	</tr>
	<tr>
		<td><og:message lbl="x軸：独自オプション関係" /></td>
		<td>
			<og:column name="optAxis"	size="10"	defaultVal="stacked:true"	td="no" />
			<og:column name="optTicks"	size="10"	defaultVal="color:'red'"	td="no" />
			<og:column name="optTitle"	size="10"	defaultVal="font:{size:20},color:'blue'"	td="no" />
			<og:column name="optGrid" 	size="10"	defaultVal="borderWidth:20"	td="no" />
		</td>
	</tr>
	<tr>
		<td><og:message lbl="x軸 timeの場合に有効:" /></td>
		<td>
			<og:select name="timeUnit" addNoValue="true"	td="no" >
				<og:option value="year"			lbl="year"		/>
				<og:option value="quarter"		lbl="quarter"	/>
				<og:option value="month"		lbl="month"		/>
				<og:option value="week"			lbl="week"		/>
				<og:option value="day"			lbl="day"	selected="selected"	/>
				<og:option value="hour"			lbl="hour"		/>
				<og:option value="minute"		lbl="minute"	/>
				<og:option value="second"		lbl="second"	/>
	<!--		<og:option value="millsecond"	lbl="millsecond" />	-->
			</og:select>
			<og:column name="timeUnitStepSize"	lbl="unitStepSize"	size="4"	defaultVal="1"				td="no" />
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="timeParser"		lbl="timeParser"	size="15"	defaultVal="yyyyMMddhhmmss"	td="no" />
			<og:column name="timeLblFormat"		lbl="lblFormat"		size="10"	defaultVal="MM/dd"			td="no" />
			<og:column name="tooltipFormat"		lbl="tipsFormat"	size="15"	defaultVal="MM/dd hh:mm:ss"	td="no" />
		</td>
	</tr>
</table>
</og:fieldset>
<br />
<og:fieldset lbl="Y軸(jsChartDataV3)用:">
<table border="0" frame="border" summary="form" >
	<tr>
		<td><og:message lbl="y軸設定用" /></td>
		<td>
			<og:column name="chartColumn"	value="VAL1" size="5"	disabled="disabled"	td="no"/>
			<og:column name="label"		size="5"	defaultVal="給料"	td="no" />
			<og:select name="type" addNoValue="true"	td="no" >
				<og:option value="line"		lbl="line"	selected="selected"	/>
				<og:option value="bar"		lbl="bar"	/>
			</og:select>
			<og:column name="spanGaps"		codeName="BOOLEAN"	defaultVal="true"	td="no" />
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="useAxis"	codeName="BOOLEAN"	td="no" />
			<og:select name="fill" addNoValue="true"	td="no" >
				<og:option value="false"	lbl="単線" selected="selected"	/>
				<og:option value="true"		lbl="塗りつぶし" />
			</og:select>
			<og:select name="tension" addNoValue="true"	td="no" >
				<og:option value="0.4"		lbl="曲線(0.4)"	selected="selected"	 />
				<og:option value="0"		lbl="直線(0(ﾃﾞﾌｫﾙﾄ))" />
			</og:select>
			<og:select name="hidden" addNoValue="true"	td="no" >
				<og:option value="false"	lbl="表示" selected="selected"	/>
				<og:option value="true"		lbl="非表示" />
			</og:select>
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:select name="borderColor" addNoValue="true"	td="no" >
				<og:option value="rgba(0,200,0,0.5)"	lbl="green"	/>
				<og:option value="red"				lbl="red"	selected="selected"	/>
				<og:option value="blue" 			lbl="blue"	/>
				<og:option value="PASTEL"			lbl="パステル" />
				<og:option value="VIVID"			lbl="ビビッド" />
			</og:select>
			<og:column name="borderWidth"	size="4" defaultVal="10"	td="no" />
			<og:column name="borderDash"	size="4" defaultVal="[5,2]"	td="no" />
			<og:select name="backgroundColor" addNoValue="true"	td="no" >
				<og:option value="rgba(0,0,0,0.8)"	lbl="黒" />
				<og:option value="red"				lbl="赤" />
				<og:option value="PASTEL"			lbl="パステル" selected="true" />
				<og:option value="VIVID"			lbl="ビビッド" />
				<og:option value="['lightcoral','skyblue','khaki','lightgreen','plum','coral']" lbl="色分け" />
				<og:option value="['rgba(204,0,0,0.3)','rgba(51,0,204,0.3)','rgba(255,255,0,0.3)','rgba(51,153,51,0.3)','rgba(0,0,0,0.3)']" lbl="色分け(rbga)" />
				<og:option value="rgba(150,150,150,0.5)" lbl="rgba指定" />
			</og:select>
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="pointStyle"	defaultVal="rect"	td="no"
				codeKeyVal="circle:circle triangle:triangle rect:rect rectRot:rectRot cross:cross crossRot:crossRot star:star line:line dash:dash"
			/>
			<og:column name="pointRadius"	size="4"			defaultVal="20"	td="no" />
			<og:column name="showLine"		codeName="BOOLEAN"	defaultVal="true"	td="no" />
			<og:column name="pointBGColor"						defaultVal="[,,'red',,,'red','red']"	td="no" />
		</td>
	</tr>
</table>

<table border="0" frame="border" summary="form" >
	<tr>
		<td><og:message lbl="y軸 ｶﾃｺﾞﾘｰｽｹｰﾙ用" /></td>
		<td>
			<og:select name="position"	addNoValue="true"	td="no" >
				<og:option value="left"		lbl="left"	/>
				<og:option value="right"	lbl="right"	selected="selected"	/>
			</og:select>
			<og:select name="scaleType" 	addNoValue="true"	td="no" >
				<og:option value="linear"		lbl="linear"		/>
				<og:option value="category"		lbl="category"		/>
				<og:option value="logarithmic"	lbl="logarithmic"	selected="selected"	/>
				<og:option value="time"			lbl="time"			/>
				<og:option value="timeseries"	lbl="timeseries"	/>
				<og:option value="realtime"		lbl="realtime"		/>
			</og:select>
			<og:column name="categoryList"	defaultVal="正常,異常,その他"	td="no" />
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="ylabel"	size="10" 	defaultVal="y軸ﾗﾍﾞﾙ"	td="no" />
			<og:column name="beginAtZero" codeName="BOOLEAN"	defaultVal="false"	td="no" />
			<og:column name="grace"		size="6"	defaultVal="10%"	td="no" />
			<og:column name="max"		size="6"	defaultVal="20000"	td="no" />
			<og:column name="min"		size="6"	defaultVal="500"	td="no" />
		</td>
	</tr>
	<tr>
		<td><og:message lbl="y軸 ticks:,grid:" /></td>
		<td>
			<og:column name="fontColor"		size="4" 	defaultVal="blue"	td="no" />
			<og:column name="stepSize"		size="6"	defaultVal="500"	td="no" />
			<og:column name="gridColor"		size="4"	defaultVal="green"	td="no" />
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="scaleCallback"	size="60"	disabled="disabled"	td="no"
					value="function(val, index){return val.toLocaleString() + '円';}"/>
		</td>
	</tr>
	<tr>
		<td><og:message lbl="y軸：独自ｵﾌﾟｼｮﾝ" /></td>
		<td>
			<og:column name="optDataset"	size="10"	defaultVal="clip:20"		td="no" />
			<og:column name="yoptAxis"		size="15"	defaultVal="stacked:false"	td="no" />
			<og:column name="yoptTicks"		size="15"	defaultVal="font:{size:20}"	td="no" />
		</td>
	</tr>
	<tr>
		<td>　</td>
		<td>
			<og:column name="yoptTitle"		size="10"	defaultVal="font:{size:25}"	td="no" />
			<og:column name="yoptGrid"		size="15"	defaultVal="borderWidth:15"	td="no" />
		</td>
	</tr>
</table>
</og:fieldset>
<br />

<og:fieldset lbl="html Sample">
<table><tr><td valign="top" >
	<table border="1" style="border-collapse: collapse">
		<tr><td>sample1(属性設定なし)	</td><td><a target="RESULT" href="test1A.html" >test1A.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test1B.html" >test1B.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test1C.html" >test1C.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test1D.html" >test1D.html</a>	</td></tr>
		<tr><td>sample2(属性設定あり)	</td><td><a target="RESULT" href="test2.html" >test2.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test2A.html" >test2A.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test2B.html" >test2B.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test2C.html" >test2C.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test2D.html" >test2D.html</a>	</td></tr>
		<tr><td>sample3(混合ｸﾞﾗﾌ)		</td><td><a target="RESULT" href="test3.html" >test3.html</a>	</td></tr>
		<tr><td>sample4(ｙ軸が2軸)		</td><td><a target="RESULT" href="test4.html" >test4.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test4A.html" >test4A.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test4B.html" >test4B.html</a>	</td></tr>
	</table>
</td><td valign="top" >
	<table border="1" style="border-collapse: collapse">
		<tr><td>sample5(onClick)		</td><td><a target="RESULT" href="test5.html" >test5.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test5A.html" >test5A.html</a>	</td></tr>
		<tr><td>sample6(timeScale)		</td><td><a target="RESULT" href="test6.html" >test6.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test6A.html" >test6A.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test6B.html" >test6B.html</a>	</td></tr>
		<tr><td>sample7(y軸category)	</td><td><a target="RESULT" href="test7.html" >test7.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test7B.html" >test7B.html</a>	</td></tr>
		<tr><td>sample8(x軸linear)		</td><td><a target="RESULT" href="test8.html" >test8.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test8B.html" >test8B.html</a>	</td></tr>
		<tr><td>sample8(x軸time)		</td><td><a target="RESULT" href="test8C.html" >test8C.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test8D.html" >test8D.html</a>	</td></tr>
		<tr><td>sample9(ﾃｽﾄ用)			</td><td><a target="RESULT" href="test9.html" >test9.html</a>	</td></tr>
	</table>
</td><td valign="top" >
	<table border="1" style="border-collapse: collapse">
		<tr><td>sample12(基準線ﾌﾟﾗｸﾞｲﾝ)	</td><td><a target="RESULT" href="test12.html" >test12.html</a>		</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test12B.html" >test12B.html</a>	</td></tr>
		<tr><td>sample13(x軸拡大)		</td><td><a target="RESULT" href="test13.html" >test13.html</a>		</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test13A.html" >test13A.html</a>	</td></tr>
		<tr><td>sample14(zoom)			</td><td><a target="RESULT" href="test14.html" >test14.html</a>		</td></tr>
		<tr><td>sample15A(横ﾃﾞｰﾀ)		</td><td><a target="RESULT" href="test15A.html" >test15A.html</a> ※ Edgeのみ</td></tr>
		<tr><td>sample15B(縦ﾃﾞｰﾀ)		</td><td><a target="RESULT" href="test15B.html" >test15B.html</a> ※ Edgeのみ</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test15C.html" >test15C.html</a> ※ Edgeのみ</td></tr>
		<tr><td>sample16(bubble)		</td><td><a target="RESULT" href="test16.html" >test16.html</a>		</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test16B.html" >test16B.html</a>	</td></tr>
		<tr><td>sample17(scatter)		</td><td><a target="RESULT" href="test17.html" >test17.html</a>		</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test17B.html" >test17B.html</a>	</td></tr>
	</table>
</td></tr>
<tr><td valign="top" colspan="3">
<a href="https://www.chartjs.org/docs/latest/samples/bar/vertical.html" target="_blank">
https://www.chartjs.org/docs/latest/samples/bar/vertical.html</a>
</td></tr>
<tr><td valign="top" colspan="3">
<a href="https://www.chartjs.org/chartjs-plugin-zoom/samples/basic.html" target="_blank">
https://www.chartjs.org/chartjs-plugin-zoom/samples/basic.html</a>
</td></tr>
<tr><td valign="top" colspan="3">
<a href="https://www.chartjs.org/chartjs-plugin-annotation/samples/types/line.html" target="_blank">
https://www.chartjs.org/chartjs-plugin-annotation/samples/types/line.html</a>
</td></tr>
<tr><td valign="top" colspan="3">
<a href="https://nagix.github.io/chartjs-plugin-streaming/latest/samples/charts/line-horizontal.html" target="_blank">
https://nagix.github.io/chartjs-plugin-streaming/latest/samples/charts/line-horizontal.html</a>
</td></tr>
<tr><td valign="top" colspan="3">
<a href="https://www.chartjs.org/docs/latest/getting-started/v3-migration.html" target="_blank">
https://www.chartjs.org/docs/latest/getting-started/v3-migration.html</a>
</td></tr>
</table>
</og:fieldset>

<og:queryButton />
</form>

<jsp:directive.include file="/jsp/common/htmlend.jsp" />
</jsp:root>
