<?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 ENAME LABELS
			,SAL VAL1
			,COMM VAL2
		FROM BONUS
		order by 1
	</og:query>
	
	<!-- 注：optionAttributes属性にscales項目を設定すると、
	jsChartﾀｸﾞのmax,min,0ｽﾀｰﾄ(beginAtZero）がﾘｾｯﾄされるため、
	optionAttributes内で再設定する必要があります -->
	<og:jsChart
		chartType	= "bar"
		height		= "{@height}"
		width		= "{@width}"
		max			= "{@max}"
		min			= "{@min}"
		labelColumn	= "LABELS"
		optionAttributes = "
			scales:{
				yAxes:[{
					ticks:{beginAtZero:true
						}},
					{
					position: 'right'
					,id:'y2'
					,ticks:{beginAtZero:true
						,fontColor:'blue'}
				}]
			}"
		debug="{@debug}"
	>
	<og:jsChartData
			chartColumn			= "VAL1"
			label				= "給料"
			borderColor			= "green"
			optionAttributes	= "
				type:'line' , fill:false"
			 />
	<!-- optionAttributes属性のyAxisIDと、
	jsCahrtﾀｸﾞoptionAttributes属性のidが紐づきます。
	yAxisIDが指定されていない場合は、1つ目の属性が設定されます。 -->
		<og:jsChartData
			chartColumn			= "VAL2"
			label				= "裁量手当"
			borderColor			= "blue"
			optionAttributes	= "
				 type:'bar' , yAxisID:'y2'"
		 />
	</og:jsChart>
</jsp:root>