<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'X', 'Y','Z'],
['Jan', 20,50,26],
['Feb', 76, 82.5, 0],
['Mar', 81, 75, 0],
['Apr', 43, 82.5, 0],
['May', 92, 92, 0],
['Jun', 92, 78, 0],
['Jul', 76, 44, 0],
['Aug', 59, 54, 0],
['Sep', 40, 78, 0],
['Out', 40, 78, 0],
['Nov', 73, 78, 100],
['Dec', 81, 78, 100],
]);
var options = {
chart: {
title: 'Total CHART YEAR:2021',
subtitle: 'Test',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<form id="frm1" name="frm1" method="post" action="">
<div id="columnchart_material" style="width: 490px; height: 250px;"></div>
<table width="600" border="1" id="customers">
<tr>
<td width="57" rowspan="2">Item</td>
<td width="34" rowspan="2" align="center">Description</td>
<td colspan="13" align="center">Year 2021</td>
</tr>
<tr>
<td width="36">Jan</td>
<td width="37">Feb</td>
<td width="38">Mar</td>
<td width="36">Apr</td>
<td width="39">May</td>
<td width="37">Jun</td>
<td width="33">Jul</td>
<td width="37">Aug</td>
<td width="37">Sep</td>
<td width="38">Oct</td>
<td width="37">Nov</td>
<td width="38">Dec</td>
<td width="43">Avg</td>
</tr>
<tr>
<td>1</td>
<td>Test 1</td>
<td rowspan="2" valign="bottom"><input name="test1_score_jan" type="text" id="test1_score_jan" size="1" value=""/></td>
<td rowspan="2" valign="bottom"><input name="test1_score_feb" type="text" id="test1_score_feb" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test1_score_mar" type="text" id="test1_score_mar" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test1_score_apr" type="text" id="test1_score_apr" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test1_score_may" type="text" id="test1_score_may" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test1_score_jun" type="text" id="test1_score_jun" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test1_score_jul" type="text" id="test1_score_jul" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test1_score_aug" type="text" id="test1_score_aug" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test1_score_sep" type="text" id="test1_score_sep" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test1_score_oct" type="text" id="test1_score_oct" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test1_score_nov" type="text" id="test1_score_nov" size="1" value=""/></td>
<td rowspan="2" valign="bottom"><input name="test1_score_dec" type="text" id="test1_score_dec" size="1" value=""/></td>
<td rowspan="2" valign="bottom"><input name="test1_score_avg" type="text" id="test1_score_avg" size="3"/></td>
</tr>
<tr>
<td> </td>
<td>Score</td>
</tr>
<tr>
<td> </td>
<td>Grade</td>
<td><input name="test1_grade_jan" type="text" id="test1_grade_jan" size="1" value=""/></td>
<td><input name="test1_grade_feb" type="text" id="test1_grade_feb" size="1" /></td>
<td><input name="test1_grade_mar" type="text" id="test1_grade_mar" size="1" /></td>
<td><input name="test1_grade_apr" type="text" id="test1_grade_apr" size="1" /></td>
<td><input name="test1_grade_may" type="text" id="test1_grade_may" size="1" /></td>
<td><input name="test1_grade_jun" type="text" id="test1_grade_jun" size="1" /></td>
<td><input name="test1_grade_jul" type="text" id="test1_grade_jul" size="1" /></td>
<td><input name="test1_grade_aug" type="text" id="test1_grade_aug" size="1" /></td>
<td><input name="test1_grade_sep" type="text" id="test1_grade_sep" size="1" /></td>
<td><input name="test1_grade_oct" type="text" id="test1_grade_oct" size="1" /></td>
<td><input name="test1_grade_nov" type="text" id="test1_grade_nov" size="1" value=""/></td>
<td><input name="test1_grade_dec" type="text" id="test1_grade_dec" size="1" value=""/></td>
<td><input name="test1_grade_avg" type="text" id="test1_grade_avg" size="3"/></td>
</tr>
<tr>
<td>2</td>
<td>Test 2</td>
<td rowspan="2" valign="bottom"><input name="test2_score_jan" type="text" id="test2_score_jan" size="1" value=""/></td>
<td rowspan="2" valign="bottom"><input name="test2_score_feb" type="text" id="test2_score_feb" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test2_score_mar" type="text" id="test2_score_mar" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test2_score_apr" type="text" id="test2_score_apr" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test2_score_may" type="text" id="test2_score_may" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test2_score_jun" type="text" id="test2_score_jun" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test2_score_jul" type="text" id="test2_score_jul" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test2_score_aug" type="text" id="test2_score_aug" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test2_score_sep" type="text" id="test2_score_sep" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test2_score_oct" type="text" id="test2_score_oct" size="1" /></td>
<td rowspan="2" valign="bottom"><input name="test2_score_nov" type="text" id="test2_score_nov" size="1" value=""/></td>
<td rowspan="2" valign="bottom"><input name="test2_score_dec" type="text" id="test2_score_dec" size="1" value=""/></td>
<td rowspan="2" valign="bottom"><input name="test2_score_avg" type="text" id="test2_score_avg" size="3"/></td>
</tr>
<tr>
<td> </td>
<td>Score</td>
</tr>
<tr>
<td> </td>
<td>Grade</td>
<td>
<input name="test2_grade_jan" type="text" id="test2_grade_jan" size="1" />
</td>
<td>
<input name="test2_grade_feb" type="text" id="test2_grade_feb" size="1" />
</td>
<td>
<input name="test2_grade_mar" type="text" id="test2_grade_mar" size="1" />
</td>
<td>
<input name="test2_grade_apr" type="text" id="test2_grade_apr" size="1" />
</td>
<td>
<input name="test2_grade_may" type="text" id="test2_grade_may" size="1" />
</td>
<td>
<input name="test2_grade_jun" type="text" id="test2_grade_jun" size="1" />
</td>
<td>
<input name="test2_grade_jul" type="text" id="test2_grade_jul" size="1" />
</td>
<td>
<input name="test2_grade_aug" type="text" id="test2_grade_aug" size="1" />
</td>
<td>
<input name="test2_grade_sep" type="text" id="test2_grade_sep" size="1" />
</td>
<td>
<input name="test2_grade_oct" type="text" id="test2_grade_oct" size="1" />
</td>
<td>
<input name="test2_grade_nov" type="text" id="test2_grade_nov" size="1" value=""/>
</td>
<td>
<input name="test2_grade_dec" type="text" id="test2_grade_dec" size="1" value=""/>
</td>
<td>
<input name="test2_grade_avg" type="text" id="test2_grade_avg" size="1" value=""/>
</td>
</tr>
<tr>
<td>3</td>
<td>Test3</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_jan" type="text" id="test3_score_jan" size="1" value=""/>
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_feb" type="text" id="test3_score_feb" size="1" />
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_mar" type="text" id="test3_score_mar" size="1" />
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_apr" type="text" id="test3_score_apr" size="1" />
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_may" type="text" id="test3_score_may" size="1" />
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_jun" type="text" id="test3_score_jun" size="1" />
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_jul" type="text" id="test3_score_jul" size="1" />
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_aug" type="text" id="test3_score_aug" size="1" />
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_sep" type="text" id="test3_score_sep" size="1" />
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_oct" type="text" id="test3_score_oct" size="1" />
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_nov" type="text" id="test3_score_nov" size="1" value=""/>
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_dec" type="text" id="test3_score_dec" size="1" value=""/>
</td>
<td rowspan="2" valign="bottom">
<input name="test3_score_avg" type="text" id="test3_score_avg" size="1" value=""/>
</td>
</tr>
<tr>
<td> </td>
<td>Score</td>
</tr>
<tr>
<td> </td>
<td>Grade</td>
<td>
<input name="test3_grade_jan" type="text" id="test3_grade_jan" size="1" />
</td>
<td>
<input name="test3_grade_feb" type="text" id="test3_grade_feb" size="1" />
</td>
<td>
<input name="test3_grade_mar" type="text" id="test3_grade_mar" size="1" />
</td>
<td>
<input name="test3_grade_apr" type="text" id="test3_grade_apr" size="1" />
</td>
<td>
<input name="test3_grade_myr" type="text" id="test3_grade_myr" size="1" />
</td>
<td>
<input name="test3_grade_jun" type="text" id="test3_grade_jun" size="1" />
</td>
<td>
<input name="test3_grade_jul" type="text" id="test3_grade_jul" size="1" />
</td>
<td>
<input name="test3_grade_aug" type="text" id="test3_grade_aug" size="1" />
</td>
<td>
<input name="test3_grade_sep" type="text" id="test3_grade_sep" size="1" />
</td>
<td>
<input name="test3_grade_oct" type="text" id="test3_grade_oct" size="1" />
</td>
<td>
<input name="test3_grade_nov" type="text" id="test3_grade_nov" size="1" value=""/>
</td>
<td>
<input name="test3_grade_dec" type="text" id="test3_grade_dec" size="1" value=""/>
</td>
<td>
<input name="test3_grade_avg" type="text" id="test3_grade_avg" size="1" value=""/>
</td>
</tr>
</table>
</form>
</body>
</html>