/**
 * Javascript Chart Drawing Class 
 * Draws on an html canvas
 * 
 * copyright Maurizio Tidei & Jürgen Pospischil, 2010
 */

function Chart() {
	
	this.xAxisName;
	this.xAxisLabels;
	this.yAxisName;
	this.title;
	this.showLegend = true;
	
	this.type;
	this.series;
	this.seriesNames;
	this.seriesColors;
	this.axis;
	this.xmlDoc;
	this.labelWidth;
	this.pixelsPerUnit;
	this.ctx;
	
	this.canvasId = "canvas";
	
	this.height;
	this.width;
	this.leftSpace;
	this.rightSpace;
	this.bottomSpace;
	this.topSpace;
	this.labelSpacing;
	this.colors = new Array("#007FE8", "#D8A715", "#15D819", "#00C9E7", "#D9E700", "#E70000", "#7700E7");
	
	this.rangeMax;
	this.rangeMin;
	this.direction = 1;
	this.yZero;
	
	this.font = "sans";
	this.fontsize = 8;
	
	this.debug = false;
	
	this.firstDraw = true;
	
	// scrolling horizontally
	this.xScaling = 1;
	this.xOffset = 0;
	
	this.mouseX = -1;
	this.mouseDown = false;
	
	this.dragging = false;
	this.drawing = false;
	
	this.isIE = navigator.userAgent.indexOf("MSIE") > -1;
	
	this.metalAvgPrice = 0;
	this.metalPriceTrend = "";
	this.metalName = "";
	this.metalPostfix = "";
	
	this.init = function(canvasId) {
		
		if(canvasId != null) {
			this.canvasId = canvasId;
		}
		
		this.height = document.getElementById(this.canvasId).height;
		this.width = document.getElementById(this.canvasId).width;
		
		this.leftSpace   = 25;
		this.rightSpace  = 10;
		this.bottomSpace = 28;
		this.topSpace  = 10;
		this.labelSpacing = 10;
		
		this.rangeMax = 0;
		this.rangeMin = 0;
		
		this.metalAvgPrice = 0;
		this.metalPriceTrend = "";
		this.metalName = "";
		
		this.xOffset = 0;
		this.xScaling = 1;
		
		this.series = new Array();
		this.seriesColors = new Array();
	};
	
	this.setXAxis = function(name, labels) {
		this.xAxisLabels = labels;
		this.xAxisName = name;
	};
	
	this.setYAxis = function(name, minValue, maxValue, direction) {
		this.yAxisName = name;
		this.rangeMax = maxValue;
		this.rangeMin = minValue;
		if(direction == 1 || direction == -1) {
			this.direction = direction;
		}
	};
	
	this.addSeries = function(name, values, color) {
		
		this.series[name] = values;
		if(color != null) {
			this.seriesColors[name] = color;
		}
		
		for(var j in values) {
        	//var valueSet = values[j].split(",");
			var valueSet = values;
        	for(var k = 0; k < valueSet.length; k++) {
  				var value = parseFloat(valueSet[k]);
  				if(value > this.rangeMax) {
  					this.rangeMax = Math.ceil(value);
  				}
  				if(value < this.rangeMin) {
  					this.rangeMin = Math.floor(value);
  				}
			}
		}
	};
	
	this.setShowLegend = function(show) {
		this.showLegend = show;
	};
	
	this.parseData = function(xml) {
		
		this.rangeMax = 0;
		this.rangeMin = 0;
		
		this.metalAvgPrice = 0;
		this.metalPriceTrend = "";
		this.metalName = "";
		
		this.xOffset = 0;
		this.xScaling = 1;
		
		if(typeof xml == "string") {
			this.xmlDoc = new XML().parseXML(xml);
		}
		else {
			this.xmlDoc = xml;
		}
		
		var rootNode = this.xmlDoc.getElementsByTagName("chart")[0];
		this.type = rootNode.attributes.getNamedItem("type").value;
		
		this.series = this.xmlDoc.getElementsByTagName("series");
		this.axis = this.xmlDoc.getElementsByTagName("axis");
		
		
		for(var i = 0; i < this.axis.length; i++) {
			var id = this.axis[i].attributes.getNamedItem("id").value;
			var name = this.axis[i].attributes.getNamedItem("name").value;
			var labels = this.axis[i].attributes.getNamedItem("labels");
			if(labels != null) {
				labels = labels.value;
			}
			if(id == "x") {
				this.xAxisLabels = labels.split(";");
				this.xAxisName = name;
			}
			else if(id == "y") {
				this.yAxisName = name;
			}
		}
		
		for(var i = 0; i < this.series.length; i++) {
			var currentSeries = this.series[i];
			var values = currentSeries.attributes.getNamedItem("values").value.split(";");
			
			for(var j in values) {
	        	var valueSet = values[j].split(",");
	        	for(var k = 0; k < valueSet.length; k++) {
	  				var value = parseInt(valueSet[k]);
	  				if(value > this.rangeMax) {
	  					this.rangeMax = value;
	  				}
	  				if(value < this.rangeMin) {
	  					this.rangeMin = value;
	  				}
				}
			}
		}
		
		var metalElement = this.xmlDoc.getElementsByTagName("metal");
		if(metalElement.length > 0) {
			this.metalName = metalElement[0].attributes.getNamedItem("name").value;
			if(metalElement[0].attributes.getNamedItem("average") != null) {
				this.metalAvgPrice = metalElement[0].attributes.getNamedItem("average").value;
			}
			if(metalElement[0].attributes.getNamedItem("values") != null) {
				this.metalPriceTrend = metalElement[0].attributes.getNamedItem("values").value;
			} 
			this.metalPostfix = metalElement[0].attributes.getNamedItem("postfix").value;
		}
	};
	

    this.drawMessage = function() {
    	var canvas = document.getElementById(this.canvasId);
		this.ctx = canvas.getContext("2d");
		// this adds the text functions to the this.ctx
		CanvasTextFunctions.enable(this.ctx);
		
		this.ctx.drawTextRight("", 8, this.width/2, this.height/2, "Updating chart...");
    };

	this.draw = function(dragging, type) {
		
		this.drawing = true;
		
		this.dragging = dragging ? true : false;
		
		//this.init();
		
		var canvas = document.getElementById(this.canvasId);
		canvas.onmousemove = null;

        // check that canvas was initialized for IE, init otherwise
        if ((!canvas.getContext) && (typeof G_vmlCanvasManager != "undefined")) {
          canvas = G_vmlCanvasManager.initElement(canvas);
        }
		
		this.ctx = canvas.getContext("2d");
		this.ctx.clearRect(0,0,this.width,this.height);
		this.ctx.strokeStyle = "rgba(0,0,0,1)";
		
		// this adds the text functions to the context 2d
		CanvasTextFunctions.enable(this.ctx);
		
		if(this.series == null) {
			
			this.ctx.drawText(this.font, 10, this.leftSpace+20, 20, "No data.");
		}
		else if(type == "bar") {
			this.drawBarChart();
		}
		else if(type == "line") {
			this.drawLineChart();
		}
		
		//IE bug workaround: last canvas command is ignored on first draw call...
		if(this.firstDraw && this.isIE) {
			this.ctx.stroke(); 
		}
		
		this.firstDraw = false;
		
		// enable dragging if graph is scaled
		if(this.xScaling > 1) {
		
			canvas.onmousedown = function(e) {
				chart.mouseDown = true;
				chart.mouseX = mouseCoords(e).x;
			};
			
			canvas.onmouseup = function(e) {
				chart.mouseDown = false;
				chart.draw(false);
			};
			
			canvas.onmouseout = function(e) {
				chart.mouseDown = false;
			};
						
			document.onmousemove = function(e) {
				if(chart.mouseDown && !chart.drawing) {
					var mousePos = mouseCoords(e);
					var incr = chart.mouseX - mousePos.x;
					chart.xOffset += incr;
					chart.mouseX = mousePos.x;
					chart.draw(true);
				}
			};
		
			canvas.style.cursor = "move";
		}
		else {
			canvas.onmousedown = null;
			canvas.onmouseup = null;
			canvas.onmouseout = null;
			document.onmousemove = null;
			canvas.style.cursor = null;
		}
		
		this.drawing = false;
	};
	
	this.drawCoordinateSystem = function() {
		
		this.ctx.lineWidth = 1;
		
		//this.rangeMax *= 1.05;
		this.rangeMin *= 0.9;
		
		// adjust left space if y axis labels are too wide
		var textWidth = this.ctx.measureText(this.font, this.fontsize, this.rangeMax.toString());
		this.leftSpace += Math.round(textWidth);
		
		// compute width x axis label
		this.labelWidth = Math.floor((this.width-this.leftSpace-this.rightSpace) / this.xAxisLabels.length);
		if(this.labelWidth < 13) {
			this.xScaling = 13 / this.labelWidth;
		}
		this.labelWidth = this.labelWidth * this.xScaling;
		
		// chek if x axis labels have to be drawn diagonally or even vertically
		var drawLabelsDiagonally = false;
		var fontsize = this.fontsize;
		var rotDegree = 45;
		var alternate = false;
		while(this.labelWidth <= fontsize) {
			fontsize--;
		}
				
		if(fontsize <= 7) {
			fontsize++;
			rotDegree = 90; 
			alternate = true;
		}
		
		var maxTextWidth = 0;
		var averageTextWidth = 0;
		for(var i in this.xAxisLabels) {
			var textWidth = this.ctx.measureText(this.font, fontsize, this.xAxisLabels[i]);
			if(maxTextWidth <= textWidth) {
				maxTextWidth = textWidth;
			}
			averageTextWidth += textWidth;
		}
		averageTextWidth = Math.round(averageTextWidth/this.xAxisLabels.length);
		if(maxTextWidth >= this.labelWidth - 5) {
			drawLabelsDiagonally = true;
			if(alternate) {
				this.bottomSpace += Math.round(averageTextWidth + maxTextWidth);
			}
			else {
				this.bottomSpace += Math.round(maxTextWidth * 0.7);
			}
		}
		
		// x axis
		var yzero = this.height - this.bottomSpace - 0.5;
		this.ctx.beginPath();
		this.ctx.moveTo(this.leftSpace, yzero);
		this.ctx.lineTo(this.width-this.rightSpace, yzero);
		this.ctx.stroke();
		
		this.ctx.globalAlpha = 1;
		//this.ctx.drawTextRight(this.font, this.fontsize, this.leftSpace-8, yzero, ""+0);
		
		// y axis
		this.ctx.beginPath();
		this.ctx.moveTo(this.leftSpace-0.5, this.height-this.bottomSpace);
		this.ctx.lineTo(this.leftSpace-0.5, this.topSpace);
		this.ctx.stroke();
		
		if(this.dragging && this.isIE) {
			return;
		}
		
		// draw horizontal lines with values
		var value = Math.round(this.rangeMin);
		var valueIncrement = Math.round((this.rangeMax - this.rangeMin)/10);
		if(valueIncrement <= 0) {
			valueIncrement = 1;
		}
		
		var valueRange = this.rangeMax - this.rangeMin;
		if(valueRange < 10) {
			valueRange = 10;
		}
		
		// compute height per unit
		this.pixelsPerUnit = ((this.height-this.bottomSpace-this.topSpace) / valueRange) * 0.9;
			
		if(this.direction < 0) {
			this.yZero = this.topSpace;
		}
		else {
			this.yZero = yzero;
		}
		
		do {
			var y = this.yZero - this.direction*Math.round((value-Math.round(this.rangeMin))*this.pixelsPerUnit) + 0.5;
			if(y < this.topSpace || y > yzero+0.5) {
				break;
			}
			this.ctx.globalAlpha = 0.15;
			this.ctx.beginPath();
			this.ctx.moveTo(this.leftSpace-5, y);
			this.ctx.lineTo(this.width-this.rightSpace, y);
			this.ctx.stroke();
			
			this.ctx.globalAlpha = 1;
			this.ctx.drawTextRight(this.font, this.fontsize, this.leftSpace-8, y, ""+value);
			
			value += valueIncrement;
		}
		while(true);
		
	
		// draw x axis labels
		for(var i in this.xAxisLabels) {
			
			this.ctx.globalAlpha = 1;
			var x = this.labelWidth*i + this.labelWidth/2;
			x = x - this.xOffset;
			
			if(x < 0 || x > this.width) {
				continue;
			}
			
			x = x + this.leftSpace;
			
			if(drawLabelsDiagonally) {
				this.ctx.save();
				var alt = 0;
				if(alternate && i%2==1) {
					alt = averageTextWidth+2;
				}
				this.ctx.translate(x+fontsize/2, this.height-this.bottomSpace+fontsize/2+2+alt);
				this.ctx.rotate((360-rotDegree)*2*3.1416/360);
				this.ctx.drawTextRight(this.font, fontsize, 0, 0, this.xAxisLabels[i]);
				this.ctx.restore();
			}
			else {
				this.ctx.drawTextCenter(this.font, fontsize, x, this.height-this.bottomSpace+10, this.xAxisLabels[i]);
			}
			
			/*
			if(this.series.length > 1 && (i % 2) == 0 && true) { //TODO Parameter
				var x2 = this.leftSpace + this.labelWidth*i - 0.5;
				/*
				this.ctx.globalAlpha = 0.3;
				this.ctx.beginPath();
				this.ctx.moveTo(x2, this.topSpace);
				this.ctx.lineTo(x2, this.height - this.bottomSpace + 5);
				this.ctx.stroke();
				*-/
				/*
				this.ctx.globalAlpha = 0.1;
				this.ctx.fillRect(x2, this.topSpace, this.labelWidth, this.height-this.bottomSpace-this.topSpace);
				*-/
			}
			*/
			
		}
		
		this.ctx.globalAlpha = 0.7;
		// draw x axis name
		this.ctx.drawTextCenter(this.font, 9, this.leftSpace+(this.width-this.leftSpace-this.rightSpace)/2, this.height-5, this.xAxisName);
		
		// draw y axis name characterwise from top to down
		for(var i = 0; i < this.yAxisName.length; i++) {
			this.ctx.drawTextCenter(this.font, 9, 5, (this.height-this.bottomSpace)/2 - this.yAxisName.length/2*12 + i*12 + 12, this.yAxisName.charAt(i));
		}
		this.ctx.globalAlpha = 1;
		
		if(this.debug) {
			document.write(this.labelWidth + " " + this.pixelsPerUnit);
		}
	
	};
	
	this.drawLegend = function() {
		// if more than one series, draw legend
		if(this.series != null && this.showLegend) {
			
			var maxTextWidth = 0;
			for(var seriesName in this.series) {
				var textWidth = this.ctx.measureText(this.font, this.fontsize, seriesName);
				if(maxTextWidth <= textWidth) {
					maxTextWidth = textWidth;
				}
			}
			
			var barWidth = 10;
			var barHeight = 10; 
			var x = this.width - this.rightSpace - maxTextWidth - 20;
				
			var i = 0;
			for(var seriesName in this.series) {
				this.ctx.fillStyle = this.getColor(i, seriesName);
				this.ctx.strokeStyle = this.getColor(i, seriesName);
				
				var y = this.topSpace + (barHeight+3)*i + 10.5;
				
				this.ctx.globalAlpha = 0.2;
				this.ctx.fillRect(x, y, barWidth, barHeight);
				this.ctx.globalAlpha = 1;
				this.ctx.strokeRect(x, y, barWidth, barHeight);
				this.ctx.drawText(this.font, this.fontsize, x + 15, y + this.fontsize, seriesName);
				
				i++;
			}
		}
	};
	
	this.drawMetalRect = function(y) {
		this.ctx.globalAlpha = 0.6;
		this.ctx.strokeRect(this.width - this.rightSpace + 8.5, y - 19, this.rightSpace - 9, 38);
		
		var my_gradient = this.ctx.createLinearGradient(this.width - this.rightSpace + 8.5, y - 19, this.width - this.rightSpace + 8.5 + 20, y + 30);
		
		if(this.metalName.indexOf("Gold") != -1) {
			my_gradient.addColorStop(0, "#FFFFDD");
			my_gradient.addColorStop(0.7, "#FFE770");
			//my_gradient.addColorStop(0.8, "#D4AF37");
			my_gradient.addColorStop(1, "#CCB957");
		}
		else {
			my_gradient.addColorStop(0, "#FFFFFF");
			my_gradient.addColorStop(1, "#999999");
		}
		this.ctx.fillStyle = my_gradient;
		this.ctx.fillRect(this.width - this.rightSpace + 8.5, y - 19, this.rightSpace - 9, 38);
		
		
		this.ctx.globalAlpha = 1;
		if(this.metalAvgPrice != 0) {
			this.ctx.drawText(this.font, 8, this.width - this.rightSpace/2, y - 10, "O");
			this.ctx.drawText(this.font, 8, this.width - this.rightSpace/2, y - 10, "/");
			this.ctx.drawText(this.font, 8, this.width - this.rightSpace + 12, y + 14, this.metalAvgPrice + this.metalPostfix);
		}
		this.ctx.drawTextRight(this.font, 9, this.width - 2, y + 2, this.metalName);		
	};
	
	this.drawLineChart = function() {
		
		this.adjustRightSpace();
		this.drawCoordinateSystem();
		
		if(this.metalPriceTrend != "") {
			this.ctx.fillStyle = "#000000";
			this.ctx.strokeStyle = "#000000";
			var lastY = this.drawLineChartLine(this.metalPriceTrend.split(";"), true);
			this.drawMetalRect(lastY);
		}
		
		// draw lines
		var i = 0;
		for(var seriesName in this.series) {
			this.ctx.fillStyle = this.getColor(i, seriesName);
			this.ctx.strokeStyle = this.getColor(i, seriesName);
			var values = this.series[seriesName];
			
			this.drawLineChartLine(values);
			
			i++;
		}
		
		this.drawLegend();
	};
	
	this.drawLineChartLine = function(values, light) {
		
		// draw lines connecting each single data point
		this.ctx.lineWidth = 2;
		var firstPoint = true;
		this.ctx.beginPath();
		for(var j in values) {
			if(values[j] != "") {
				var value = values[j];
				if(value != null && !isNaN(value)) {
					var valuePixels = Math.round((value-this.rangeMin) * this.pixelsPerUnit);
					
					var x = this.leftSpace + 0.5 + Math.round((parseInt(j)+0.5)*this.labelWidth);
					var y = this.yZero - this.direction*valuePixels;
					
					this.ctx.globalAlpha = 0.8;
					if(firstPoint) {
						this.ctx.moveTo(x, y);
						firstPoint = false;
					}
					else {
						this.ctx.lineTo(x, y);
					}
				}
			}
		}
		this.ctx.stroke();
		this.ctx.lineWidth = 1;
		
		
		// draw single data points
		for(var j in values) {
			if(values[j] != "") {
				var value = values[j];
				if(value != null && !isNaN(value)) {
				
					var valuePixels = Math.round((value-this.rangeMin) * this.pixelsPerUnit);
					
				    var x = this.leftSpace + 0.5 + Math.round((parseInt(j)+0.5)*this.labelWidth);
					var y = this.yZero - this.direction*valuePixels;
					
					if(!light) {
						//this.ctx.globalAlpha = 0.2;
						//this.ctx.fillRect(x-2, y-2, 4, 4);
						//this.ctx.globalAlpha = 1;
						//this.ctx.strokeRect(x-2, y-2, 4, 4);
						
						this.ctx.beginPath();
						this.ctx.arc(x, y, 3, 0, Math.PI*2, true);
						this.ctx.globalAlpha = 1;
						this.ctx.fillStyle = "#EEEEEE";
						this.ctx.fill();
						this.ctx.beginPath();
						this.ctx.arc(x, y, 3, 0, Math.PI*2, true);
						this.ctx.stroke();
						
					}
					else {
						this.ctx.fillStyle = "#DDDDDD";
						this.ctx.beginPath();
						this.ctx.arc(x, y, 2, 0, Math.PI*2, true);
						this.ctx.fill();
						this.ctx.strokeStyle = "#555555";
						this.ctx.beginPath();
						this.ctx.arc(x, y, 2, 0, Math.PI*2, true);
						this.ctx.stroke();
						//this.ctx.strokeRect(x-1, y-1, 2, 2);
					}
				}
			}
		}
		
		
		
		if(light) {
			this.ctx.strokeStyle = "#333333";
			this.drawHorizontalDottedLine(x, y, this.width - this.rightSpace + 8.5);
		}
		
		return y;
	};
	
	this.drawBarChart = function() {
		
		this.adjustRightSpace();
		
		this.drawCoordinateSystem();
		
		if(this.metalAvgPrice != 0) {
			// draw line for average metal price
			var metalAvgPricePixels = Math.round(this.metalAvgPrice * this.pixelsPerUnit);
			var metalAvgPriceY = this.height-metalAvgPricePixels-this.bottomSpace-0.5;
			
			//this.ctx.strokeStyle = this.colors[0];
			this.ctx.globalAlpha = 1;
			
			//this.ctx.beginPath();
			//this.ctx.moveTo(this.leftSpace, metalAvgPriceY);
			//this.ctx.lineTo(this.width - this.rightSpace + 9, metalAvgPriceY);
			//this.ctx.stroke();
			
			this.drawHorizontalDottedLine(this.leftSpace, metalAvgPriceY, this.width - this.rightSpace + 9);
			
			this.drawMetalRect(metalAvgPriceY);
		}
		
		var nbOfSeries = 0;
		for(i in this.series) {
			nbOfSeries++;
		}
		
		this.labelSpacing = Math.round(this.labelWidth/6);
		var barWidth = Math.round((this.labelWidth-this.labelSpacing)/nbOfSeries)-2;
		barWidth = barWidth;
		
		// draw bars
		var i = 0;
		for(var seriesName in this.series) {
			//this.ctx.fillStyle = "rgba(0,143,210,0.2)";
			this.ctx.fillStyle = this.getColor(i, seriesName);
			this.ctx.strokeStyle = this.getColor(i, seriesName);
			
			var values = this.series[seriesName];
			for(var j in values) {
				
				var value = values[j];
				
				//if(value.indexOf(">") != -1) {
				//	value = value.replace(">","");
				//	value = value+1;
				//}
				var barHeight = Math.round(value * this.pixelsPerUnit);
				
				var x = j*this.labelWidth + i*(barWidth+2) + Math.round(this.labelSpacing/2);
				x = x - this.xOffset;
				if(x < 0 || x > (this.width)) {
					continue;
				}
				x = x + this.leftSpace + 0.5;
				var y = this.height-barHeight-this.bottomSpace-0.5;
				
				this.ctx.globalAlpha = 0.25;
				this.ctx.fillRect(x, y, barWidth, barHeight);
				
				this.ctx.globalAlpha = 1;
				this.ctx.strokeRect(x, y, barWidth, barHeight);
			}
			
			i++;
		}
		
		this.drawLegend();
	};
	
	this.drawHorizontalDottedLine = function(x, y, endY) {
		var toggle = true;
		for(var x1 = x + 3; x1 < endY; x1 += 3) {
				if(toggle) {
					this.ctx.beginPath();
					this.ctx.moveTo(x1 - 3, y);
					this.ctx.lineTo(x1, y);
					this.ctx.stroke();
				}
				toggle = !toggle;
			}
	};
	
	this.getColor = function(seriesIndex, seriesName) {
		if(this.seriesColors[seriesName] != null) {
			return this.seriesColors[seriesName];
			
		} else if(this.colors.length > seriesIndex) {
			return this.colors[seriesIndex];
		}
		else {
			grayValue = seriesIndex - this.colors.length;
			grayValue = grayValue.toString(16);

			
			return "#" + grayValue + grayValue + grayValue + grayValue + grayValue + grayValue;
		}
	};
	
	this.adjustRightSpace = function() {
		if(this.metalName != "") {
			this.rightSpace += this.ctx.measureText(this.font, 9, this.metalName) + 3;
		}
	};
	
	this.main = function() {
		// bar tests
		/*
		this.parseXML("<chart type=\"bar\">" +
		"<axis id=\"x\" name=\"Euro\" labels=\"30-31;31-32;32-33;33-34;34-35\"/>" +
		"<axis id=\"y\" name=\"Anzahl\"/>" +
		"<series name=\"Serie1\" values=\"10;15;20;14;12\"/>" +
		"<series name=\"Serie2\" values=\"11;14;18;15;13\"/>" +
		"<series name=\"Serie3\" values=\"12;13;19;16;9\"/>" +
		"</chart>"
		);
		*/
		
		
		// line tests
		/*
		this.parseXML("<chart type=\"line\">" +
		"<axis id=\"x\" name=\"Date\" labels=\"01.09;02.09;03.09;04.09;05.09\"/>" +
		"<axis id=\"y\" name=\"Preis\"/>" +
		"<series name=\"Serie1\" values=\"10;15;20;14;12\"/>" +
		"<series name=\"Serie2\" values=\"11;14;18;15;13\"/>" +
		"<series name=\"Serie3\" values=\"12;13;19;16;9\"/>" +
		"</chart>"
		);
		*/
		 
		this.parseXML("<result><chart type=\"line\">" +
		"<axis id=\"x\" name=\"Date\" labels=\"01.2009;02.2009;03.2009;04.2009;05.2009;06.2009;07.2009;08.2009;09.2009;10.2009\"/>" +
		"<axis id=\"y\" name=\"Preis\"/>" +
		"<series name=\"Serie1\" values=\"10,8,11;;20,19,21;14,13,15;12,9,16;;;;;15\"/>" +
		"</chart>" +
		"<table>" +
		"<tr><td>test</td><td>test2</td></tr>" +
		"</table>" +
		"</result>"
		);
		
		/* 
		this.parseXML("<chart type=\"line\">" +
		"<axis id=\"x\" name=\"Date\" labels=\"01.2009;02.2009;03.2009;04.2009;05.2009;06.2009;07.2009;08.2009;09.2009\"/>" +
		"<axis id=\"y\" name=\"Preis\"/>" +
		"<series name=\"Serie1\" values=\"10,8,11;;20,19,21;14,13,15;12,9,16;;;;15\"/>" +
		"</chart>"
		);
		*/ 
		

		this.draw();
	};
}