YNU_JEUS/app_home/Soonsu/emr/smmobileweb/js/Soonsu_chart.js

//차트를 선택하여 포현한다.
function dataCharPicture()
{
	var arArg = arguments;
	if (arArg.length <= 0)
	{
		return;
	}
	switch (arArg[0])
	{
		case "line":
		{
			dataCharPicture_line(arArg[1], arArg[3], arArg[4], arArg[5], arArg[6],  arArg[7], arArg[2]);
			break;
		}
		case "column":
		{
			dataCharPicture_column(arArg[1], arArg[3], arArg[4], arArg[5], arArg[6],  arArg[7], arArg[2]);
			break;
		}
		case "pie":
		{
			dataCharPicture_pie(arArg[1], arArg[3], arArg[4], arArg[5], arArg[6],  arArg[7], arArg[2]);
			break;
		}
	}
}
//line으로 그려준다.
function dataCharPicture_line()
{
	var arArg = arguments;
	if (arArg.length <= 0)
	{
		return;
	}
	if (null != arArg[4] && null != arArg[5])
	{
		var heCont = document.getElementById("container");
		heCont.style.width = parseInt(arArg[4]) + "px";
		heCont.style.height = parseInt(arArg[5]) + "px";
	}
	var objPrint = arArg[0]?{}:{buttons : null};
	var strTitle = arArg[1];
	var arCategories = arArg[2].split("^");
	var arSeries = new Array();
	var arSeqData = arArg[3].split("|");
	var arStatus  = new Array();
	for (var i=0; i<arSeqData.length; i++)
	{
		var arStrList = arSeqData[i].split("^");
		var strName = arStrList[0];
		var arData = new Array();
		for (var j=1; j<arStrList.length; j++)
		{
			if ("" == arStrList[j])
			{
				arData.push(null);
				
				//arCategories = arCategories.slice(j-1,j-1);
			}
			else
			{
				if (isNaN(parseFloat(arStrList[j])))
				{
					arData.push(null);
					//arCategories = arCategories.slice(j-1,j-1);
				}
				else
				{
					arData.push(parseFloat(arStrList[j]));
					arStatus[j-1] = true;
				}
			}
		}
		arSeries.push({
				name: strName,
				data: arData
			});
	}
	var nDataLength = arCategories.length;
	var ntempCnt = 0;
	for (var i=0; i<nDataLength; i++)
	{
		if (!arStatus[i])
		{
			arCategories.splice(ntempCnt,1);
			for (var j=0; j<arSeries.length; j++)
			{
				arSeries[j].data.splice(ntempCnt,1);
			}
			
		}
		else
		{
			ntempCnt++;
		}
	}

	$(document).ready(function() {
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container',
				defaultSeriesType: 'line',
				marginRight: 130,
				marginBottom: 25
			},
			credits: {
				enabled: false
			},
			exporting:objPrint,
			title: {
				text: arArg[6],
				x: -20 //center
			},
			subtitle: {
				text: '',
				x: -20
			},
			xAxis: {
				categories: arCategories
			},
			yAxis: {
				title: {
					text: strTitle
				},
				plotLines: [{
					value: 0,
					width: 1,
					color: '#808080'
				}]
			},
			tooltip: {
				formatter: function() {
						return '<b>'+ this.series.name +'</b><br/>'+
						this.x +': '+ this.y ;
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -10,
				y: 100,
				borderWidth: 0
			},
			series: arSeries
		});
	});
}
//column 그려준다
function dataCharPicture_column()
{
	var arArg = arguments;
	if (arArg.length <= 0)
	{
		return;
	}
	if (null != arArg[4] && null != arArg[5])
	{
		var heCont = document.getElementById("container");
		heCont.style.width = parseInt(arArg[4]) + "px";
		heCont.style.height = parseInt(arArg[5]) + "px";
	}
	var objPrint = arArg[0]?{}:{buttons : null};
	var strTitle = arArg[1];
	var heTable = document.getElementById("datatable");
	document.body.removeChild(heTable);
	heTable = document.createElement("table");
	var heHead = document.createElement("thead");
	var heBody = document.createElement("tbody");
	
	heTable.id = "datatable";
	heTable.style.display = "none";
	heTable.appendChild(heHead);
	heTable.appendChild(heBody);
	for (var i=2; i<4; i++)
	{
		if (2 == i)
		{
			var arData = arArg[i].split("^");
			var heTr = document.createElement("tr");
			heHead.appendChild(heTr);
			heTr.appendChild(document.createElement("th"));
			for (var j=0; j<arData.length; j++)
			{
				var heTh = document.createElement("th");
				heTh.innerHTML = arData[j];
				heTr.appendChild(heTh);
			}
		}
		else
		{
			var arSeqData = arArg[i].split("|");
		   for (var k=0; k<arSeqData.length; k++)
		   {
			
			var arData = arSeqData[k].split("^");
			var heTr = document.createElement("tr");
			heBody.appendChild(heTr);
			for (var j=0; j<arData.length; j++)
			{
				if (0 == j)
				{
					var heTh = document.createElement("th");
					heTh.innerHTML = arData[j];
					heTr.appendChild(heTh);
				}
				else
				{
					var heTd = document.createElement("td");
					heTd.innerHTML = arData[j];
					heTr.appendChild(heTd);
				}
			}
			}
		}
	}
	document.body.appendChild(heTable);
	$(document).ready(function() {			
		var table = document.getElementById('datatable'),
		options = {
			   chart: {
				  renderTo: 'container',
				  defaultSeriesType: 'column'
			   },
				credits: {
				  enabled: false
				},
				exporting:objPrint,
			   title: {
				  text: arArg[6]
			   },
			   xAxis: {
			   },
			   yAxis: {
				  title: {
					 text: strTitle
				  }
			   },
			   tooltip: {
				  formatter: function() {
					 return '<b>'+ this.series.name +'</b><br/>'+
						  this.x.toLowerCase() + ':' + this.y ;
				  }
			   }
			};
		Highcharts.visualize(table, options);
	});
	
}

