dbs227
/
YNU_JEUS


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>
		
		
		<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="../../../emr/smmobileweb/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../../emr/smmobileweb/js/highcharts-android.js"></script>
		<script type="text/javascript" src="../../../emr/smmobileweb/js/Soonsu_chart.js"></script>
		
		<!-- 1a) Optional: add a theme file -->
		<!--
			<script type="text/javascript" src="../js/themes/gray.js"></script>
		-->
		
		<!-- 1b) Optional: the exporting module -->
		<script type="text/javascript" src="../../../emr/smmobileweb/js/modules/exporting.js"></script>
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		
			/**
			 * Visualize an HTML table using Highcharts. The top (horizontal) header 
			 * is used for series names, and the left (vertical) header is used 
			 * for category names. This function is based on jQuery.
			 * @param {Object} table The reference to the HTML table to visualize
			 * @param {Object} options Highcharts options
			 */
			Highcharts.visualize = function(table, options) {
				// the categories
				options.xAxis.categories = [];
				$('tbody th', table).each( function(i) {
					options.xAxis.categories.push(this.innerHTML);
				});
				
				// the data series
				options.series = [];
				$('tr', table).each( function(i) {
					var tr = this;
					$('th, td', tr).each( function(j) {
						if (j > 0) { // skip first column
							if (i == 0) { // get the name and init the series
								options.series[j - 1] = { 
									name: this.innerHTML,
									data: []
								};
							} else { // add values
								options.series[j - 1].data.push(parseFloat(this.innerHTML));
							}
						}
					});
				});
				
				var chart = new Highcharts.Chart(options);
			}
			var print = {buttons : null};	
			// On document ready, call visualize on the datatable.
			$(document).ready(function() {			
				var table = document.getElementById('datatable'),
				options = {
					   chart: {
					      renderTo: 'container',
					      defaultSeriesType: 'column'
					   },
					   credits: {
						  enabled: false
						},
						exporting:{buttons : null},
					   title: {
					      text: ''
					   },
					   xAxis: {
					   },
					   yAxis: {
					      title: {
					         text: ''
					      }
					   },
					   tooltip: {
					      formatter: function() {
					         return '<b>'+ this.series.name +'</b><br/>'+
					            this.x.toLowerCase() + ':' + this.y ;
					      }
					   }
					};
				

				Highcharts.visualize(table, options);
			});
		</script>
		
	</head>
	<body scroll="no" topmargin="0" leftmargin="0">
		
		<!-- 3. Add the container -->
		<div id="container" style="width: 450px; height: 275px; margin-left: 0px"></div>
		
		<table id="datatable" style="display:none;">
			<thead>
				<tr>
					<th></th>
					<th>2008년</th>
					<th>2009년</th>
					<th>2010년</th>
					<th>2011년</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>1/4분기</th>
					<td>6000</td>
					<td>15000</td>
					<td>12000</td>
					<td>14000</td>
				</tr>
				<tr>
					<th>2/4분기</th>
					<td>7000</td>
					<td>10000</td>
					<td>9000</td>
					<td>12000</td>
				</tr>
				<tr>
					<th>3/4분기</th>
					<td>8000</td>
					<td>9000</td>
					<td>10000</td>
					<td>11000</td>
				</tr>
				<tr>
					<th>4/4분기</th>
					<td>10000</td>
					<td>8000</td>
					<td>9000</td>
					<td>9500</td>
				</tr>
			
			</tbody>
		</table>
	</body>
</html>