<?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" />

	<!-- ﾁｬｰﾄ情報の取得 -->
	<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}"
		max					= "{@max}"
		min					= "{@min}"
		stepSize			= "{@stepSize}"
		barWidthPer			= "{@barWidthPer}"
		timeUnit			= "{@timeUnit}"
		timeUnitStepSize	= "{@timeUnitStepSize}"
		timeSetFormat		= "{@timeSetFormat}"
		timeLblFormat		= "{@timeLblFormat}"
		timeMax				= "{@timeMax}"
		timeMin				= "{@timeMin}"
		labelColumn			= "CDATE"
		title				= "{@chartTitle}"
		titlePosition		= "{@titlePosition}"
		ylabel				= "{@ylabel}"
		xlabel				= "{@xlabel}"
		legendDisplay		= "{@legendDisplay}"
		legendPosition		= "{@legendPosition}"
		xscaleType			= "{@xscaleType}"
		yscaleType			= "{@yscaleType}"
		ycategoryList		= "{@ycategoryList}"
		useZoom				= "true"
		optionAttributes	= ""
		debug				= "{@debug}"
	>
		<og:jsChartData
			chartColumn			= "NUM"
			label				= "値１"
			fill				= "{@fill}"
			tension				= "{@tension}"
			borderColor			= "{@borderColor}"
			borderWidth			= "{@borderWidth}"
			backgroundColor		= "{@backgroundColor}"
			optionAttributes	= ""
		 />
		<og:jsChartData
			chartColumn			= "NUM2"
			label				= "値２"
			fill				= "{@fill}"
			tension				= "0"
			borderColor			= "blue"
			borderWidth			= "{@borderWidth}"
			backgroundColor		= "orange"
			optionAttributes	= ""
		 />
	</og:jsChart>
<div style="color:red;">x軸の表示したい範囲をドラッグで拡大します。ダブルクリックで解除します。(x軸がｶﾃｺﾞﾘｰｽｹｰﾙの場合は無効です)</div>
<pre>
	実装方法：
	プラグイン「chartjs-plugin-zoom.js」を読み込み、
	og:jsChartﾀｸﾞのoptionAttributesﾀｸﾞに下記を設定。
	zoom:{
			enabled: true
			,drag: true
		}
	※ﾀﾞﾌﾞﾙｸﾘｯｸで解除はｶｽﾀﾏｲｽﾞで実装。
</pre>
</jsp:root>