//pie으로 그려준다.
function dataCharPicture_pie()
{
	var arArg = arguments;
	if (arArg.length <= 0)
	{
		return;
	}
	if (null != arArg[4] && null != arArg[5])
	{
		var heCont = document.getElementById("container");
		heCont.style.width = parseInt(arArg[4]) + "px";
		heCont.style.height = parseInt(arArg[5]) + "px";
	}
	var objPrint = arArg[0]?{}:{buttons : null};
	var strTitle = arArg[1];
	var arCategories = arArg[2].split("^");
	var arSeries = new Array();
	var arSeqData = arArg[3].split("|");
	var arDataMatrix = new Array();
	for (var i=0; i<arSeqData.length; i++)
	{
		var arStrList = arSeqData[i].split("^");
		arDataMatrix.push(arStrList);
	}
	var arData = new Array();
	for (var i=0; i<arCategories.length; i++)
	{
		var arPieData = new Array();
		var nTotal = 0;
		for (var j=0; j<arSeqData.length; j++)
		{
			nTotal += parseFloat(arDataMatrix[j][i+1]);
		}
		if (0 == i)
		{
			arData.push({
					name : arCategories[i],
					y : nTotal,
					sliced: true,
					selected: true
				}
			);
		}
		else
		{
			arPieData.push(arCategories[i]);
			arPieData.push(nTotal);
			arData.push(arPieData);
		}
	}
	arSeries.push({
				type: 'pie',
				name: strTitle,
				data: arData
			});
	$(document).ready(function() {
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container',
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false
			},
			credits: {
				enabled: false
			},
			exporting:objPrint,
			title: {
				text: arArg[6]
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						color: '#000000',
						connectorColor: '#000000',
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y ;
						}
					}
				}
			},
			series:arSeries,
			tooltip: {
				formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y ;
				}
			}
		});
	});
}

function dataCharPicture_combo()
{
	var arArg = arguments;
	if (arArg.length <= 0)
	{
		return;
	}
	var objPrint = arArg[0]?{}:{buttons : null};
	var strTitle = arArg[1];
	var arCategories = arArg[2].split("^");
	var arSeries = new Array();
	var arSeqData = arArg[3].split("|");
	var arDataMatrix = new Array();
	for (var i=0; i<arSeqData.length; i++)
	{
		var arStrList = arSeqData[i].split("^");
		arDataMatrix.push(arStrList);
	}
	var arData = new Array();
	for (var i=0; i<arCategories.length; i++)
	{
		var arPieData = new Array();
		var nTotal = 0;
		for (var j=0; j<arSeqData.length; j++)
		{
			nTotal += parseInt(arDataMatrix[j][i+1]);
		}
		if (0 == i)
		{
			arData.push({
					name : arCategories[i],
					y : nTotal,
					sliced: true,
					selected: true
				}
			);
		}
		else
		{
			arPieData.push(arCategories[i]);
			arPieData.push(nTotal);
			arData.push(arPieData);
		}
	}
	arSeries.push({
				type: 'pie',
				name: strTitle,
				data: arData
			});
	$(document).ready(function() {
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container'
			},
			title: {
				text: 'Combination chart'
			},
			xAxis: {
				categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
			},
			tooltip: {
				formatter: function() {
					var s;
					if (this.point.name) { // the pie chart
						s = ''+
							this.point.name +': '+ this.y +' fruits';
					} else {
						s = ''+
							this.x  +': '+ this.y;
					}
					return s;
				}
			},
			labels: {
				items: [{
					html: 'Total fruit consumption',
					style: {
						left: '40px',
						top: '8px',
						color: 'black'				
					}
				}]
			},
			series: [{
				type: 'column',
				name: 'Jane',
				data: [3, 2, 1, 3, 4]
			}, {
				type: 'column',
				name: 'John',
				data: [2, 3, 5, 7, 6]
			}, {
				type: 'column',
				name: 'Joe',
				data: [4, 3, 3, 9, 0]
			}, {
				type: 'spline',
				name: 'Average',
				data: [3, 2.67, 3, 6.33, 3.33]
			}, {
				type: 'pie',
				name: 'Total consumption',
				data: [{
					name: 'Jane',
					y: 13,
					color: '#4572A7' // Jane's color
				}, {
					name: 'John',
					y: 23,
					color: '#AA4643' // John's color
				}, {
					name: 'Joe',
					y: 19,
					color: '#89A54E' // Joe's color
				}],
				center: [100, 80],
				size: 100,
				showInLegend: false,
				dataLabels: {
					enabled: false
				}
			}]
		});
	});
}