<?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="result" useChartJS="true" />
<jsp:directive.include file="/jsp/custom/result_info.jsp" />

<!-- ﾁｬｰﾄ情報の取得 -->
<og:query>
	select substr(DYSET,1,8) as CDATE ,
			abs(MOD(DBMS_RANDOM.RANDOM(),1000))  as NUM ,
			abs(MOD(DBMS_RANDOM.RANDOM(),1000))  as NUM2
	from GF41
	order by DYSET
--	SELECT '20170101' CDATE ,'100' NUM ,200 NUM2	FROM DUAL
--	UNION ALL SELECT '20170102' ,'' ,400	FROM DUAL
--	UNION ALL SELECT '20170103' ,'300' ,600	FROM DUAL
--	UNION ALL SELECT '20170301' ,'-50' ,-100	FROM DUAL
--	UNION ALL SELECT '20170401' ,'124' ,248	FROM DUAL
--	order by 1
</og:query>

<og:jsChart
	chartType		= "{@chartType}"
	height			= "{@height}"
	width			= "{@width}"
	minLabelWidth	= "{@minLabelWidth}"
	labelColumn		= "CDATE"
	title			= "{@chartTitle}"
	useZoom			= "true"
	debug			= "{@debug}"
>
	<og:jsChartData
		chartColumn		= "NUM"
		type			= "{@type}"
		label			= "値１"
	/>
	<og:jsChartData
		chartColumn		= "NUM2"
		label			= "値２"
		tension			= "0"
		borderColor		= "blue"
		backgroundColor	= "orange"
	/>
</og:jsChart>

<pre>
WheelZoom処理を使用 します。

これは、chartjs-plugin-zoom.js を使用します。
マウスホイールで、zoom処理、右クリックで移動(pan)します。
ダブルクリックで元の状態に戻します。
</pre>

<ul>
  <li>zoom:{mode:'xy',wheel:{enabled:true,},pinch:{enabled:true,},},</li>
  <li>pan:{mode:'xy',enabled:true,},</li>
  <li>canvasをクリックでzoomリセット</li>
</ul>

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