<?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" >
	<script type="text/javascript">
		// ﾁｬｰﾄを動的に更新
		function clickLink(){
			// idにchart1を設定した場合
			// 目盛のﾗﾍﾞﾙを変更
			cd_chart1.labels[0] = '変更';
			// x軸のﾗﾍﾞﾙを変更
			chart_chart1.options.scales.xAxes[0].scaleLabel.labelString = 'x軸ラベル変更';
			
			// ﾁｬｰﾄの更新ﾒｿｯﾄﾞを呼び出し
			chart_chart1.update();
		}
	</script>
</og:head>

	<button onclick="clickLink();">チャート更新</button>

	<!-- ﾁｬｰﾄ情報の取得 -->
	<og:query command="NEW">
		SELECT ENAME LABELS
			,SAL VAL1
			,COMM VAL2
		FROM BONUS
		order by 1
	</og:query>
	
	
<!-- 一番ｼﾝﾌﾟﾙな形式
	<og:jsChart
		chartType			= "{@chartType}"
		labelColumn			= "LABELS"
		debug				= "{@debug}"
	>
		<og:jsChartData
				chartColumn			= "VAL1"
				 />
	</og:jsChart>
-->
	<!-- 全ての属性を設定した形式 -->
	<og:jsChart
		id					= "chart1"
		chartType			= "{@chartType}"
		height				= "{@height}"
		width				= "{@width}"
		max					= "{@max}"
		min					= "{@min}"
		stepSize			= "{@stepSize}"
		timeUnit			= "{@timeUnit}"
		timeUnitStepSize	= "{@timeUnitStepSize}"
		timeSetFormat		= "{@timeSetFormat}"
		timeLblFormat		= "{@timeLblFormat}"
		timeMax				= "{@timeMax}"
		timeMin				= "{@timeMin}"
		labelColumn			= "LABELS"
		title				= "{@title}"
		titlePosition		= "{@titlePosition}"
		ylabel				= "{@ylabel}"
		xlabel				= "xLabel"
		legendDisplay		= "{@legendDisplay}"
		legendPosition		= "{@legendPosition}"
		xscaleType			= "{@xscaleType}"
		xmax				= "{@xmax}"
		xmin				= "{@xmin}"
		xstepSize			= "{@xstepSize}"
		yscaleType			= "{@yscaleType}"
		ycategoryList		= "{@ycategoryList}"
		yscaleCallback		= "function(value){return value.toLocaleString() + '円';}"
		xscaleCallback		= "function(value){return value + ' さん';}"
		optionAttributes	= ""
		debug				= "{@debug}"
	>
	<og:jsChartData
			chartColumn			= "VAL1"
			label				= "給料"
			fill				= "{@fill}"
			tension				= "{@tension}"
			borderColor			= "{@borderColor}"
			borderWidth			= "{@borderWidth}"
			backgroundColor		= "{@backgroundColor}"
			optionAttributes	= ""
			 />
	</og:jsChart>
</jsp:root>