<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
			,ROUND( 30 * DBMS_RANDOM.VALUE ) as BBL_R
			FROM EMP
			<og:where>
				<og:and value=" DEPTNO = {@SOOUID}" />
			</og:where>
</og:query>

<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]  = { x: querydata.DATA[i].SAL1,
						  y : querydata.DATA[i].SAL2,
						  r:querydata.DATA[i].BBL_R }
		datalabels[i] = querydata.DATA[i].ENAME;
	}

	var chartdata = {
		labels: datalabels,
		datasets: [{
			label: 'ENAME',		// 凡例
			fill: false,		// 面の表示
			lineTension: 0.5,	// 線のカーブ
			data: datadata1,
			backgroundColor: 'rgba(255, 99, 132, 0.2)',
			borderColor:	 'rgba(255,99,132,1)',
			borderWidth: 1 ,
		},]
	};

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

<fieldset style="display:inline-block;">
	<legend>jsChart</legend>
	<og:jsChart
		chartType	= "{@chartType}"
		labelColumn	= "ENAME"
		title		= "{@chartTitle}"
		optOptions	= "animation:false"
		optTicks	= "color:'black'"
		plugins		= "chartLabelPlugin"
		optLegend	= "onClick:function(event, legendItem, legend){return;}"
		varColumns	= "SAL2,BBL_R"
	>
		<og:jsChartData
			chartColumn		= "SAL1"
			label			= "{@LBL.ENAME}"
			backgroundColor	= "rgba(255, 99, 132, 0.2)"
			borderColor		= "rgba(255,99,132,1)"
			fontColor		= "black"
			tension			= "0.5"
			borderWidth		= "1"
		/>
	</og:jsChart>
</fieldset>
