<jsp:directive.page pageEncoding="UTF-8" />

<og:query command="NEW" stopZero="{@stopZero}">
	SELECT 	 ENAME
			,ROUND( SAL / 2   * DBMS_RANDOM.VALUE ) as SAL1
			,ROUND( SAL / 2.5 * DBMS_RANDOM.VALUE ) as SAL2
	FROM EMP
	<og:where>
		<og:and value=" DEPTNO = {@SOOUID}" />
	</og:where>
</og:query>

<!--
	select CNT_ACCESS as ENAME , substr(DYLOGIN,4,6) as SAL1 , GUIKEY , CNT_ACCESS as SAL2
	from GE15
	where GUIKEY is not null
	and   DYLOGIN >= '20210609080000'
	and   DYLOGIN <= TO_CHAR( TO_DATE( '20210609080000', 'YYYYMMDDHH24MISS' ) + 24/24 , 'YYYYMMDDHH24MISS' )
	order by 1,2
-->

<fieldset style="display:inline-block;" >
	<legend>JavaScript</legend>
	<canvas id="mycanvas" style="width:400px; height:400px;"><!-- --></canvas>
</fieldset>

<script>
	// jsonで取得
	var querydata =
	<og:view
		viewFormType	= "JSON"
		command			= "NEW"
		useHilightRow	= "false"
		useAfterHtmlTag	= "false"
		useConsistency	= "false"
		pageSize		= "0" />
	;

	var datadata1  = [];
	var datadata2  = [];
	var datalabels = [];
	for(var i=0; i < querydata.DATA.length; i++){
		datadata1[i]  = querydata.DATA[i].SAL1;
		datadata2[i]  = querydata.DATA[i].SAL2;
		datalabels[i] = querydata.DATA[i].ENAME;
	}

	var chartdata = {
		labels: datalabels,
		datasets: [{
			label: 'SAL1',		//凡例
			fill: false,		//面の表示
			lineTension: 0.5,	//線のカーブ
			data: datadata1,
			backgroundColor: 	'rgba(255, 99, 132, 0.2)',
			borderColor:		'rgba(255,99,132,1)',
			borderWidth: 1
		},{
			label: 'SAL2',		//凡例
			fill: false,		//面の表示
	//		lineTension: 0.5,	//線のカーブ
			data: datadata2,
			backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56"],
			borderColor:		'rgba(75,192,192,1)',
			borderWidth: 1
		}],
	};

	<og:text>
	var myChart = new Chart( mycanvas,{
					type: 'bar',
					data: chartdata,
					plugins: [chartLabelPlugin],
					options: {
						indexAxis : 'y' ,
						responsive: false ,
						animation : false ,			// false にしないと、Chart.plugins.register で、２回呼ばれる。
						scales:{x:{stacked:true},y:{stacked:true},},
					}
				});
	</og:text>
</script>

<fieldset style="display:inline-block;">
	<legend>jsChart</legend>
	<og:jsChart
		chartType		= "bar"
		indexAxis		= "y"
		labelColumn		= "ENAME"
		title			= "{@chartTitle}"
		optOptions		= "animation:false"
		optTicks		= "color:'black'"
		plugins			= "chartLabelPlugin"
		optLegend		= "onClick:function(event, legendItem, legend){return;}"
		optAxis			= "stacked:true"
	>
		<og:jsChartData
			chartColumn		= "SAL1"
			label			= "{@LBL.SAL}"
			backgroundColor	= "rgba(255, 99, 132, 0.2)"
			borderColor		= "rgba(255,99,132,1)"
			fontColor		= "black"
			tension			= "0.5"
			borderWidth		= "1"
			optAxis			= "stacked:true"
		/>
		<og:jsChartData
			chartColumn		= "SAL2"
			label			= "{@LBL.COMM}"
			backgroundColor	= "#FF6384,#36A2EB,#FFCE56"
			borderColor		= "rgba(75,192,192,1)"
			borderWidth		= "1"
		/>
	</og:jsChart>
</fieldset>
