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

<og:head headType="query">
	<!-- 8.4.1.1 (2023/02/24) headタグ内に移動 -->
	<style>
		fieldset { border: 1px #0000ff solid; }
		input , select { margin-right: 5px; }
	</style>
</og:head>

<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>
	<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(y軸が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(pie)"				/>
<!--
			<og:option value="sample10"			lbl="sample10(range)"			/>
			<og:option value="sample11"			lbl="sample11(range位置調整)"	/>
-->
			<og:option value="sample10"			lbl="sample10(線ｽﾀｲﾙ変更)"		/>
			<og:option value="sample11"			lbl="sample11(基準線ﾌﾟﾗｸﾞｲﾝ)"	/>
			<og:option value="sample12"			lbl="sample12(wheelZoom)"		/>
			<og:option value="sample13"			lbl="sample13(dragZoom)"		/>
			<og:option value="sample14A"		lbl="sample14A(横ﾃﾞｰﾀ)"			/>
			<og:option value="sample14B"		lbl="sample14B(縦ﾃﾞｰﾀ)"			/>
			<og:option value="sample15"			lbl="sample15(bubble)"			/>
			<og:option value="sample16"			lbl="sample16(scatter)"			/>
			<og:option value="sample99"			lbl="sample99(ﾃｽﾄ用)"			/>
		</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>
	<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" />
			<og:column name="minLabelWidth"	size="4"	td="no" />
		</td>
	</tr>
<!-- 8.1.0.4 (2022/01/28) clickLink廃止、chartLink に変更 -->
<!--
	<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軸(jsChart)用:">
<table>
	<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軸(jsChartData)用:">
<table>
	<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>
	<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 style="vertical-align:top;" >
	<table style="border-collapse: collapse;border:1px solid black;">
		<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="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>						</td><td><a target="RESULT" href="test2E.html" >test2E.html</a>	</td></tr>
		<tr><td>sample3(混合ｸﾞﾗﾌ)		</td><td><a target="RESULT" href="test3.html"  >test3.html</a>	</td></tr>
		<tr><td>sample4(y軸が2軸)		</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>
		<tr><td>						</td><td><a target="RESULT" href="test4C.html" >test4C.html</a>	</td></tr>
	</table>
</td><td style="vertical-align:top;" >
	<table style="border-collapse: collapse;border:1px solid black;">
		<tr><td>sample5(onClick)		</td><td><a target="RESULT" href="test5.html"  >test5.html</a>	</td></tr>
		<tr><td>sample6(timeScale)		</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="test7A.html" >test7A.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="test8A.html" >test8A.html</a>	</td></tr>
		<tr><td>sample8(x軸time)		</td><td><a target="RESULT" href="test8B.html" >test8B.html</a>	</td></tr>
		<tr><td>sample9(pie)			</td><td><a target="RESULT" href="test9.html"  >test9.html</a>	</td></tr>
		<tr><td>sample10(線ｽﾀｲﾙ変更)	</td><td><a target="RESULT" href="test10.html" >test10.html</a>	</td></tr>
		<tr><td>sample11(基準線ﾌﾟﾗｸﾞｲﾝ)	</td><td><a target="RESULT" href="test11A.html">test11A.html</a></td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test11B.html">test11B.html</a></td></tr>
	</table>
</td><td style="vertical-align:top;" >
	<table style="border-collapse: collapse;border:1px solid black;">
		<tr><td>sample12(wheelZoom)		</td><td><a target="RESULT" href="test12A.html" >test12A.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test12B.html" >test12B.html</a>	</td></tr>
		<tr><td>sample13(dragZoom)		</td><td><a target="RESULT" href="test13.html" >test13.html</a>		</td></tr>
		<tr><td>sample14A(横ﾃﾞｰﾀ)		</td><td><a target="RESULT" href="test14A1.html">test14A1.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test14A2.html">test14A2.html</a>	</td></tr>
		<tr><td>sample14B(縦ﾃﾞｰﾀ)		</td><td><a target="RESULT" href="test14B.html" >test14B.html</a>	</td></tr>
		<tr><td>sample15(bubble)		</td><td><a target="RESULT" href="test15A.html" >test15A.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test15B.html" >test15B.html</a>	</td></tr>
		<tr><td>sample16(scatter)		</td><td><a target="RESULT" href="test16A.html" >test16A.html</a>	</td></tr>
		<tr><td>						</td><td><a target="RESULT" href="test16B.html" >test16B.html</a>	</td></tr>
		<tr><td>sample99(ﾃｽﾄ用)			</td><td><a target="RESULT" href="test99.html"  >test99.html</a>	</td></tr>
	</table>
</td></tr>
<tr><td style="vertical-align: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 style="vertical-align:top;" colspan="3">
<a href="https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/basic.html" target="_blank">
https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/basic.html</a>
</td></tr>
<tr><td style="vertical-align:top;" colspan="3">
<a href="https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/charts/line.html" target="_blank">
https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/charts/line.html</a>
</td></tr>
<tr><td style="vertical-align: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 style="vertical-align:top;" colspan="3">
<a href="https://www.tohoho-web.com/ex/chartjs-params.html" target="_blank">
【とほほのChart.js入門】https://www.tohoho-web.com/ex/chartjs-params.html</a>
</td></tr>
</table>
</og:fieldset>

<og:queryButton />
</form>

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