var svgDrawing = {
	chart : function(options){
		var chartObj = new Object();
		chartObj.dataset = options["dataset"];
		chartObj.chartDiv = options["chartDiv"];
		chartObj.type = options["type"];
		chartObj.width = options["svgSize"]["width"];
		chartObj.height = options["svgSize"]["height"];
		chartObj.offsets = options["offsets"];
		chartObj.baseFont = 12;
		
		//var svgW = chartObj.width;
		//var svgH = chartObj.height;

		switch (chartObj.type)
        {
            case ('bar') : 
            case ('bar_base') : 
				if (options["maxValue"]) chartObj.max = options["maxValue"];
				if (options["minValue"]) chartObj.min = options["minValue"];
				
				this.bar.drawSvg(chartObj, chartObj.width, chartObj.height);
                break;
            case ('pieType0') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieType0.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;
            case ('pieType0_2017') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieType0_2017.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;
            case ('pieType1') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieType1.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;
            case ('pieType2') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieType2.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;	
            case ('pieType1_2017') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieType1_2017.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;
			case ('triangle') :
				if (chartObj.dataset["colorset"]) chartObj.colorset = chartObj.dataset["colorset"];

				this.triangle.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;
            case ('pieTypeSingle_01') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieTypeSingle_01.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;				
            case ('pieTypeSingle_02') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieTypeSingle_02.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;				
            case ('pieTypeSingle_03') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieTypeSingle_03.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;	
            case ('pieTypeSingle_04') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieTypeSingle_04.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;
            case ('pieTypeSingle_05') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieTypeSingle_05.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;				
            case ('pieTypeSingle_06') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieTypeSingle_06.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;				
            case ('pieTypeSingle_07') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieTypeSingle_07.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;	
            case ('pieTypeSingle_08') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieTypeSingle_08.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;	
            case ('pieTypeSingle_09') :
				if (chartObj.dataset["resultPer"]) chartObj.percents = chartObj.dataset["resultPer"];
				if (chartObj.dataset["radiusWieght"]) chartObj.radiusW = chartObj.dataset["radiusWieght"];
				if (chartObj.dataset["radius"]) chartObj.radius = chartObj.dataset["radius"];
				
				this.pieTypeSingle_09.drawSvg(chartObj, chartObj.width, chartObj.height);
				break;	
        }
	},
	bar : {
		drawSvg : function(chartObj, svgW, svgH){			
			var offsetLeft = chartObj.offsets['left'];
			var offsetRight = chartObj.offsets['right'];
			var offsetTop = chartObj.offsets['top'];
			var chartW = chartObj.width - offsetLeft - offsetRight;
			var valArr = [];

			var barH = chartObj.dataset['bar']['barHeight'];
			var ratingsH = chartObj.dataset['bar']['ratingsHeight'];

			var g = Raphael(chartObj.chartDiv, svgW, svgH);
			g.add([
				{
					type : "rect",
					x : 0,
					y : 0,
					width : svgW,
					height : svgH,
					'stroke-width' : 0,
					'stroke-linecap' : 'square'
				},
				{
					type : "text",
					x : offsetLeft-20,
					y : offsetTop + 10,
					text : chartObj.dataset['title'],
					fill:'#373636',
					'font' : '700 '+ 1*chartObj.baseFont +'px NanumSquare'
				}/*,
				{
					type : "text",
					x : offsetLeft,
					y : offsetTop - 10,
					text : chartObj.min,
					'font' : '700 '+ 0.9*chartObj.baseFont +'px NanumSquare'
				},
				{
					type : "text",
					x : svgW - offsetRight,
					y : offsetTop - 10,
					text : chartObj.max,
					'font' : '700 '+ 0.9*chartObj.baseFont +'px NanumSquare'
				}*/
			]);
			
			if (chartObj.type == 'bar'){
				 var bgGrid = g.rect( offsetLeft, offsetTop, chartW, barH+ratingsH).attr({ //dataNum
					'stroke' : "#979a9c",
					 'stroke-width' : 1,
					 'stroke-linecap' : 'square'
				});
				var bgMin = g.text( offsetLeft, offsetTop - 10, chartObj.min).attr({ //dataNum
					'font' : '700 '+ 0.9*chartObj.baseFont +'px NanumSquare'
				});
				var bgMax = g.text( svgW - offsetRight, offsetTop - 10, chartObj.max).attr({ //dataNum
					'font' : '700 '+ 0.9*chartObj.baseFont +'px NanumSquare'
				});
			}else if(chartObj.type == 'bar_base'){
				var bgGrid = g.rect( offsetLeft, offsetTop, chartW, barH+ratingsH).attr({ //dataNum
					'fill' : "#d3d3d3",
					 'stroke-width' : 0,
					 'stroke-linecap' : 'square'
				});
			}
				
			
			for (var i =0; i < chartObj.dataset['values'].length ; i++ ){
				valArr[i] = chartObj.dataset['values'][i] - chartObj.min
				valArr[i] = valArr[i].toFixed(1);
			};

			var x1 = offsetLeft,
				y1 = offsetTop + barH,
				gage = chartW / valArr[valArr.length-1],
				prevW,
				boxW,
				boxH = ratingsH;
			
			for (var i =0; i < valArr.length ; i++ ){
				
				if ( i == 0 ){
					x1 = x1;
					boxW = gage * valArr[i];
				}else{
					x1 += prevW;
					boxW = gage * (valArr[i] - valArr[i-1]);
				}
				prevW = boxW;
				if (chartObj.type == 'bar'){
					g.rect( x1, y1, boxW, boxH).attr({
						'fill' : chartObj.dataset['colorset'][i],
						'stroke-width' : 0
					});
					g.text( x1 + boxW/2, y1 + boxH/2, chartObj.dataset['ratings'][i]).attr({
						'text-anchor' : 'middle',
						'font' : '700 '+ 1*chartObj.baseFont +'px NanumSquare'
					});
				}else if (chartObj.type == 'bar_base'){
					g.rect( x1, offsetTop, boxW, boxH).attr({
						'fill' : chartObj.dataset['colorset'][i],
						'stroke-width' : 0
					});
					g.text( x1 + boxW/2, offsetTop - boxH/2-3, chartObj.dataset['ratings'][i]).attr({
						'text-anchor' : 'middle',
						'fill':"#373636",
						'font' : '700 '+ 1*chartObj.baseFont +'px NanumSquare'
					});
				}
				if (chartObj.type == 'bar'){
					if ( i !== valArr.length-1){
						g.text( x1 + boxW -5, y1 + boxH + 15, chartObj.dataset['values'][i]).attr({
							'text-anchor' : 'middle',
							'font' : '700 '+ 0.85*chartObj.baseFont +'px NanumSquare',
						}).rotate(-45, x1 + boxW, y1 + boxH)
					}
				}
			}

			var dataNum = (chartObj.dataset['result'] - chartObj.min) * gage;
			var tipGab = 5;
			var resultRating = chartObj.dataset['resultRatings'];
			var strokeColor = chartObj.dataset['colorset'].reverse()[resultRating-1]
			if ( strokeColor == undefined) strokeColor = "#fff";
			
			if (chartObj.type == 'bar'){
			// 점수 게이지
				 var dataLine = g.rect( offsetLeft, offsetTop, 0, barH).attr({ //dataNum
					 'stroke-width' : 0,
					 'fill' : '#bcbdc0'
				 });
			}else if(chartObj.type == 'bar_base'){
				var dataLine = g.rect( offsetLeft, y1, 0, barH).attr({ //dataNum
					 'stroke-width' : 0,
					 'fill' : '#000'
				 });
			}
			
			if (chartObj.type == 'bar'){
				// 툴팁 - 점수
				var tipArea;
				function dataTip(g){
					var resulteL = offsetLeft + dataNum;
					var tipText = chartObj.dataset['result']+"Pts.";   
					var tipWidth = tipText.length<8?13*7:tipText.length*8 ;
					var tipbox = g.rect(resulteL -(tipWidth/2), offsetTop -45, tipWidth, 30).attr({
							r : 7,
							'fill' : '#fff',
							'stroke' : strokeColor,
							'stroke-width' : 3,
							'stroke-linecap' : 'round'
						});

					var tipPath = g.path([
							"M" + (resulteL-6) +","+  (offsetTop-17) +"l"+7+" "+7+"l"+ 6 +" "+ (-7)
						]).attr({
								'fill' : '#fff',
								'stroke' : strokeColor,
								'stroke-width' : 3,
								'stroke-linecap' : 'square',
								'rotate' : 45
							});
					
					var tipbox2 = g.rect(resulteL-10, offsetTop-19, 20, 2).attr({
							'fill' : '#fff',
							'stroke-width' : 0
						});
					
					if(chartObj.dataset['scoreFlag'] == "Y"){				

						var tipText = g.text(resulteL, offsetTop -30, tipText).attr({ 
								'font' : '900 '+ 1.5*chartObj.baseFont +'px NanumSquare',
								'fill' : '#323537'
							})
					}
					
					var tip = g.set();
					tip.push(tipbox, tipPath, tipbox2, tipText)
					tipArea = tip;
					
					return tip;
				};
					dataTip(g);
				
				// 타이틀 등급
				
				function titRating(g){
					var titNum;
					if (resultRating == "0" || resultRating == "N/A"){
						titNum = g.text( svgW - 55 - (offsetRight/2), svgH/2+18, "N/A").attr({
							'font' : '700 '+ 2.55*chartObj.baseFont +'px NanumSquare',
							'fill' : '#373636'
						});
					}else{
						titNum = g.text( svgW - 45 - (offsetRight/2), svgH/2+13, resultRating).attr({
							'font' : '700 '+ 4.4*chartObj.baseFont +'px NanumSquare',
							'fill' : '#373636'
						});
					}	
					var txtRating = g.text( svgW - (offsetRight/2)+5, svgH/2+18, "Grade").attr({     
						'font' : '700 '+ 2.6*chartObj.baseFont +'px NanumSquare',
						'fill' : '#000'
					})
					
					var title = g.set();
					title.push(titNum, txtRating)
					
					return title;
				};
			

				function dataPlay(){
					dataLine.animate({
						'width' : dataNum
					}, 1500, ">");
					tipArea.transform('t-'+dataNum +','+ 0).animate({
						'transform' : 't0,0'
					}, 1500, ">");
				}
			dataPlay();
			}else if (chartObj.type == 'bar_base'){
				function dataPlay(){
					dataLine.animate({
						'width' : dataNum
					}, 1500, ">");
				}
				dataPlay();
			}
		}
	},
	pieType0 : {
		drawSvg : function(chartObj, svgW, svgH){
			var g = Raphael(chartObj.chartDiv, svgW, svgH);
			g.add([
				{
					type : "rect",
					x : 0,
					y : 0,
					width : svgW,
					height : svgH,
					'stroke-width' : 0,
					'stroke-linecap' : 'square'
				}
			]);
			var colorSet = chartObj.dataset['colorset'].reverse();
			var size = chartObj.dataset['title'].length;
			for (var i=0; i < size; i++){			
				var arcR = chartObj.radius,
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i];
					//resultNum = chartObj.dataset['result'][i]
					

				var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
				var startX = cirL;
				var startY = chartObj.offsets['top'] + arcR ;

				var grade = chartObj.dataset['resultGrade'][i];
				var color = "#fff" ;
				if (grade >= 1 && grade <= 5){  
					color = colorSet[grade-1];
				}

				g.customAttributes.arc = function (xloc, yloc, value, total, R) {
					var alpha = 360 / total * value,
						a = (90 - alpha) * Math.PI / 180,
						x = xloc + R * Math.cos(a),
						y = yloc - R * Math.sin(a),
						path;
					if (total == value) {
						path = [
							["M", xloc, yloc - R],
							["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
						];
					} else {
						path = [
							["M", xloc, yloc - R],
							["A", R, R, 0, +(alpha > 180), 1, x, y]
						];
					}
					return {
						path: path
					};
				};

				var bgCircle;
				function drawbase(g){
					if(i != size-1){
						var circleOut = g.circle(startX, startY, arcR+0.5).attr({
							'fill' : '#d3d3d3',
							'stroke' : "#fff",
							'stroke-width' : 0,
							'stroke-linecap' : 'round'
						});
						var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
							'fill' : '#ededed',
							'stroke' : "#fff",
							'stroke-width' : 0,
							'stroke-linecap' : 'round'
						});
					}else{
						var circleOut = g.circle(startX, startY, arcR+0.5).attr({
							'fill' : '#dfdcda',
							'stroke' : "#fff",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});
					}
					var base = g.set();
					base.push(circleOut, circleIn);
					bgCircle = base;
					
					return bgCircle;
				};
				
				drawbase(g);

				var my_arc = g.path().attr({
					"stroke": color,
					"stroke-width": rW,
					arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
				});
				
				if(arcTit.length > 20){
                   arcTit = arcTit.replace(" ", "\n");  
                }
				var my_title = g.text(startX, 110, arcTit).attr({
					fill:"#363635",
					'font' : '700 '+ 1*chartObj.baseFont +'px NanumSquare'
				});
				
				if(i != size-1){
					var my_val = g.text(startX, startY, dataVal+"%").attr({
						fill:"#363635",
						'font' : '700 '+ 1.1*chartObj.baseFont +'px NanumSquare'
					});
				}else{
					var my_val = g.text(startX, startY, "+"+dataVal).attr({
						fill:"#363635",
						'font' : '700 '+ 1.1*chartObj.baseFont +'px NanumSquare'
					});
				}
				//var my_val02 = g.text(startX, startY+13, "("+resultNum+"점)").attr({
				//	'font' : '500 '+ 0.9*chartObj.baseFont +'px NanumSquare'
				//});
				if(i != size-1){
					my_arc.animate({
						arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
					}, 1500, "bounce");
				}
			}
		}
	},
	pieType0_2017 : {
		drawSvg : function(chartObj, svgW, svgH){		
			var g = Raphael(chartObj.chartDiv, svgW, svgH);
			g.add([
				{
					type : "rect",
					x : 0,
					y : 0,
					width : svgW,
					height : svgH,
					'stroke-width' : 0,
					'stroke-linecap' : 'square'
				}
			]);
			var colorSet = chartObj.dataset['colorset'].reverse();
			var size = chartObj.dataset['title'].length;
			
			Raphael.fn.star = function(x, y, r) {
			    var path = "M" + x + "," + (y - r);
			    for (var c = 0; c < 6; c += 1) {
			        var angle = 270 + c * 144,
			            rx = x + r * Math.cos(angle * Math.PI / 180),
			            ry = y + r * Math.sin(angle * Math.PI / 180);
			
			        path += "L" + rx + "," + ry;
			    }    
			    return g.path(path);
			};
			
			var starCount = chartObj.dataset["starCount"];
			
			for (var i=0; i < size; i++){			
				var arcR = chartObj.radius,
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i];
					//resultNum = chartObj.dataset['result'][i]					
				
				var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
				var startX = cirL;
				var startY = chartObj.offsets['top'] + arcR ;
				
				var grade = chartObj.dataset['resultGrade'][i];
				var color = "#fff" ;
				if (grade >= 1 && grade <= 5){  
					color = colorSet[grade-1];
				}
		
				g.customAttributes.arc = function (xloc, yloc, value, total, R) {
					var alpha = 360 / total * value,
						a = (90 - alpha) * Math.PI / 180,
						x = xloc + R * Math.cos(a),
						y = yloc - R * Math.sin(a),
						path;
					if (total == value) {
						path = [
							["M", xloc, yloc - R],
							["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
						];
					} else {
						path = [
							["M", xloc, yloc - R],
							["A", R, R, 0, +(alpha > 180), 1, x, y]
						];
					}
					return {
						path: path
					};
				};

				var bgCircle;
				function drawbase(g){
					if(i != size-1){
						var circleOut = g.circle(startX, startY, arcR+0.5).attr({
							'fill' : '#d3d3d3',
							'stroke' : "#fff",
							'stroke-width' : 0,
							'stroke-linecap' : 'round'
						});
						var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
							'fill' : '#ededed',
							'stroke' : "#fff",
							'stroke-width' : 0,
							'stroke-linecap' : 'round'
						});
					}else{
						var circleOut = g.circle(startX, startY, arcR+0.5).attr({
							'fill' : '#dfdcda',
							'stroke' : "#fff",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});
					}
					var base = g.set();
					base.push(circleOut, circleIn);
					bgCircle = base;
					
					return bgCircle;
				};
				
				drawbase(g);

				var my_arc = g.path().attr({
					"stroke": color,
					"stroke-width": rW,
					arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
				});
				
				if(arcTit.length > 20){
                   arcTit = arcTit.replace(" ", "\n");  
                }
				var my_title = g.text(startX, 110, arcTit).attr({
					fill:"#363635",
					'font' : '700 '+ 1*chartObj.baseFont +'px NanumSquare'
				});
				
				if(i != size-1){
					var my_val = g.text(startX, startY, "").attr({
						fill:"#363635",
						'font' : '700 '+ 1.1*chartObj.baseFont +'px NanumSquare'
					});
				}else{
					var my_val = g.text(startX, startY, "").attr({
						fill:"#363635",
						'font' : '700 '+ 1.1*chartObj.baseFont +'px NanumSquare'
					});
				}
				//var my_val02 = g.text(startX, startY+13, "("+resultNum+"점)").attr({
				//	'font' : '500 '+ 0.9*chartObj.baseFont +'px NanumSquare'
				//});
				if(i != size-1){
					my_arc.animate({
						arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
					}, 1500, "bounce");
				}
				
				
				function drawStar(score,colorKey){
	                if(i != size-1){
	                    for(e = 0 ; e<score ;e++){
	                        var starW = 6;
	                        var posX = (startX-(score/2*(starW*2)-12))+((starW*2)*e-1);
	                        g.star(posX-5, 53, starW).attr({
	                            fill: colorKey, 
	                            'stroke-width': 0
	                        });
	                    }
	                }
	            }
	            
	            
	            
				//if(resultNum != '-'){
					var color = "#fff" ;
					if ( starCount[i] == "1"){
						color = colorSet[4];
						drawStar(1,color);
					}else if (starCount[i] == "2"){
						color = colorSet[3];
						drawStar(2,color);
					}else if (starCount[i] == "3"){
						color = colorSet[2];
						drawStar(3,color);
					}else if (starCount[i] == "4"){
						color = colorSet[1];
						drawStar(4,color);
					}else if (starCount[i] == "5"){
						color = colorSet[0];
						drawStar(5,color);
					}
				//}	
				
			}
		}
	}, 
	pieType1 : {
	drawSvg : function(chartObj, svgW, svgH){
			var g = Raphael(chartObj.chartDiv, svgW, svgH);
			console.log(g);
			g.add([
				{
					type : "rect",
					x : 0,
					y : 0,
					width : svgW,
					height : svgH,
					'stroke-width' : 0,
					'stroke-linecap' : 'square'
				}
			]);
			var colorSet = chartObj.dataset['colorset'].reverse();
			var size = chartObj.dataset['title'].length;
			
			Raphael.fn.star = function(x, y, r) {
			    var path = "M" + x + "," + (y - r);
			    for (var c = 0; c < 6; c += 1) {
			        var angle = 270 + c * 144,
			            rx = x + r * Math.cos(angle * Math.PI / 180),
			            ry = y + r * Math.sin(angle * Math.PI / 180);
			
			        path += "L" + rx + "," + ry;
			    }    
			    return g.path(path);
			};
			
			var starCount = chartObj.dataset["starCount"];
			for (var i=0; i < size ; i++){			
				var arcR = chartObj.radius
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i],
					resultNum = chartObj.dataset['result'][i]
					

				var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
				var startX = cirL;
				var startY = chartObj.offsets['top'] + arcR ;

	        function drawStar(score,colorKey){
                if(i != size-1){
                    for(e = 0 ; e<score ;e++){
                        var starW = 10;
                        var posX = (startX-(score/2*(starW*2)-12))+((starW*2)*e-1);
                        g.star(posX, 200, starW).attr({
                            fill: colorKey, 
                            'stroke-width': 0
                        });
                    }
                }
            }
            
            
            
			if(resultNum != '-'){
				var color = "#fff" ;
				if ( starCount[i] == "1"){
					color = colorSet[4];
					drawStar(1,color);
				}else if (starCount[i] == "2"){
					color = colorSet[3];
					drawStar(2,color);
				}else if (starCount[i] == "3"){
					color = colorSet[2];
					drawStar(3,color);
				}else if (starCount[i] == "4"){
					color = colorSet[1];
					drawStar(4,color);
				}else if (starCount[i] == "5"){
					color = colorSet[0];
					drawStar(5,color);
				}
			}	
				
				g.customAttributes.arc = function (xloc, yloc, value, total, R) {
					var alpha = 360 / total * value,
						a = (90 - alpha) * Math.PI / 180,
						x = xloc + R * Math.cos(a),
						y = yloc - R * Math.sin(a),
						path;
					if (total == value) {
						path = [
							["M", xloc, yloc - R],
							["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
						];
					} else {
						path = [
							["M", xloc, yloc - R],
							["A", R, R, 0, +(alpha > 180), 1, x, y]
						];
					}
					return {
						path: path
					};
				};

				var bgCircle;
				function drawbase(g){
					var circleOut = g.circle(startX, startY, arcR+0.5).attr({
						'fill' : '#fff',
						'stroke' : "#000",
						'stroke-width' : 1,
						'stroke-linecap' : 'round'
					});
					var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
						'fill' : '#fff',
						'stroke' : "#000",
						'stroke-width' : 1,
						'stroke-linecap' : 'round'
					});

					var base = g.set();
					base.push(circleOut, circleIn)
					bgCircle = base
					
					return bgCircle;
				};
				if(i != size-1){
					drawbase(g);
				}

				var my_arc = g.path().attr({
					"stroke": color,
					"stroke-width": rW,
					arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
				});
				
				if(arcTit.length > 20){
				   arcTit = arcTit.replace(" ", "\n");  
				}
			//	var my_title = g.text(startX, 25, arcTit).attr({
			//		fill:"#373636",
			//		'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
			//	});
				if(i != size-1 || size == 1){					
					var my_val = g.text(startX, startY-32, dataVal+"%").attr({
						fill:"#373636",
						'font' : '900 '+ 1.7*chartObj.baseFont +'px NanumSquare'
					});
					var my_val02 = g.text(startX, startY-25, resultNum+"Pts.").attr({      
						fill:"#a0a0a0",
						'font' : '900 '+ 0.7*chartObj.baseFont +'px NanumSquare'
					});
				}else{
					var plus_val0 = g.text(startX, 65, "Safety Assist").attr({       
						fill:"#373636",
						'font' : '500 '+ 1*chartObj.baseFont +'px NanumSquare'
					});
					if(dataVal[0] == "" || dataVal[0] == null ){
						dataVal[0] ="-";
					}else{
						dataVal[0] = "+"+dataVal[0]+"Pts."         
					}
					var plus_val1 = g.text(startX, 87, dataVal[0]).attr({
						fill:"#373636",
						'font' : '900 '+ 1.3*chartObj.baseFont +'px NanumSquare'
					});
					var plus_val2 = g.path( ["M", startX- 50, 108, "L", startX+50, 108 ]).attr({
						'stroke' : "#dcd1d1",
						'stroke-width' : 2,
					});
					
					var plus_val3 = g.text(startX, 130, "Side Pole Impact").attr({          
						fill:"#373636",
						'font' : '500 '+ 1*chartObj.baseFont +'px NanumSquare'
					});
					if(dataVal[1] == "" || dataVal[1] == null ){
						dataVal[1] ="-";
					}else{
						dataVal[1] = "+"+dataVal[1]+"Pts."         
					}
					var plus_val4 = g.text(startX, 160, dataVal[1]).attr({
						fill:"#373636",
						'font' : '900 '+ 1.3*chartObj.baseFont +'px NanumSquare'
					});
					
				}
				
				if(i != size-1 || size == 1){ 
					console.log(startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2));
					my_arc.animate({
						arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
					}, 1500, "bounce");
				}
				
			}
		}
	},
	pieType2 : {
		drawSvg : function(chartObj, svgW, svgH){
				var g = Raphael(chartObj.chartDiv, svgW, svgH);
				g.add([
					{
						type : "rect",
						x : 0,
						y : 0,
						width : svgW,
						height : svgH,
						'stroke-width' : 0,
						'stroke-linecap' : 'square'
					}
				]);
				var colorSet = chartObj.dataset['colorset'].reverse();
				var size = chartObj.dataset['title'].length;
				
				Raphael.fn.star = function(x, y, r) {
				    var path = "M" + x + "," + (y - r);
				    for (var c = 0; c < 6; c += 1) {
				        var angle = 270 + c * 144,
				            rx = x + r * Math.cos(angle * Math.PI / 180),
				            ry = y + r * Math.sin(angle * Math.PI / 180);
				
				        path += "L" + rx + "," + ry;
				    }    
				    return g.path(path);
				};
				
				var starCount = chartObj.dataset["starCount"];
				for (var i=0; i < size ; i++){			
					var arcR = chartObj.radius
						rW = chartObj.radiusW,
						startVal = 0,
						totalVal = 100,
						dataVal = chartObj.percents[i],
						arcTit = chartObj.dataset['title'][i],
						resultNum = chartObj.dataset['result'][i]
						

					var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
					var startX = cirL;
					var startY = chartObj.offsets['top'] + arcR ;

		        function drawStar(score,colorKey){
	                if(i != size-1){
	                    for(e = 0 ; e<score ;e++){
	                        var starW = 10;
	                        var posX = (startX-(score/2*(starW*2)-12))+((starW*2)*e-1);
	                        g.star(posX, 200, starW).attr({
	                            fill: colorKey, 
	                            'stroke-width': 0
	                        });
	                    }
	                }
	            }
	            
	            
	            
				if(resultNum != '-'){
					var color = "#fff" ;
					if ( starCount[i] == "1"){
						color = colorSet[4];
						drawStar(1,color);
					}else if (starCount[i] == "2"){
						color = colorSet[3];
						drawStar(2,color);
					}else if (starCount[i] == "3"){
						color = colorSet[2];
						drawStar(3,color);
					}else if (starCount[i] == "4"){
						color = colorSet[1];
						drawStar(4,color);
					}else if (starCount[i] == "5"){
						color = colorSet[0];
						drawStar(5,color);
					}
				}	
					
					g.customAttributes.arc = function (xloc, yloc, value, total, R) {
						var alpha = 360 / total * value,
							a = (90 - alpha) * Math.PI / 180,
							x = xloc + R * Math.cos(a),
							y = yloc - R * Math.sin(a),
							path;
						if (total == value) {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
							];
						} else {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, +(alpha > 180), 1, x, y]
							];
						}
						return {
							path: path
						};
					};

					var bgCircle;
					function drawbase(g){
						var circleOut = g.circle(startX, startY, arcR+0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});
						var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});

						var base = g.set();
						base.push(circleOut, circleIn)
						bgCircle = base
						
						return bgCircle;
					};
					if(i != size-1){
						drawbase(g);
					}

					var my_arc = g.path().attr({
						"stroke": color,
						"stroke-width": rW,
						arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
					});
					
					if(arcTit.length > 20){
					   arcTit = arcTit.replace(" ", "\n");  
					}
					var my_title = g.text(startX, 25, arcTit).attr({
						fill:"#373636",
						'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
					});
					if(i != size-1){
						var my_val = g.text(startX, startY-5, dataVal+"%").attr({
							fill:"#373636",
							'font' : '900 '+ 1.3*chartObj.baseFont +'px NanumSquare'
						});
						var my_val02 = g.text(startX, startY+13, "("+resultNum+"Pts.)").attr({      
							fill:"#373636",
							'font' : '500 '+ 0.9*chartObj.baseFont +'px NanumSquare'
						});
					}else{
						var plus_val0 = g.text(startX, 65, "Safety Assist").attr({       
							fill:"#373636",
							'font' : '500 '+ 1*chartObj.baseFont +'px NanumSquare'
						});
						if(dataVal[0] == "" || dataVal[0] == null ){
							dataVal[0] ="-";
						}else{
							dataVal[0] = "+"+dataVal[0]+"Pts."         
						}
						var plus_val1 = g.text(startX, 87, dataVal[0]).attr({
							fill:"#373636",
							'font' : '900 '+ 1.3*chartObj.baseFont +'px NanumSquare'
						});
						var plus_val2 = g.path( ["M", startX- 50, 108, "L", startX+50, 108 ]).attr({
							'stroke' : "#dcd1d1",
							'stroke-width' : 2,
						});
						
						
						
					}
					
					if(i != size-1){
						my_arc.animate({
							arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
						}, 1500, "bounce");
					}
					
				}
			}
		},
	pieType1_2017 : {
		drawSvg : function(chartObj, svgW, svgH){
				var g = Raphael(chartObj.chartDiv, svgW, svgH);
				g.add([
					{
						type : "rect",
						x : 0,
						y : 0,
						width : svgW,
						height : svgH,
						'stroke-width' : 0,
						'stroke-linecap' : 'square'
					}
				]);
				var colorSet = chartObj.dataset['colorset'].reverse();
				var size = chartObj.dataset['title'].length;
				
				Raphael.fn.star = function(x, y, r) {
				    var path = "M" + x + "," + (y - r);
				    for (var c = 0; c < 6; c += 1) {
				        var angle = 270 + c * 144,
				            rx = x + r * Math.cos(angle * Math.PI / 180),
				            ry = y + r * Math.sin(angle * Math.PI / 180);
				
				        path += "L" + rx + "," + ry;
				    }    
				    return g.path(path);
				};
				
				var starCount = chartObj.dataset["starCount"];
				for (var i=0; i < size ; i++){			
					var arcR = chartObj.radius
						rW = chartObj.radiusW,
						startVal = 0,
						totalVal = 100,
						dataVal = chartObj.percents[i],
						arcTit = chartObj.dataset['title'][i],
						resultNum = chartObj.dataset['result'][i]
						

					var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
					var startX = cirL;
					var startY = chartObj.offsets['top'] + arcR ;

		        function drawStar(score,colorKey){
	                if(i != size-1){
	                    for(e = 0 ; e<score ;e++){
	                        var starW = 10;
	                        var posX = (startX-(score/2*(starW*2)-12))+((starW*2)*e-1);
	                        g.star(posX, 200, starW).attr({
	                            fill: colorKey, 
	                            'stroke-width': 0
	                        });
	                    }
	                }
	            }
	            
	            
	            
				if(resultNum != '-'){
					var color = "#fff" ;
					if ( starCount[i] == "1"){
						color = colorSet[4];
						drawStar(1,color);
					}else if (starCount[i] == "2"){
						color = colorSet[3];
						drawStar(2,color);
					}else if (starCount[i] == "3"){
						color = colorSet[2];
						drawStar(3,color);
					}else if (starCount[i] == "4"){
						color = colorSet[1];
						drawStar(4,color);
					}else if (starCount[i] == "5"){
						color = colorSet[0];
						drawStar(5,color);
					}
				}	
					
					g.customAttributes.arc = function (xloc, yloc, value, total, R) {
						var alpha = 360 / total * value,
							a = (90 - alpha) * Math.PI / 180,
							x = xloc + R * Math.cos(a),
							y = yloc - R * Math.sin(a),
							path;
						if (total == value) {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
							];
						} else {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, +(alpha > 180), 1, x, y]
							];
						}
						return {
							path: path
						};
					};

					var bgCircle;
					function drawbase(g){
						var circleOut = g.circle(startX, startY, arcR+0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});
						var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});

						var base = g.set();
						base.push(circleOut, circleIn)
						bgCircle = base
						
						return bgCircle;
					};
					if(i != size-1){
						drawbase(g);
					}

					var my_arc = g.path().attr({
						"stroke": color,
						"stroke-width": rW,
						arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
					});
					
					if(arcTit.length > 20){
					   arcTit = arcTit.replace(" ", "\n");  
					}
					var my_title = g.text(startX, 25, arcTit).attr({
						fill:"#373636",
						'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
					});
					if(i != size-1){
						/* var my_val = g.text(startX, startY-5, dataVal+"%").attr({
							fill:"#373636",
							'font' : '900 '+ 1.3*chartObj.baseFont +'px NanumSquare'
						});
						var my_val02 = g.text(startX, startY+13, "("+resultNum+"Pts.)").attr({
							fill:"#373636",
							'font' : '500 '+ 0.9*chartObj.baseFont +'px NanumSquare'
						}); */
						var my_val = g.text(startX, startY-5, "-%").attr({
							fill:"#373636",
							'font' : '900 '+ 1.3*chartObj.baseFont +'px NanumSquare'
						});
						var my_val02 = g.text(startX, startY+13, "(-Pts.)").attr({
							fill:"#373636",
							'font' : '500 '+ 0.9*chartObj.baseFont +'px NanumSquare'
						});
					}else{
						
						var plus_val0 = g.text(startX, 65, "Safety Assist").attr({       <!-- 사고예방안전성 -->
							fill:"#373636",
							'font' : '500 '+ 1*chartObj.baseFont +'px NanumSquare'
						});
						if(dataVal[0] == "" || dataVal[0] == null ){
							dataVal[0] ="-";
						}else{
							dataVal[0] = "-Pts."         <!-- 점 -->
						}
						var plus_val1 = g.text(startX, 87, dataVal[0]).attr({
							fill:"#373636",
							'font' : '900 '+ 1.3*chartObj.baseFont +'px NanumSquare'
						});
						var plus_val2 = g.path( ["M", startX- 50, 108, "L", startX+50, 108 ]).attr({
							'stroke' : "#dcd1d1",
							'stroke-width' : 2,
						});
						/* var plus_val3 = g.text(startX, 130, "Side Pole Impact").attr({          <!-- 기둥측면충돌 -->
							fill:"#373636",
							'font' : '500 '+ 1*chartObj.baseFont +'px NanumSquare'
						});
						if(dataVal[1] == "" || dataVal[1] == null ){
							dataVal[1] ="-";
						}else{
							dataVal[1] = "-Pts."         <!-- 점 -->
						}
						var plus_val4 = g.text(startX, 160, dataVal[1]).attr({
							fill:"#373636",
							'font' : '900 '+ 1.3*chartObj.baseFont +'px NanumSquare'
						}); */
						 
					}
					
					if(i != size-1){
						my_arc.animate({
							arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
						}, 1500, "bounce");
					}
				}
			}
		},
	pieTypeSingle_01 : {
		drawSvg : 
			function(chartObj, svgW, svgH){
				var g = Raphael(chartObj.chartDiv, svgW, svgH);
				g.add([
						{
							type : "rect",
							x : 0,
							y : 0,
							width : svgW,
							height : svgH,
							'stroke-width' : 0,
							'stroke-linecap' : 'square'
						}
					]);
				var colorSet = chartObj.dataset['colorset'].reverse();
				var size = chartObj.dataset['title'].length;

				Raphael.fn.star = function(x, y, r) {
				    var path = "M" + x + "," + (y - r);
				    for (var c = 0; c < 6; c += 1) {
				        var angle = 270 + c * 144,
			            rx = x + r * Math.cos(angle * Math.PI / 180),
			            ry = y + r * Math.sin(angle * Math.PI / 180);

				        path += "L" + rx + "," + ry;
					    }    
					    return g.path(path);
					};
					
				var starCount = chartObj.dataset["starCount"];
				for (var i=0; i < size ; i++){			
					var arcR = chartObj.radius
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i],
					resultNum = chartObj.dataset['result'][i]

					var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
					var startX = cirL;
					var startY = chartObj.offsets['top'] + arcR ;

			        function drawStar(score,colorKey){
		                if(true){
		                    for(e = 0 ; e<score ;e++){
	    	                    var starW = 10;
	        	                var posX = (startX-(score/2*(starW*2)-12))+((starW*2)*e-1);
	            	            g.star(posX, 200, starW).attr({
	                	            fill: colorKey, 
	                    	        'stroke-width': 0
		                        });
		                    }
		                }
		            }

				    
					//if(resultNum != '-'){
					var color = "#fff" ;
					if ( starCount[i] == "1"){
						color = colorSet[4];
						drawStar(1,color);
					}else if (starCount[i] == "2"){
						color = colorSet[3];
						drawStar(2,color);
					}else if (starCount[i] == "3"){
						color = colorSet[2];
						drawStar(3,color);
					}else if (starCount[i] == "4"){
						color = colorSet[1];
						drawStar(4,color);
					}else if (starCount[i] == "5"){
						color = colorSet[0];
						drawStar(5,color);
					}
					//}	
						
					g.customAttributes.arc = function (xloc, yloc, value, total, R) {
						var alpha = 360 / total * value,
						a = (90 - alpha) * Math.PI / 180,
						x = xloc + R * Math.cos(a),
						y = yloc - R * Math.sin(a),
						path;
						if (total == value) {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
							];
						} else {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, +(alpha > 180), 1, x, y]
							];
						}

						return {
								path: path
								};
					};

					var bgCircle;
					function drawbase(g){
						var circleOut = g.circle(startX, startY, arcR+0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});
						var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});
						var base = g.set();
						base.push(circleOut, circleIn)
						bgCircle = base
							
						return bgCircle;
					};

					if(i != size-1){
						drawbase(g);
					}

					var my_arc = g.path().attr({
						"stroke": color,
						"stroke-width": rW,
						arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
					});
						
					if(arcTit.length > 20){
					   arcTit = arcTit.replace(" ", "\n");  
					}
					var my_title = g.text(startX, 10, arcTit).attr({
						fill:"#373636",
						'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
					});  
					if(i != size-1 || size == 1){		
						if(chartObj.dataset['scoreFlag'] == "Y"){				
						// 충돌안전성 -55 -48 => 0, +18								
	 						var my_val = g.text(startX, startY-0, dataVal+"%").attr({	
								fill:"#373636",
								'font' : '900 '+ 1.7*chartObj.baseFont +'px NanumSquare'
							});
							var my_val02 = g.text(startX, startY+18, resultNum+"Pts.").attr({      
								fill:"#a0a0a0",
								'font' : '900 '+ 0.7*chartObj.baseFont +'px NanumSquare'
							});
						}
					}
						
					if(i != size-1 || size == 1){ 
						console.log(startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2));
						my_arc.animate({
							arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
							}, 1500, "bounce");
					}
				}
			}
	},		
	pieTypeSingle_02 : {
		drawSvg : 
			function(chartObj, svgW, svgH){
				var g = Raphael(chartObj.chartDiv, svgW, svgH);
				g.add([
					{
						type : "rect",
						x : 0,
						y : 0,
						width : svgW,
						height : svgH,
						'stroke-width' : 0,
								'stroke-linecap' : 'square'
					}
				]);
				var colorSet = chartObj.dataset['colorset'].reverse();
				var size = chartObj.dataset['title'].length;
				
				Raphael.fn.star = function(x, y, r) {
				    var path = "M" + x + "," + (y - r);
				    for (var c = 0; c < 6; c += 1) {
				        var angle = 270 + c * 144,
				            rx = x + r * Math.cos(angle * Math.PI / 180),
				            ry = y + r * Math.sin(angle * Math.PI / 180);
				
				        path += "L" + rx + "," + ry;
				    }    
				    return g.path(path);
				};
				
				var starCount = chartObj.dataset["starCount"];
				for (var i=0; i < size ; i++){			
					var arcR = chartObj.radius
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i],
					resultNum = chartObj.dataset['result'][i]
						
					var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
					var startX = cirL;
					var startY = chartObj.offsets['top'] + arcR ;

		        function drawStar(score,colorKey){
	                if(true){
	                    for(e = 0 ; e<score ;e++){
	                        var starW = 10;
	                        var posX = (startX-(score/2*(starW*2)-12))+((starW*2)*e-1);
	                        g.star(posX, 200, starW).attr({
	                            fill: colorKey, 
	                            'stroke-width': 0
	                        });
	                    }
	                }
	            }
	            
	            
				//if(resultNum != '-'){
				var color = "#fff" ;
				if ( starCount[i] == "1"){
					color = colorSet[4];
					drawStar(1,color);
				}else if (starCount[i] == "2"){
					color = colorSet[3];
					drawStar(2,color);
				}else if (starCount[i] == "3"){
					color = colorSet[2];
					drawStar(3,color);
				}else if (starCount[i] == "4"){
					color = colorSet[1];
					drawStar(4,color);
				}else if (starCount[i] == "5"){
					color = colorSet[0];
					drawStar(5,color);
				}
				//}	
					
				g.customAttributes.arc = function (xloc, yloc, value, total, R) {
					var alpha = 360 / total * value,
					a = (90 - alpha) * Math.PI / 180,
					x = xloc + R * Math.cos(a),
					y = yloc - R * Math.sin(a),
					path;
					if (total == value) {
						path = [
							["M", xloc, yloc - R],
							["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
						];
					} else {
						path = [
							["M", xloc, yloc - R],
							["A", R, R, 0, +(alpha > 180), 1, x, y]
						];
					}
					return {
						path: path
					};
				};
				
				var bgCircle;
				function drawbase(g){
					var circleOut = g.circle(startX, startY, arcR+0.5).attr({
						'fill' : '#fff',
						'stroke' : "#000",
						'stroke-width' : 1,
						'stroke-linecap' : 'round'
					});
					var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
						'fill' : '#fff',
						'stroke' : "#000",
						'stroke-width' : 1,
						'stroke-linecap' : 'round'
					});
					var base = g.set();
					base.push(circleOut, circleIn)
					bgCircle = base
						
					return bgCircle;
				};
				if(i != size-1){
					drawbase(g);
				}
				var my_arc = g.path().attr({
					"stroke": color,
					"stroke-width": rW,
					arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
				});
				console.log(arcTit);
				
				if(arcTit.length > 20){
					arcTit = arcTit.replace(" ", "\n");  
				}
				var my_title = g.text(startX, 10, arcTit).attr({
					fill:"#373636",
					'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
				});
				if(i != size-1 || size == 1){					
					if(chartObj.dataset['scoreFlag'] == "Y"){		
					// 보행자안전성 -55 -48									
						var my_val = g.text(startX, startY-0, dataVal+"%").attr({
							fill:"#373636",
							'font' : '900 '+ 1.7*chartObj.baseFont +'px NanumSquare'
						});
						var my_val02 = g.text(startX, startY+18, resultNum+"Pts.").attr({      
							fill:"#a0a0a0",
							'font' : '900 '+ 0.7*chartObj.baseFont +'px NanumSquare'
						});
					}
				}
					
				if(i != size-1 || size == 1){ 
					my_arc.animate({
						arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
					}, 1500, "bounce");
				}
					
			}
		}
	},	

	pieTypeSingle_03 : {
		drawSvg : 
			function(chartObj, svgW, svgH){
				var g = Raphael(chartObj.chartDiv, svgW, svgH);
				g.add([
					{
						type : "rect",
						x : 0,
						y : 0,
						width : svgW,
						height : svgH,
						'stroke-width' : 0,
						'stroke-linecap' : 'square'
					}
				]);
				var colorSet = chartObj.dataset['colorset'].reverse();
				var size = chartObj.dataset['title'].length;
				
				Raphael.fn.star = function(x, y, r) {
				    var path = "M" + x + "," + (y - r);
				    for (var c = 0; c < 6; c += 1) {
				        var angle = 270 + c * 144,
				        rx = x + r * Math.cos(angle * Math.PI / 180),
				        ry = y + r * Math.sin(angle * Math.PI / 180);
				
				        path += "L" + rx + "," + ry;
				    }    
				    return g.path(path);
				};
				
				var starCount = chartObj.dataset["starCount"];
				for (var i=0; i < size ; i++){			
					var arcR = chartObj.radius
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i],
					resultNum = chartObj.dataset['result'][i]
					
					var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
					var startX = cirL;
					var startY = chartObj.offsets['top'] + arcR ;
		        
				function drawStar(score,colorKey){
	                if(true){
	                    for(e = 0 ; e<score ;e++){
	                        var starW = 10;
	                        var posX = (startX-(score/2*(starW*2)-12))+((starW*2)*e-1);
	                        g.star(posX, 200, starW).attr({
	                            fill: colorKey, 
	                            'stroke-width': 0
	                        });
	                    }
	                }
	            }
	            
	            
				//if(resultNum != '-'){
				console.log(starCount[i]);
				var color = "#fff" ;
				if ( starCount[i] == "1"){
					color = colorSet[4];
					drawStar(1,color);
				}else if (starCount[i] == "2"){
					color = colorSet[3];
					drawStar(2,color);
				}else if (starCount[i] == "3"){
					color = colorSet[2];
					drawStar(3,color);
				}else if (starCount[i] == "4"){
					color = colorSet[1];
					drawStar(4,color);
				}else if (starCount[i] == "5"){
					color = colorSet[0];
					drawStar(5,color);
				}
				//}	
					
				g.customAttributes.arc = function (xloc, yloc, value, total, R) {
					var alpha = 360 / total * value,
					a = (90 - alpha) * Math.PI / 180,
					x = xloc + R * Math.cos(a),
					y = yloc - R * Math.sin(a),
					path;
					if (total == value) {
						path = [
							["M", xloc, yloc - R],
							["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
						];
					} else {
						path = [
							["M", xloc, yloc - R],
							["A", R, R, 0, +(alpha > 180), 1, x, y]
						];
					}
					return {
						path: path
					};
				};

				var bgCircle;
				function drawbase(g){
					var circleOut = g.circle(startX, startY, arcR+0.5).attr({
						'fill' : '#fff',
						'stroke' : "#000",
						'stroke-width' : 1,
						'stroke-linecap' : 'round'
					});
					var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
						'fill' : '#fff',
						'stroke' : "#000",
						'stroke-width' : 1,
						'stroke-linecap' : 'round'
					});
					var base = g.set();
					base.push(circleOut, circleIn)
					bgCircle = base
					
					return bgCircle;
				};
				if(i != size-1){
					drawbase(g);
				}

				var my_arc = g.path().attr({
					"stroke": color,
					"stroke-width": rW,
					arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
				});								
					
				if(arcTit.length > 20){
				   arcTit = arcTit.replace(" ", "\n");  
				}
				var my_title = g.text(startX, 10, arcTit).attr({
					fill:"#373636",
					'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
				});
				if(i != size-1 || size == 1){			
					if(chartObj.dataset['scoreFlag'] == "Y"){		
					// 사고예방 -55 -48
						var my_val = g.text(startX, startY-0, dataVal+"%").attr({
							fill:"#373636",
							'font' : '900 '+ 1.7*chartObj.baseFont +'px NanumSquare'
						});
						var my_val02 = g.text(startX, startY+18, resultNum+"Pts.").attr({      
							fill:"#a0a0a0",
							'font' : '900 '+ 0.7*chartObj.baseFont +'px NanumSquare'
						});
					}
				}
					
				if(i != size-1 || size == 1){ 
					my_arc.animate({
						arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
					}, 1000, "bounce");
				}
					
			}
		}
	},			
	pieTypeSingle_04 : {
		drawSvg : 
			function(chartObj, svgW, svgH){
				var g = Raphael(chartObj.chartDiv, svgW, svgH);
				g.add([
					{
						type : "rect",
						x : 0,
						y : 0,
						width : svgW,
						height : svgH,
						'stroke-width' : 0,
						'stroke-linecap' : 'square'
					}
				]);
				var colorSet = chartObj.dataset['colorset'].reverse();
				var size = chartObj.dataset['title'].length;
				
				Raphael.fn.star = function(x, y, r) {
				    var path = "M" + x + "," + (y - r);
				    for (var c = 0; c < 6; c += 1) {
				        var angle = 270 + c * 144,
				        rx = x + r * Math.cos(angle * Math.PI / 180),
				        ry = y + r * Math.sin(angle * Math.PI / 180);
				
				        path += "L" + rx + "," + ry;
				    }    
				    return g.path(path);
				};
				
				var starCount = chartObj.dataset["starCount"]; 
				for (var i=0; i < size ; i++){			
					var arcR = chartObj.radius
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i],
					resultNum = chartObj.dataset['result'][i]
						

					var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
					var startX = cirL;
					var startY = chartObj.offsets['top'] + arcR ;

		        	function drawStar(score,colorKey){
	                	if(i != size-1){
	                    	for(e = 0 ; e<score ;e++){
	                        	var starW = 10;
	                        	var posX = (startX-(score/2*(starW*2)-12))+((starW*2)*e-1);
	                        	g.star(posX, 200, starW).attr({
	                            fill: colorKey, 
	                            'stroke-width': 0
	                        	});
	                    	}
	                	}
	            	}
	            
		            
					if(resultNum != '-'){
						var color = "#fff" ;
						if ( starCount[i] == "1"){
							color = colorSet[4];
							drawStar(1,color);
						}else if (starCount[i] == "2"){
							color = colorSet[3];
							drawStar(2,color);
						}else if (starCount[i] == "3"){
							color = colorSet[2];
							drawStar(3,color);
						}else if (starCount[i] == "4"){
							color = colorSet[1];
							drawStar(4,color);
						}else if (starCount[i] == "5"){
							color = colorSet[0];
							drawStar(5,color);
						}
					}	
								
					g.customAttributes.arc = 
					function (xloc, yloc, value, total, R) {
						var alpha = 360 / total * value,
						a = (90 - alpha) * Math.PI / 180,
						x = xloc + R * Math.cos(a),
						y = yloc - R * Math.sin(a),
						path;
						if (total == value) {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
							];
						} else {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, +(alpha > 180), 1, x, y]
							];
						}
						
						return {
							path: path
						};
					};
						var bgCircle;
					function drawbase(g){
						var circleOut = g.circle(startX, startY, arcR+1.5).attr({
							'fill' : '#dfdcda',
							'stroke' : "#fff",
							'stroke-width' : 25,
							'stroke-linecap' : 'round'
						});
						var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
							'fill' : '#fff',
							'stroke' : "#fff",
							'stroke-width' : 0,
							'stroke-linecap' : 'round'
						});
						var base = g.set();
						base.push(circleOut, circleIn)
						bgCircle = base
						
						return bgCircle;
					};
					if(i != size-1){
						drawbase(g);
					}
				

					var my_arc = g.path().attr({
						"stroke": color,
						"stroke-width": rW,
						arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
					});
				
					if(arcTit.length > 20){
					   arcTit = arcTit.replace(" ", "\n");  
					}
					var my_title = g.text(startX, 10, arcTit).attr({
						fill:"#373636",
						'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
					});
					if(i != size-1 || size == 1){
						if(chartObj.dataset["yearFlag"] == "Y"){
							// 사고예방안전성  103 => 200	
							console.log("line1865 " + "사고예방안전성");
							var plus_val0 = g.text(startX, 200, "사고예방안전성 ").attr({       
								fill:"#dcd1d1",
								'font-weight': '1000',
								'font-size' : 1.3*chartObj.baseFont,
								'font-familly' : 'NanumSquare'
							});										
						}
							if(dataVal[0] == "" || dataVal[0] == null ){
							dataVal[0] ="-";
						}else{
							if(chartObj.dataset['scoreFlag'] == "Y"){								
								resultNum = "+"+resultNum+"Pts."         
							}
						}
						//'font' : '1000 '+ 1.5*chartObj.baseFont +'px NanumSquare'
						if(chartObj.dataset['scoreFlag'] == "Y"){								
						// 가산점 10 	-> 120			
							console.log("line1885 " + resultNum);
							var plus_val1 = g.text(startX, 115, "+"+resultNum).attr({
								fill:"#373636",
								'font-weight': '700',
								'font-size' : 1.5*chartObj.baseFont,
								'font-familly' : 'NanumSquare'
							});
						}
						/*var plus_val2 = g.path( ["M", startX- 50, 108, "L", startX+50, 108 ]).attr({
									'stroke' : "#dcd1d1",
									'stroke-width' : 2,
								}); */
								
						// 기둥측면충돌 130 	-> 225			
						console.log("line1899 " + "기둥측면충돌");
						var plus_val3 = g.text(startX, 225, "기둥측면충돌").attr({          
							fill:"#373636",
							'font' : '500 '+ 1*chartObj.baseFont +'px NanumSquare'
						});
						if(dataVal[1] == "" || dataVal[1] == null ){
							dataVal[1] ="-";
						}else{
							dataVal[1] = "+"+dataVal[1]+"점"         
						}
						// ??  	-> 245
						console.log("line1910 " + dataVal[1]);
						var val4Value = dataVal[1];
						if (val4Value == undefined) val4Value = "X"
						
						var plus_val4 = g.text(startX, 245, val4Value).attr({
							fill:"#373636",
							'font' : '900 '+ 1.3*chartObj.baseFont +'px NanumSquare'
						});							
					}
					
					if(true){ 
						my_arc.animate({
							arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
						}, 1000, "bounce");
					}
				}
			}
	},

	pieTypeSingle_05 : {
		drawSvg : 
			function(chartObj, svgW, svgH){
				var g = Raphael(chartObj.chartDiv, svgW, svgH);
				g.add([
					{
						type : "rect",
						x : 0,
						y : 0,
						width : svgW,
						height : svgH,
						'stroke-width' : 0,
						'stroke-linecap' : 'square'
					}
				]);
				var colorSet = "#FFFFFF";
				var size = chartObj.dataset['title'].length;
				
				Raphael.fn.star = function(x, y, r) {
				    var path = "M" + x + "," + (y - r);
				    for (var c = 0; c < 6; c += 1) {
				        var angle = 270 + c * 144,
			            rx = x + r * Math.cos(angle * Math.PI / 180),
			            ry = y + r * Math.sin(angle * Math.PI / 180);
			
				        path += "L" + rx + "," + ry;
				    }    
				    return g.path(path);
				};
				
				var starCount = chartObj.dataset["starCount"];
				for (var i=0; i < size ; i++){			
					var arcR = chartObj.radius
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i],
					resultNum = chartObj.dataset['result'][i]
						
					var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
					var startX = cirL;
					var startY = chartObj.offsets['top'] + arcR ;

					function draw5Star(score,colorKey){
		                if(true){
		                    for(e = 0 ; e<5 ;e++){
		                        var starW = 10;
		                        var posX = (startX-(5/2*(starW*2)-12))+((starW*2)*e-1);
		                        if(score-e >0){ 
			                        g.star(posX, 50, starW).attr({
			                            fill: "#EAC52E", 
			                            'stroke-width': 0
			                        });
		                        } else {
		                        	g.star(posX, 50, starW).attr({
			                            fill: "#9B9B9B", 
			                            'stroke-width': 0
			                        });
		                        }
		                    }
		                }
		            }
	            
	            
		            var color = "#FFFFFF" ;
					if ( starCount[i] == "1"){
						color = colorSet[4];
						draw5Star(1,color);
					}else if (starCount[i] == "2"){
						color = colorSet[3];
						draw5Star(2,color);
					}else if (starCount[i] == "3"){
						color = colorSet[2];
						draw5Star(3,color);
					}else if (starCount[i] == "4"){
						color = colorSet[1];
						draw5Star(4,color);
					}else if (starCount[i] == "5"){
						color = colorSet[0];
						draw5Star(5,color);
					}
				//}	
					
					g.customAttributes.arc = function (xloc, yloc, value, total, R) {
						var alpha = 360 / total * value,
						a = (90 - alpha) * Math.PI / 180,
						x = xloc + R * Math.cos(a),
						y = yloc - R * Math.sin(a),
						path;
						if (total == value) {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
							];
						} else {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, +(alpha > 180), 1, x, y]
							];
						}
						
						return {
							path: path
						};
					};
					
					var bgCircle;
					function drawbase(g){
						var circleOut = g.circle(startX, startY, arcR+0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});
						var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});
						var base = g.set();
						base.push(circleOut, circleIn)
						bgCircle = base
					
						return bgCircle;
					};
					
					if(i != size-1){
						drawbase(g);
					}
					
					var base_arc = g.circle(startX, startY, arcR-(rW/2)).attr({
						fill: "none",
						stroke: "#DDD",
						"stroke-width": rW,
						"stroke-linecap": "round"
					});
					
					var my_arc = g.path().attr({
						"stroke": "#000",
						"stroke-width": rW,
						arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
					});
					
					if(arcTit.length > 20){
					   arcTit = arcTit.replace(" ", "\n");  
					}
 					var my_title = g.text(startX, 10, arcTit).attr({
						fill:"#373636",
						'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
					});  
					
 					if(i != size-1 || size == 1){		
						if(chartObj.dataset['scoreFlag'] == "Y"){				
// 충돌안전성 -55 -48 => 0, +18								
 							var my_val = g.text(startX, startY-0, dataVal+"%").attr({	
								fill:"#373636",
								'font' : '900 '+ 1.7*chartObj.baseFont +'px NanumSquare'
							});
						}
					}
					
					if(i != size-1 || size == 1){ 
						console.log(startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2));
						my_arc.animate({
							arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
						}, 1500, "bounce");
					}
				}
			}
	},

	pieTypeSingle_06 : {
		drawSvg : 
			function(chartObj, svgW, svgH){
				var g = Raphael(chartObj.chartDiv, svgW, svgH);
				g.add([
					{
						type : "rect",
						x : 0,
						y : 0,
						width : svgW,
						height : svgH,
						'stroke-width' : 0,
						'stroke-linecap' : 'square'
					}
				]);
				var colorSet = "#FFFFFF";
				var size = chartObj.dataset['title'].length;
				
				Raphael.fn.star = function(x, y, r) {
				    var path = "M" + x + "," + (y - r);
				    for (var c = 0; c < 6; c += 1) {
				        var angle = 270 + c * 144,
			            rx = x + r * Math.cos(angle * Math.PI / 180),
			            ry = y + r * Math.sin(angle * Math.PI / 180);
				
				        path += "L" + rx + "," + ry;
				    }    
				    return g.path(path);
				};
				
				var starCount = chartObj.dataset["starCount"];
				for (var i=0; i < size ; i++){			
					var arcR = chartObj.radius
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i],
					resultNum = chartObj.dataset['result'][i]

					var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
					var startX = cirL;
					var startY = chartObj.offsets['top'] + arcR ;

					function draw5Star(score,colorKey){
		                if(true){
		                    for(e = 0 ; e<5 ;e++){
		                        var starW = 10;
		                        var posX = (startX-(5/2*(starW*2)-12))+((starW*2)*e-1);
		                        if(score-e >0){ 
			                        g.star(posX, 50, starW).attr({
			                            fill: "#EAC52E", 
			                            'stroke-width': 0
			                        });
		                        } else {
		                        	g.star(posX, 50, starW).attr({
			                            fill: "#9B9B9B", 
			                            'stroke-width': 0
			                        });
		                        }
		                    }
		                }
		            }
	            
	            
		            var color = "#FFFFFF" ;
					if ( starCount[i] == "1"){
						color = colorSet[4];
						draw5Star(1,color);
					}else if (starCount[i] == "2"){
						color = colorSet[3];
						draw5Star(2,color);
					}else if (starCount[i] == "3"){
						color = colorSet[2];
						draw5Star(3,color);
					}else if (starCount[i] == "4"){
						color = colorSet[1];
						draw5Star(4,color);
					}else if (starCount[i] == "5"){
						color = colorSet[0];
						draw5Star(5,color);
					}
					//}	
							
					g.customAttributes.arc = function (xloc, yloc, value, total, R) {
						var alpha = 360 / total * value,
						a = (90 - alpha) * Math.PI / 180,
						x = xloc + R * Math.cos(a),
						y = yloc - R * Math.sin(a),
						path;
						if (total == value) {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
							];
						} else {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, +(alpha > 180), 1, x, y]
							];
						}
						return {
								path: path
						};
					};

					var bgCircle;
					function drawbase(g){
						var circleOut = g.circle(startX, startY, arcR+0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});
						var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});

						var base = g.set();
						base.push(circleOut, circleIn)
						bgCircle = base
						
						return bgCircle;
					};
					if(i != size-1){
						drawbase(g);
					}

					var base_arc = g.circle(startX, startY, arcR-(rW/2)).attr({
						fill: "none",
						stroke: "#DDD",
						"stroke-width": rW,
						"stroke-linecap": "round"
					});
					
					var my_arc = g.path().attr({
						"stroke": "#000",
						"stroke-width": rW,
						arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
					});
					console.log(arcTit);
					if(arcTit.length > 20){
					   arcTit = arcTit.replace(" ", "\n");  
					}
					var my_title = g.text(startX, 10, arcTit).attr({
						fill:"#373636",
						'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
					});
					if(i != size-1 || size == 1){					
						if(chartObj.dataset['scoreFlag'] == "Y"){		
						// 보행자안전성 -55 -48
							var my_val = g.text(startX, startY-0, dataVal+"%").attr({
								fill:"#373636",
								'font' : '900 '+ 1.7*chartObj.baseFont +'px NanumSquare'
							});
						}
					}
			
					if(i != size-1 || size == 1){ 
						my_arc.animate({
							arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
						}, 1500, "bounce");
					}
				}
			}
	},

	pieTypeSingle_07 : {
		drawSvg : 
			function(chartObj, svgW, svgH){
				var g = Raphael(chartObj.chartDiv, svgW, svgH);
				g.add([
					{
						type : "rect",
						x : 0,
						y : 0,
						width : svgW,
						height : svgH,
						'stroke-width' : 0,
						'stroke-linecap' : 'square'
					}
				]);
				var colorSet = "#FFFFFF";
				var size = chartObj.dataset['title'].length;
				
				Raphael.fn.star = function(x, y, r) {
				    var path = "M" + x + "," + (y - r);
				    for (var c = 0; c < 6; c += 1) {
				        var angle = 270 + c * 144,
				            rx = x + r * Math.cos(angle * Math.PI / 180),
				            ry = y + r * Math.sin(angle * Math.PI / 180);
				
				        path += "L" + rx + "," + ry;
				    }    
				    return g.path(path);
				};
				
				var starCount = chartObj.dataset["starCount"];
				for (var i=0; i < size ; i++){			
					var arcR = chartObj.radius
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i],
					resultNum = chartObj.dataset['result'][i]
						

					var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
					var startX = cirL;
					var startY = chartObj.offsets['top'] + arcR ;

					function draw5Star(score,colorKey){
		                if(true){
		                    for(e = 0 ; e<5 ;e++){
		                        var starW = 10;
		                        var posX = (startX-(5/2*(starW*2)-12))+((starW*2)*e-1);
		                        if(score-e >0){ 
			                        g.star(posX, 50, starW).attr({
			                            fill: "#EAC52E", 
			                            'stroke-width': 0
			                        });
		                        } else {
		                        	g.star(posX, 50, starW).attr({
			                            fill: "#9B9B9B", 
			                            'stroke-width': 0
			                        });
		                        }
		                    }
		                }
		            }
	            
	            
		            var color = "#FFFFFF" ;
					if ( starCount[i] == "1"){
						color = colorSet[4];
						draw5Star(1,color);
					}else if (starCount[i] == "2"){
						color = colorSet[3];
						draw5Star(2,color);
					}else if (starCount[i] == "3"){
						color = colorSet[2];
						draw5Star(3,color);
					}else if (starCount[i] == "4"){
						color = colorSet[1];
						draw5Star(4,color);
					}else if (starCount[i] == "5"){
						color = colorSet[0];
						draw5Star(5,color);
					}
					//}	
								
					g.customAttributes.arc = function (xloc, yloc, value, total, R) {
						var alpha = 360 / total * value,
						a = (90 - alpha) * Math.PI / 180,
						x = xloc + R * Math.cos(a),
						y = yloc - R * Math.sin(a),
						path;
						if (total == value) {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
							];
						} else {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, +(alpha > 180), 1, x, y]
							];
						}
						return {
							path: path
						};
					};

					var bgCircle;
					function drawbase(g){
						var circleOut = g.circle(startX, startY, arcR+0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});
						var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});

						var base = g.set();
						base.push(circleOut, circleIn)
						bgCircle = base
						
						return bgCircle;
					};
					if(i != size-1){
						drawbase(g);
					}
					
					var base_arc = g.circle(startX, startY, arcR-(rW/2)).attr({
						fill: "none",
						stroke: "#DDD",
						"stroke-width": rW,
						"stroke-linecap": "round"
					});
					
					var my_arc = g.path().attr({
						"stroke": "#000",
						"stroke-width": rW,
						arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
					});								
					
					if(arcTit.length > 20){
					   arcTit = arcTit.replace(" ", "\n");  
					}
					var my_title = g.text(startX, 10, arcTit).attr({
						fill:"#373636",
						'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
					});
					if(i != size-1 || size == 1){			
						if(chartObj.dataset['scoreFlag'] == "Y"){		
						// 사고예방 -55 -48
						var my_val = g.text(startX, startY-0, dataVal+"%").attr({
								fill:"#373636",
								'font' : '900 '+ 1.7*chartObj.baseFont +'px NanumSquare'
							});
						}
					}
				
					if(i != size-1 || size == 1){ 
						my_arc.animate({
							arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
						}, 1000, "bounce");
					}
				}
			}
	},			

	pieTypeSingle_08 : {
		drawSvg : 
			function(chartObj, svgW, svgH){
				var g = Raphael(chartObj.chartDiv, svgW, svgH);
				g.add([
					{
						type : "rect",
						x : 0,
						y : 0,
						width : svgW,
						height : svgH,
						'stroke-width' : 0,
						'stroke-linecap' : 'square'
					}
				]);
				var colorSet = chartObj.dataset['colorset'].reverse();
				var size = chartObj.dataset['title'].length;
				
				Raphael.fn.star = function(x, y, r) {
				    var path = "M" + x + "," + (y - r);
				    for (var c = 0; c < 6; c += 1) {
				        var angle = 270 + c * 144,
			            rx = x + r * Math.cos(angle * Math.PI / 180),
			            ry = y + r * Math.sin(angle * Math.PI / 180);

				        path += "L" + rx + "," + ry;
				    }    
				    return g.path(path);
				};
				
				var starCount = chartObj.dataset["starCount"]; 
				for (var i=0; i < size ; i++){			
					var arcR = chartObj.radius
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i],
					resultNum = chartObj.dataset['result'][i]
						

					var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
					var startX = cirL;
					var startY = chartObj.offsets['top'] + arcR ;

			        function drawStar(score,colorKey){
		                if(i != size-1){
		                    for(e = 0 ; e<score ;e++){
		                        var starW = 10;
		                        var posX = (startX-(score/2*(starW*2)-12))+((starW*2)*e-1);
		                        g.star(posX, 200, starW).attr({
		                            fill: colorKey, 
		                            'stroke-width': 0
		                        });
		                    }
		                }
		            }
	            
	            
	            
					if(resultNum != '-'){
						var color = "#fff" ;
						if ( starCount[i] == "1"){
							color = colorSet[4];
							drawStar(1,color);
						}else if (starCount[i] == "2"){
							color = colorSet[3];
							drawStar(2,color);
						}else if (starCount[i] == "3"){
							color = colorSet[2];
							drawStar(3,color);
						}else if (starCount[i] == "4"){
							color = colorSet[1];
							drawStar(4,color);
						}else if (starCount[i] == "5"){
							color = colorSet[0];
							drawStar(5,color);
						}
					}	
					
					g.customAttributes.arc = function (xloc, yloc, value, total, R) {
						var alpha = 360 / total * value,
						a = (90 - alpha) * Math.PI / 180,
						x = xloc + R * Math.cos(a),
						y = yloc - R * Math.sin(a),
						path;
						if (total == value) {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
							];
						} else {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, +(alpha > 180), 1, x, y]
							];
						}
						return {
							path: path
						};
					};

					var bgCircle;
					function drawbase(g){
						var circleOut = g.circle(startX, startY, arcR+1.5).attr({
							'fill' : '#dfdcda',
							'stroke' : "#fff",
							'stroke-width' : 25,
							'stroke-linecap' : 'round'
						});
						var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
							'fill' : '#fff',
							'stroke' : "#fff",
							'stroke-width' : 0,
							'stroke-linecap' : 'round'
						});

						var base = g.set();
						base.push(circleOut, circleIn)
						bgCircle = base
						
						return bgCircle;
					};
					if(i != size-1){
						drawbase(g);
					}
					

					var my_arc = g.path().attr({
						"stroke": color,
						"stroke-width": rW,
						arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
					});
					
					if(arcTit.length > 20){
					   arcTit = arcTit.replace(" ", "\n");  
					}
					var my_title = g.text(startX, 10, arcTit).attr({
						fill:"#373636",
						'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
					});
					if(i != size-1 || size == 1){
						if(chartObj.dataset["yearFlag"] == "Y"){
						// 사고예방안전성  103 => 200	
						console.log("line1865 " + "사고예방안전성");
						var plus_val0 = g.text(startX, 200, "사고예방안전성 ").attr({       
							fill:"#dcd1d1",
							'font-weight': '1000',
							'font-size' : 1.3*chartObj.baseFont,
							'font-familly' : 'NanumSquare'
							});										
						}

					if(dataVal[0] == "" || dataVal[0] == null ){
						dataVal[0] ="-";
					}else{
					
						if(chartObj.dataset['scoreFlag'] == "Y"){								
							resultNum = "+"+resultNum+"Pts."         
						}
					}
					//'font' : '1000 '+ 1.5*chartObj.baseFont +'px NanumSquare'
					if(chartObj.dataset['scoreFlag'] == "Y"){								
						// 가산점 10 	-> 120			
						console.log("line1885 " + resultNum);
						var plus_val1 = g.text(startX, 115, "+"+resultNum).attr({
							fill:"#373636",
							'font-weight': '700',
							'font-size' : 1.5*chartObj.baseFont,
							'font-familly' : 'NanumSquare'
						});
					}
					/*var plus_val2 = g.path( ["M", startX- 50, 108, "L", startX+50, 108 ]).attr({
						'stroke' : "#dcd1d1",
						'stroke-width' : 2,
					}); */

					// 기둥측면충돌 130 	-> 225
					console.log("line1899 " + "기둥측면충돌");
					
					var plus_val3 = g.text(startX, 225, "기둥측면충돌").attr({          
						fill:"#373636",
						'font' : '500 '+ 1*chartObj.baseFont +'px NanumSquare'
					});
					if(dataVal[1] == "" || dataVal[1] == null ){
						dataVal[1] ="-";
					}else{
						dataVal[1] = "+"+dataVal[1]+"점"         
					}
					// ??  	-> 245			
					console.log("line1910 " + dataVal[1]);
					var val4Value = dataVal[1];
					if (val4Value == undefined) val4Value = "X"
					var plus_val4 = g.text(startX, 245, val4Value).attr({
						fill:"#373636",
						'font' : '900 '+ 1.3*chartObj.baseFont +'px NanumSquare'
						});							
					}
								
					if(true){ 
						my_arc.animate({
							arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
						}, 1000, "bounce");
					}

				}
			}
	},
	
	pieTypeSingle_09 : {
		drawSvg : 
			function(chartObj, svgW, svgH){
				var g = Raphael(chartObj.chartDiv, svgW, svgH);
				g.add([
					{
						type : "rect",
						x : 0,
						y : 0,
						width : svgW,
						height : svgH,
						'stroke-width' : 0,
						'stroke-linecap' : 'square'
					}
				]);
				var colorSet = "#FFFFFF";
				var size = chartObj.dataset['title'].length;
				
				Raphael.fn.star = function(x, y, r) {
				    var path = "M" + x + "," + (y - r);
				    for (var c = 0; c < 6; c += 1) {
				        var angle = 270 + c * 144,
				            rx = x + r * Math.cos(angle * Math.PI / 180),
				            ry = y + r * Math.sin(angle * Math.PI / 180);
				
				        path += "L" + rx + "," + ry;
				    }    
				    return g.path(path);
				};
				
				var starCount = chartObj.dataset["starCount"];
				for (var i=0; i < size ; i++){			
					var arcR = chartObj.radius
					rW = chartObj.radiusW,
					startVal = 0,
					totalVal = 100,
					dataVal = chartObj.percents[i],
					arcTit = chartObj.dataset['title'][i],
					resultNum = chartObj.dataset['result'][i]
						

					var cirL = chartObj.offsets['left'] + arcR + ( i* (chartObj.offsets['gab'] + arcR*2));
					var startX = cirL;
					var startY = chartObj.offsets['top'] + arcR ;

					function draw5Star(score,colorKey){
		                if(true){
		                    for(e = 0 ; e<5 ;e++){
		                        var starW = 10;
		                        var posX = (startX-(5/2*(starW*2)-12))+((starW*2)*e-1);
		                        if(score-e >0){ 
			                        g.star(posX, 50, starW).attr({
			                            fill: "#EAC52E", 
			                            'stroke-width': 0
			                        });
		                        } else {
		                        	g.star(posX, 50, starW).attr({
			                            fill: "#9B9B9B", 
			                            'stroke-width': 0
			                        });
		                        }
		                    }
		                }
		            }
	            
	            
		            var color = "#FFFFFF" ;
					if ( starCount[i] == "1"){
						color = colorSet[4];
						draw5Star(1,color);
					}else if (starCount[i] == "2"){
						color = colorSet[3];
						draw5Star(2,color);
					}else if (starCount[i] == "3"){
						color = colorSet[2];
						draw5Star(3,color);
					}else if (starCount[i] == "4"){
						color = colorSet[1];
						draw5Star(4,color);
					}else if (starCount[i] == "5"){
						color = colorSet[0];
						draw5Star(5,color);
					}
					//}	
								
					g.customAttributes.arc = function (xloc, yloc, value, total, R) {
						var alpha = 360 / total * value,
						a = (90 - alpha) * Math.PI / 180,
						x = xloc + R * Math.cos(a),
						y = yloc - R * Math.sin(a),
						path;
						if (total == value) {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
							];
						} else {
							path = [
								["M", xloc, yloc - R],
								["A", R, R, 0, +(alpha > 180), 1, x, y]
							];
						}
						return {
							path: path
						};
					};

					var bgCircle;
					function drawbase(g){
						var circleOut = g.circle(startX, startY, arcR+0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});
						var circleIn = g.circle(startX, startY, arcR-rW-0.5).attr({
							'fill' : '#fff',
							'stroke' : "#000",
							'stroke-width' : 1,
							'stroke-linecap' : 'round'
						});

						var base = g.set();
						base.push(circleOut, circleIn)
						bgCircle = base
						
						return bgCircle;
					};
					if(i != size-1){
						drawbase(g);
					}
					
					var base_arc = g.circle(startX, startY, arcR-(rW/2)).attr({
						fill: "none",
						stroke: "#DDD",
						"stroke-width": rW,
						"stroke-linecap": "round"
					});
					
					var my_arc = g.path().attr({
						"stroke": "#000",
						"stroke-width": rW,
						arc: [startX, startY, startVal - startVal, totalVal - startVal, arcR-(rW/2)]
					});								
					
					if(arcTit.length > 20){
					   arcTit = arcTit.replace(" ", "\n");  
					}
					var my_title = g.text(startX, 10, arcTit).attr({
						fill:"#373636",
						'font' : '800 '+ 1.4*chartObj.baseFont +'px NanumSquare'
					});
					if(i != size-1 || size == 1){			
						if(chartObj.dataset['scoreFlag'] == "Y"){		
						// 사고예방 -55 -48
						var my_val = g.text(startX, 72, dataVal+"%").attr({
								fill:"#373636",
								'font' : '900 '+ 1.7*chartObj.baseFont +'px NanumSquare'
							});
						}
					}
				
					if(i != size-1 || size == 1){ 
						my_arc.animate({
							arc: [startX, startY, dataVal - startVal, totalVal - startVal, arcR-(rW/2)]
						}, 1000, "bounce");
					}
				}
			}
	},
	
	triangle : {
		drawSvg : function(chartObj, svgW, svgH){
			var g = Raphael(chartObj.chartDiv, svgW, svgH);
			var offsetT = chartObj.offsets['top'];
			var offsetL = chartObj.offsets['left'];
			var offsetR = chartObj.offsets['right'];
			var offsetH = chartObj.offsets['height'];

			var bgRect = chartObj.colorset['bgRect'];
			var bgRectOver = chartObj.colorset['bgRectOver'];
			var backTri = chartObj.colorset['bTri'];
			var result_txt = chartObj.dataset['result'];
			var FrontTri = ["#ED1C24" , "#7F533A" , "#F7931E", "#FFF200", "#19914C"];
			FrontTri = FrontTri.reverse()[result_txt[0]['rating']-1]
			//console.log(result_txt[0]['rating'])
            
			var back = g.rect(0,0,svgW,svgH).attr({
				fill : 'none',
				'stroke-width' : 0,
				'stroke-linecap' : 'square'
			});

			g.setStart();
				g.rect(5,5,svgW-10,svgH-10).attr({
					fill : bgRect,
					'stroke-width' : 0,
					'stroke-linecap' : 'square'
				});
				
				g.rect(0,0,svgW,svgH).attr({
					fill : 'none',
					'stroke-width' : 1,
					'stroke' : bgRect,
					'stroke-linecap' : 'square'
				});
			var backRect = g.setFinish();

			var axis = {
					x1 : (svgW/2) , y1 : offsetT,
					x2 : offsetL , y2 : (offsetT+offsetH),
					x3 : svgW-offsetR , y3 : (offsetT+offsetH)
				}
			var gx = (axis['x1']+axis['x2']+axis['x3'])/3;
			var gy = (axis['y1']+axis['y2']+axis['y3'])/3;

			var triangle = g.path(
					'M'+ axis['x1'] +","+ axis['y1']
					+"L"+ axis['x2'] +","+ axis['y2']
					+"L"+ axis['x3'] +","+ axis['y3'] +"Z"
				).attr({
					'stroke-width' : 0,
					'fill' : '#fff',
					'opacity' : '0.3'
				});

			var carName = g.text(axis['x1'], 25, chartObj.dataset['title']).attr({
					'font' : '700 '+ 1.1*chartObj.baseFont +'px NanumSquare'
				});;
			var ratingsTitle01 = g.text(axis['x1'], axis['y1']-10, chartObj.dataset['ratingsTitle'][0]).attr({
					'font' : '400 '+ 0.8*chartObj.baseFont +'px NanumSquare'
				});
			var ratingsTitle02 = g.text(axis['x2']+10, axis['y3']+10, chartObj.dataset['ratingsTitle'][1]).attr({
					'font' : '400 '+ 0.8*chartObj.baseFont +'px NanumSquare'
				});;
			var ratingsTitle03 = g.text(axis['x3']-10, axis['y3']+10, chartObj.dataset['ratingsTitle'][2]).attr({
					'font' : '400 '+ 0.8*chartObj.baseFont +'px NanumSquare'
				});;

			var arrow;
			var lineSize = {};
			function arrowLine(g){
				var line01 = g.path("M"+ gx +","+ gy+"L"+axis['x1']+","+axis['y1'])
				var line02 = g.path("M"+ gx +","+ gy+"L"+axis['x2']+","+axis['y2'])
				var line03 = g.path("M"+ gx +","+ gy+"L"+axis['x3']+","+axis['y3'])
				
				var arrLine = g.set();
				arrLine.push(line01, line02, line03)
				arrLine.attr({
					'stroke-width' : 1,
					'stroke' : '#706e6e',
					'arrow-end' : 'classic-wide-long',
					'opacity' : 0.7
				});

				for (var i=0; i<chartObj.dataset['ratingsTitle'].length ; i++){
					lineSize[i] = parseInt( arrLine[i].getTotalLength() -5 );
				}

				arrow = arrLine;
				return arrLine;
			};
			arrowLine(g);
			

			var triangleArr = {};
			var lastP = {}
			function resultData(g){
				for (var i=0; i<chartObj.dataset['resultRating'].length ; i++){
					var sum = lineSize[i] / 100
					sum *= chartObj.dataset['resultRating'][i]

					g.customAttributes.along = function (a) {
						return {
							path: arrow[i].getSubpath(0, sum)
						};
					};
					var c = g.path().attr({
						along: 1,
						stroke: "#f00",
						"stroke-width": 0
					});
					
					lastP[i] = c.getPointAtLength()
				};
			};
			resultData(g);

			var color;
			function colorF(g){
				color = g.path(
					//'M95,60L20,180H170z'
					'M'+ gx +","+ gy
					+"L"+ gx +","+ gy
					+"L"+ gx +","+ gy +"Z"
				).attr({
					'stroke-width' : 0,
					'fill' : FrontTri
				});
				color.animate({
					'path' :
					'M'+ lastP[0]['x'] +","+ lastP[0]['y']
					+"L"+ lastP[1]['x'] +","+ lastP[1]['y']
					+"L"+ lastP[2]['x'] +","+ lastP[2]['y'] +"Z"
				}, 500, '>')
			};
			colorF(g);

			var bgTxt;
			function backTitle(g){
				//var result_txt = chartObj.dataset['result'];
                var unitLength = result_txt[3].length>4?50:35;
				var txt0101 = g.text(axis['x1']-5, axis['y1']+15, result_txt[0]['rating']).attr({
					'font' : '700 '+ 1.2*chartObj.baseFont +'px NanumSquare',
					'text-anchor' : 'end'
				});
				var txt0102 = g.text(axis['x1']+15, axis['y1']+17, "Grade").attr({        
					'font' : '700 '+ 0.85*chartObj.baseFont +'px NanumSquare',
					'text-anchor' : 'end'
				});
				var txt0103 = g.text(axis['x1'], axis['y1']+35, result_txt[0]['grade']+"Pts." ).attr({   
					'font' : '400 '+ 0.85*chartObj.baseFont +'px NanumSquare'
				});
				var txt0201 = g.text(axis['x2']+35, axis['y2']-10, result_txt[1]).attr({
					'font' : '700 '+ 1.2*chartObj.baseFont +'px NanumSquare',
					'text-anchor' : 'end'
				});
				var txt0202 = g.text(axis['x2']+58, axis['y2']-8, "10,000 won" ).attr({    
					'font' : '400 '+ 0.85*chartObj.baseFont +'px NanumSquare',
					'text-anchor' : 'end'
				});
				var txt0301 = g.text(axis['x3']-unitLength, axis['y2']-10, result_txt[2]).attr({
					'font' : '700 '+ 1.2*chartObj.baseFont +'px NanumSquare',
					'text-anchor' : 'end'
				});
				var txt0302 = g.text(axis['x3']-10, axis['y2']-8, result_txt[3]).attr({
					'font' : '400 '+ 0.85*chartObj.baseFont +'px NanumSquare',
					'text-anchor' : 'end'
				});
				var bTit = g.set();
				bTit.push(txt0101, txt0102, txt0103, txt0201, txt0202, txt0301, txt0302)
				
				bgTxt = bTit
				return bTit;
			};
			backTitle(g);
            
			g.setStart();
				g.path(
					'M'+ axis['x1'] +","+ axis['y1']
					+" L"+ gx +","+ gy
					+" L"+ axis['x2'] +","+ axis['y2'] +"Z"
				).attr({
					'stroke-width' : 0,
					'fill' : '#ccc',
					'opacity' : '0.3'
				});

				g.path(
					'M'+ axis['x1'] +","+ axis['y1']
					+" L"+ gx +","+ gy
					+" L"+ axis['x3'] +","+ axis['y3'] +"Z"
				).attr({
					'stroke-width' : 0,
					'fill' : '#898d8f',
					'opacity' : '0.3'
				});

				g.path(
					'M'+ axis['x2'] +","+ axis['y2']
					+" L"+ gx +","+ gy
					+" L"+ axis['x3'] +","+ axis['y3'] +"Z"
				).attr({
					'stroke-width' : 0,
					'fill' : '#4b4f50',
					'opacity' : '0.3'
				});
			var triOpacity = g.setFinish();
			triOpacity.toFront();
			arrow.toFront();

			function TriInit(){
				bgTxt.hide();
				arrow.show();
				color.show();
				triOpacity.show();
				backRect.show();
				back.attr({
					'fill' : 'none'
				})
			}
			TriInit();
			
			var $hover = g.rect(0,0,svgW,svgH).attr({
				fill : '#fff',
				'opacity' : 0,
				'stroke-width' : 0
			});

			$hover.hover(function(g){
				arrow.hide();
				color.hide();
				triOpacity.hide();
				backRect.hide();
				bgTxt.show();
				back.attr({
					'fill' : bgRectOver
				})
			}, function(){
				TriInit();
			});
		}
	},
	range : function(data, id, svgW, svgH, gType, gradeMin, gradeMax){
		
		var paper;
		var viewListSize;
		var viewListW;
		var viewControllBtnW = 22;
		if (gType == 'year'){
			 viewListSize=$(".controller ul li").size()<5?5:$(".controller ul li").size();
			 viewListW=$(".controller ul li").outerWidth(true);
			svgW = viewListSize*viewListW+(viewControllBtnW*2);
		}
		
		paper = Raphael(id, svgW, svgH);
		
		
		paper.customAttributes.data = function (data) {
		    return data;
		};
		
		var gab
		if (gType == 'year'){
			 gab = {left:0, right:0, top:60, bottom:0};
		}else{
			 gab = {left:48, right:48, top:50, bottom:50};
		}
		var gabL = gab['left'];
		var gabR = gab['right'];
		var gabT = gab['top'];
		var gabB = gab['bottom'];
		
		var matrix = Raphael.matrix();
		matrix.translate(gabL, gabT);

		var maxPoint = 12;
		var baseFont = 12;

		var grade = {max : gradeMax, min : gradeMin}
		var graphW = svgW-gabL-gabR;
		var graphH = svgH-gabT-gabB;
		
		
		var baseLine = {
			'stroke-width' : 1,
			'stroke' : '#a7a4a4',
			'stroke-dasharray' : '-'
		}
		var baseTxt = {
			'fill' : '#515b61',
			'font' : '700 '+ 1.08*baseFont +'px NanumSquare'
		}
		
		function compare(val1, val2){
			if (val1 > val2){
				return -1;
			}else if (val1 < val2){
				return 1;
			}else{
				return 0;
			}
		}

		function compareYear(val1, val2){
			if (val1 < val2){
				return -1;
			}else if (val1 > val2){
				return 1;
			}else{
				return 0;
			}
		}

		// 타입 구분값
		var sortVal;
		if (gType == 'price'){

			var sortArr = [];
			$.each(data, function(){
				
				sortArr.push( parseFloat(this.price) )
			});
			
			sortArr.sort(compare)
			var maxNum = sortArr[sortArr.length-1] *1.1
			var minNum =sortArr[0] * 0.9
			sortVal = {max : maxNum , min : minNum}
			/*
			for (var i=0; i<sortArr.lenth ; i++ ){
				sortArr[i] = perseInt(sortArr[i])
					
			}
			console.log(sortArr)
			*/
			//sortVal = {max : 13000, min : 1000}
		}else if (gType == 'mileage'){
			var sortArr = [];

			$.each(data, function(){
				sortArr.push( parseFloat(this.mileage) )
			});
			sortArr.sort(compare)
			//sortVal = {max : sortArr[sortArr.length-1] , min : sortArr[0]}
			var maxNum = sortArr[sortArr.length-1] *1.1
			var minNum =sortArr[0] * 0.9
			sortVal = {max : maxNum , min : minNum}

			

			//console.log(sortArr)
			//console.log(sortVal)
		}else if (gType == 'year'){

			var sortArr = [];
			$.each(data, function(){
				
				sortArr.push( parseFloat(this.year) )
			});
			
			sortArr.sort(compareYear)
			var maxNum = sortArr[sortArr.length-1];
			var minNum = sortArr[0];
			
			sortVal = {max : maxNum , min : minNum}
			/*
			for (var i=0; i<sortArr.lenth ; i++ ){
				sortArr[i] = perseInt(sortArr[i])
					
			}
			console.log(sortArr)
			*/
			//sortVal = {max : 13000, min : 1000}
		}

		// base
		function back(paper) {
			paper.setStart();
			
				paper.rect(0, 0, graphW, graphH).attr({
					'fill' : '#fff',
					'opacity' : '0.44',
					'stroke' : '#9c9999',
					'stroke-width' : 1
				});
			
			var gradeValGab = ( grade['max'] - grade['min'] )/10;
			var sortValGab;
			var sortW;
			if (gType == 'year'){
			     var gradeH = (graphH-65)/10;
			     var viewListSize = $(".controller ul li").size();
				 sortValGab = ( sortVal['max'] - sortVal['min'] )/viewListSize;
				 sortW = graphW/viewListSize;
			}else{
			     var gradeH = graphH/10;
				 sortValGab = ( sortVal['max'] - sortVal['min'] )/10;
				 sortW = graphW/10;
			}
			
			if (gType == 'price'){
				sortValGab = Math.round(sortValGab)
			}

			function comma(str) {
				str = String(str);
				return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
			}
			function fix(val, num) {
				if (val != parseInt(val)){
					return val.toFixed(num);
				}else{
					return val;
				}
			};
			
			if (gType == 'year'){
				
				var score = gradeMax;
				var margin = Math.round(gradeH)-19;
				$(".line_num p").each(function(idx){
	                var p = this;
	                $(p).text(score.round(2));
	                score = score-gradeValGab;
	                //$(p).attr("style", "margin-bottom:"+(margin+idx)+"px;");
	                $(p).attr("style", "margin-bottom:"+(margin+idx-(idx*1.03))+"px;");
				});
			}
			
			for (var i=0; i<13 ; i++){ // 0,1,2,3
				if (i > 0){
					if (gType == 'year'){
						var line = ((maxPoint-i)*gradeH);
						paper.path("M0" +","+ line +"H"+graphW).attr(baseLine);
					}else{
						paper.path("M0" +","+ (maxPoint-i)*gradeH +"H"+graphW).attr(baseLine);
						
						
						paper.text(-15, (maxPoint-i)*gradeH, (gradeValGab*i+grade['min']).round(2)).attr(baseTxt);
						paper.path("M"+ (i*sortW) +","+ 0 +"V"+graphH).attr(baseLine);
						var sortNum = comma( fix( (sortValGab*(maxPoint-i) + sortVal['min'] ) , 1) );
						paper.text((i*sortW), graphH+15, sortNum).attr(baseTxt);
					}
							
					var sortNum = comma( fix( (sortValGab*(maxPoint-i) + sortVal['min'] ) , 1) );
					
				}else{
					if (gType == 'year'){
					   var line = ((maxPoint-i)*gradeH);
                       paper.path("M0" +","+ line +"H"+graphW).attr(baseLine);
					}else{
						var sortNum = comma( fix(sortVal['min'], 1));
						paper.text(graphW, graphH+15, sortNum).attr(baseTxt);
						paper.text(-15, (maxPoint-i)*gradeH, (gradeValGab*i+grade['min']).round(2)).attr(baseTxt);
					}
				}
			}
			var set = paper.setFinish();
			set.transform(matrix.toTransformString());
			
			// 기본 텍스트
			/*
			paper.setStart();
				paper.text(0, 0, "최고").attr(baseTxt).rotate(-90, 0, 0).translate(gabL-75,gabT+5);
				paper.text(0, graphH, "최저").attr(baseTxt).rotate(-90, 0, graphH).translate(gabL-55,gabT+5);
				paper.text(0, graphH+10, "높음").attr(baseTxt).translate(gabL+10,25);
				paper.text(graphW, graphH+10, "낮음").attr(baseTxt).translate(gabL-10,25);
				paper.rect(0, graphH, 60, 20).attr({
					'fill' : '#787675',
					'stroke-width' : 0
				}).rotate(-90, 0, graphH).translate(gabL-65,gabT-25);
				
				paper.text(30, graphH+10, "안전도 점수").attr({
					'fill' : '#fff',
					//'text-anchor' : 'start',
					'font' : '700 '+ 0.85*baseFont +'px NanumSquare'
				}).rotate(-90, 0, graphH).translate(gabL-65,gabT-25);
				var baseText = paper.setFinish();
			set.push(baseText)
			*/
			
			//set.hide()
			
			paper.setStart(); // dataSet 시작
			
			//console.log(dataXgab)
			var circleR = 5;
			var overR = 13;
			var dataXgab
			if (gType == 'year'){
				var viewListSize=$(".controller ul li").size();
				 dataXgab = $(".controller ul li").outerWidth(true);
				 var dataYgab = (graphH-65) / (grade['max'] - grade['min']);
			}else{
				 dataXgab = graphW / (sortVal['max'] - sortVal['min']);
				 var dataYgab = graphH / (grade['max'] - grade['min']);
			}
			var colorSet = ["#19914c" , "#fff200" , "#f7931e", "#7f533a", "#ed1c24"];

			var dataCircle = paper.set();
			var bgCircle = paper.set();
			var viewCon = paper.set();

			$.each(data, function(i){
			    var dataY;
				if (gType == 'price'){
					var dataX = graphW - (this.price - sortVal['min']) * dataXgab;
					var sortTxt = comma(this.price)+"10,000 won"  
					dataY = (graphH - (this.grade - grade['min']) * dataYgab);
				}else if (gType == 'mileage'){
					var dataX = graphW - (this.mileage - sortVal['min']) * dataXgab;
					var sortTxt = this.mileage +this.mileage_unit
					dataY = (graphH - (this.grade - grade['min']) * dataYgab);
				}else if (gType == 'year'){
					var dataX = (this.year - sortVal['min']) * dataXgab+(viewListW/2)+20;
					var sortTxt = comma(this.price)+"Year"  
				    dataY = ((graphH-65) - (this.grade - grade['min']) * dataYgab);
				}
				//var dataX = graphW - (this.price - sortVal['min']) * dataXgab;
				
				
				if (dataX < circleR/2 ){
					dataX = circleR
				}else if (dataX > graphW-circleR/2){
					dataX = graphW-circleR
				};

				if (dataY < circleR/2 ){
					dataY = circleR
				}else if (dataY > graphH-circleR/2){
					dataY = graphH-circleR
				};

				var txtColor = "#fff";
				if ( this.rating == 2){
					txtColor = "#333"
				}
				
				paper.text(dataX+circleR+4, dataY, this.name ).attr({
					'text-anchor' : 'start',
					'font' : '400 '+ 0.85*baseFont +'px NanumSquare'
				});

				var circle = paper.circle(dataX, dataY, circleR).attr({
					'fill' : colorSet[this.rating-1],
					'stroke' : 0
				}).toFront();
				
				var bg = paper.circle(dataX, dataY, circleR).attr({
					'fill' : 'red',
					'opacity' : 0,
					'stroke' : 0
				});
				
				var overData
				if (gType == 'year'){
					overData= paper.set(
						paper.circle(dataX, dataY, circleR*overR).attr({
						'fill' : colorSet[this.rating-1],
						'stroke' : 'none',
						'opacity' : 1,
						 'data' : this
						}),
						paper.text(dataX, dataY-(circleR*8), this.name ).attr({
							'font' : '700 '+ 1.16*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.text(dataX-(circleR*6), dataY-(circleR*4), this.rating).attr({
							'text-anchor' : 'end',
							'font' : '700 '+ 1.6*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.text(dataX-(circleR*2), dataY-(circleR*3.8), "Grade"  ).attr({    
							'text-anchor' : 'end',
							'font' : '500 '+ 1*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.text(dataX+(circleR*5), dataY-(circleR*4), this.grade).attr({
							'text-anchor' : 'end',
							'font' : '700 '+ 1.16*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.text(dataX+(circleR*7), dataY-(circleR*3.8), "Pts."  ).attr({    
							'text-anchor' : 'end',
							'font' : '500 '+ 1*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.image(this.img, dataX-(circleR*5), dataY-(circleR*1.5), 45, 27),

						paper.text(dataX, dataY+(circleR*6), this.mileage+this.mileage_unit ).attr({
							'font' : '500 '+ 1*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.text(dataX, dataY+(circleR*9), this.price+"10,000 won" ).attr({    
							'font' : '500 '+ 1*baseFont +'px NanumSquare',
							'fill' : txtColor
						})
					).toFront().hide();
				}else{
					overData= paper.set(
						paper.path("M" + dataX +","+ dataY +"H 0").attr({
							'stroke-width' : 1,
							'stroke' : '#7c7a7a',
							'stroke-dasharray' : '- '
						}),
						paper.rect(0, dataY-1.5 ,6, 3).attr({'fill' : '#333', 'stroke-width' : 0}),
						
						paper.path("M" + dataX +","+ dataY +"V "+ graphH).attr({
							'stroke-width' : 1,
							'stroke' : '#7c7a7a',
							'stroke-dasharray' : '- '
						}),
						paper.rect(dataX-1.5, graphH-6 ,3, 6).attr({'fill' : '#333', 'stroke-width' : 0}),
						
						paper.text(2, dataY-9 , this.grade+"Pts.").attr({  
							'fill' : '#333',
							'font' : '700 '+ .8*baseFont +'px NanumSquare',
							'text-anchor' : 'start'
						}),
						paper.text(dataX+7, graphH-7 , sortTxt).attr({
							'fill' : '#333',
							'font' : '700 '+ .8*baseFont +'px NanumSquare',
							'text-anchor' : 'start'
						}),
							
						paper.circle(dataX, dataY, circleR*overR).attr({
							'fill' : colorSet[this.rating-1],
							'stroke' : 'none',
							'opacity' : 1
						}),
						paper.text(dataX, dataY-(circleR*8), this.name ).attr({
							'font' : '700 '+ 1.16*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.text(dataX-(circleR*6), dataY-(circleR*4), this.rating).attr({
							'text-anchor' : 'end',
							'font' : '700 '+ 1.6*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.text(dataX-(circleR*2), dataY-(circleR*3.8), "Grade"  ).attr({    
							'text-anchor' : 'end',
							'font' : '500 '+ 1*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.text(dataX+(circleR*5), dataY-(circleR*4), this.grade).attr({
							'text-anchor' : 'end',
							'font' : '700 '+ 1.16*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.text(dataX+(circleR*7), dataY-(circleR*3.8), "Pts."  ).attr({    
							'text-anchor' : 'end',
							'font' : '500 '+ 1*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.image(this.img, dataX-(circleR*5), dataY-(circleR*1.5), 45, 27),

						paper.text(dataX, dataY+(circleR*6), this.mileage+this.mileage_unit ).attr({
							'font' : '500 '+ 1*baseFont +'px NanumSquare',
							'fill' : txtColor
						}),
						paper.text(dataX, dataY+(circleR*9), this.price+"10,000 won"  ).attr({   
							'font' : '500 '+ 1*baseFont +'px NanumSquare',
							'fill' : txtColor
						})
					).toFront().hide();
				}

				bg[0].onmouseover = function (e) {
					bg.stop().animate({ 'r' : circleR*overR}, 200);

					circle.stop().animate({ 'r' : circleR*overR}, 200, function(){
						overData.show();
					});
				};
				bg[0].onmouseout = function () {
					overData.hide();
					bg.stop().animate({ 'r' : circleR}, 200);
					circle.stop().animate({ 'r' : circleR}, 200);
				};
				
				
				bg.click(function(){
				    
				    if (gType == 'year'){
					    var idx = overData[0].attrs.data.idx;
					    var year = overData[0].attrs.data.year;
					    var url;
					    if(year < '2013'){
					        url = "KncapEvalOldResultDetial/initList.jsp?_menu_code_=KNCAP_EVAL_OLD_RESULT_LS&DETAIL_IDX="+idx+"&DETAIL_YEAR="+year;
					    }else{
					    	if(year >= '2017'){
					    		url = "KncapEvalResultDetail/initList2017.jsp?_menu_code_=KNCAP_EVAL_RESULT_LS&DETAIL_IDX="+idx+"&DETAIL_YEAR="+year;	
					    	}else{
					    		url = "KncapEvalResultDetail/initList.jsp?_menu_code_=KNCAP_EVAL_RESULT_LS&DETAIL_IDX="+idx+"&DETAIL_YEAR="+year;
					    	}
					        
					    }
					    
					    
					    window.location.assign("/app/"+url);
				    }
				});
				
				dataCircle.push(circle);
				bgCircle.push(bg);
				viewCon.push(overData);
			});

			viewCon.toFront();
			bgCircle.toFront();

			var dataSet = paper.setFinish(); // dataSet 끝
			dataSet.transform(matrix.toTransformString());
		};
		back(paper);
	},
/**
 - bar chart 함수 (2015.12.01. 신명진)
 - 현재 vertical bar chart만 구현함. 추가속성 지정 가능. 추후 다른차트가 필요하다면 추가 구현해야함.
 - dot, line, pie 차트까지는 구현할 수 있는 라이브러리는 있음
 > Parameters
 - data : chart data - array
 - svgW : chart width - number
 - svgH : chart height - number
 - labels : chart x axis value - array
 - yAxisMax : y axis max value
 - options : 차트 옵션
 **
 o {
 o showTooltip (boolean) 마우스 오버시 datatooltip을 보여줄지 여부. default:true
 o showLabel (boolean) true 라면 항상 라벨들을 표시하지만 false 인 경우 공간이 부족하면 출력하지 않음. default : false
 o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
 o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
 o vgutter (number)
 o colors (array) colors be used repeatedly to plot the bars. If multicolumn bar is used each sequence of bars with use a different color.
 o stacked (boolean) whether or not to tread values as in a stacked bar chart
 o to
 o stretch (boolean)
 o }
 **
 > Usage
 | svgDrawing.barchart([1,2,3,1], "div", 620, 300, ['label1', 'label2', 'label3', 'label4'], {});
*/
    barchart:function(data, id, labels, yAxisMax, options){
    
        var showLabel = options.showLabel==null?false:options.showLabel,
            showLabelCnt = options.showLabelCnt==null?12:options.showLabelCnt,
            showTooltip = options.showTooltip==null?true:options.showTooltip,
            vgutter = options.vgutter==null?20:options.vgutter;
        
        var svgW = $("#"+id).width(), 
            svgH = $("#"+id).height(),
            graphW = (svgW-45),
            graphH= (svgH-40);
        
        var r = Raphael(id, svgW, svgH),
            fin = function () {
                var str = this.bar.label + "\n" + this.bar.value||"0";
                this.flag = r.popup(this.bar.x, (this.bar.y +15), str ).insertBefore(this);
            },
            fout = function () {
                this.flag.animate({opacity: 0}, 300, function () {this.remove();});
            },
            baseTxt = {font: "11px  NanumSquare" },
            baseLine = {
            'stroke-width' : 1,
            'stroke' : '#a7a4a4',
            'stroke-dasharray' : '-'};
        
        r.rect(40, 5, graphW, graphH).attr({
                    'fill' : '#fff',
                    'opacity' : '0.44',
                    'stroke' : '#9c9999',
                    'stroke-width' : 1
                });
                
        
        var valueDiff = yAxisMax/4;
        var yAxisValue = 0;
        var yAxis = (graphH+5);
        var hDiff = (((svgH - 2 * vgutter) / yAxisMax)*valueDiff) -5;
        for(var i = 0; i<5; i++){
            if(i > 0){
                r.path("M40" +","+ (yAxis) +"H"+svgW).attr(baseLine);
                r.text(25, yAxis, yAxisValue).attr(baseTxt);
            }else{
                r.text(25, yAxis, yAxisValue).attr(baseTxt);
            }
            
            yAxisValue += valueDiff;
            yAxis -= hDiff;
        }           

        
        options['labels'] = labels;
        var chart = r.barchart(40, 5, svgW-20, svgH-20, [data], options);
        
        if(showTooltip){
            chart.hover(fin, fout);
        }
        
        
        var drop = false;
        var dropCnt = 3;
        if(!showLabel && chart.bars[0].length > showLabelCnt){
            dropCnt = Math.ceil(labels.length/showLabelCnt);
            drop = true;
        }
        
        for (var i = 0; i< chart.bars[0].length; i++) {
            
            if(drop && i % dropCnt != 0){
                continue;
            }
            
            var bar = chart.bars[0][i];
            barY = bar.y;
            var gutter_y = bar.w * 0.4;
            var label_x = bar.x
            var label_y = bar.y + bar.h + 16;
            var label_text = labels[i];
            
            
            if(label_text.length > 12 && showLabelCnt > 9) {
            	label_text = label_text.substr(0, 12);
            	label_text = label_text + ".."
            }            
            
            r.text(label_x, label_y, label_text).attr(baseTxt);
        }
    }
};