function form_chart(lang){
	if (lang == 'de'){var title = 'Diagramme';}
	else {
		var title = 'Diagramm';
	};
	
	var chart_div = document.createElement('div');
	chart_div.id='chart_div';
	document.body.appendChild(chart_div);
	
	var grid_chart = document.createElement('div');
	grid_chart.id='grid_chart';
	document.body.appendChild(grid_chart);

	chart_load2 = function(){
		Ext.chart.Chart.CHART_URL = './geo/ext-3.2.1/resources/charts2.swf';
		
		var ds_start = new Ext.data.Store({
		
			id: 'ds_start',
			proxy: new Ext.data.HttpProxy({
				url: '/php/chart/chart.php?mkz=OBF44400'
			}),
			reader: new Ext.data.JsonReader({
				root: 'items'
			}, [
				{name: 'date', mapping: 'date', type: 'date', dateFormat: 'Y-m-d H:i:s'},
				{name: 'n_ges', mapping: 'n_ges'},
				{name: 'p_ges', mapping: 'p_ges'}
			]),
			autoLoad: true
			
			//"2007-11-05 00:00:00+01"
			
		});	
			
		ds_start.setDefaultSort('date', 'asc');
		
		//Grid
		if(Ext.getCmp('gridChart')){
			Ext.getCmp('gridChart').destroy();
		}
		//alert('huhu');
		var gridChart = new Ext.grid.GridPanel({
			store: ds_start,
			id: 'gridChart',
			renderTo: 'grid_chart',
			height: 278,
			width: 348,
			colModel: new Ext.grid.ColumnModel({
				columns: [
				{header: 'Datum', dataIndex: 'date', sortable: true, renderer: Ext.util.Format.dateRenderer('d.m.Y'), width: 110},
				{header: 'Stickstoff [mg/l]', dataIndex: 'n_ges', sortable: false, width: 110},
				{header: 'Phosphor [mg/l]', dataIndex: 'p_ges', sortable: false, width: 106}
				]
			})
		});
		
		//Chart

			// Create the Numeric Axes
		var currencyAxis = new Ext.chart.NumericAxis();
		//currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
		currencyAxis.alwaysShowZero = true;
		currencyAxis.calculateByLabelSize = false;
		currencyAxis.position = "right";
		currencyAxis.title = "Phosphor [mg/l]";

		var currencyAxis2 = new Ext.chart.NumericAxis();
		currencyAxis2.order = "secondary";
		currencyAxis2.position = "left";
		currencyAxis2.title = "Stickstoff[mg/l]";
		//currencyAxis2.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
		currencyAxis2.alwaysShowZero = true;

		//place the two axis in an array to be passed to the chart as configuration attribute
		var axes = new Array();
		axes.push(currencyAxis);
		axes.push(currencyAxis2);
		
		// Define a Series Definition
		var seriesDef = [{
			type: 'line', 
			displayName: 'Stickstoff [mg/l]', 
			yField: "n_ges", 
			axis: "secondary", 
			style: {
				size: 6,
				lineSize:1,
				lineColor: '#2bc3c9',
				//borderColor: 0xCC0000,
				//fillColor: '#98A3E8',
				//connectPoints:true
				color: '#2bc3c9',
				//alpha:0.5,
				fillColor: '#2bc3c9',                   
				fillAlpha:0.5
			}
			},{
			type: 'line', 
			displayName: "Phosphor [mg/l]", 
			yField: "p_ges", 
			axis: "primary", 
			style: {
				size: 6,
				lineSize:1,
				lineColor: '#c97810',
				//borderColor: 0xCC0000,
				//fillColor: '#98A3E8',
				//connectPoints:true
				color: '#c97810',
				//alpha:0.5,
				fillColor: '#c97810' ,                  
				fillAlpha:0.5
			}
		}];
				
		if(Ext.getCmp('chart_user')){
			Ext.getCmp('chart_user').destroy();
		}
		
		new Ext.Panel({
			width: 348,
			height: 200,
			layout:'fit',
			renderTo: 'chart_div',
			title: 'Mdg. Altchemnitz 1 (OBF44400), Fliessgewässer: Zwönitz',
			id: 'chart_user',
			items: {
				xtype: 'linechart',
				store: ds_start,
				series: seriesDef,
				xField: "date",
				yAxes: axes,
				xAxis: new Ext.chart.TimeAxis({
					labelRenderer: function(date) { return date.format("M-Y"); }
				}),
				//yAxis: currencyAxis2,
				chartStyle: {
					secondaryYAxis:{
						titleRotation:-90,
						titleFont:{color: '#2bc3c9'},
						//color:'#2bc3c9',
						font:{color: '#2bc3c9'}
					},
					yAxis:{
						titleRotation:-90,
						titleFont:{color:'#c97810'},
						//color:'#c97810',
						font:{color: '#c97810'}
					}
				}
			}
		});
	}

		
		
	var introTxt = 'Am Beispiel einer Auswahl sächsischer Gewässergütemessstellen wird die ';
	introTxt += 'Funktionalität für ein WebGIS-gestütztes Datenportal demonstriert. ';
	introTxt += 'Karte, Diagramm und Tabelle bilden hier eine funktionale Einheit. Mit ';
	introTxt += 'Klick auf die Karte wird eine Messstelle ausgewählt. Das entsprechende ';
	introTxt += 'Diagramm und die Datentabelle werden online erzeugt. Weitere Funktionen, ';
	introTxt += 'wie Daten- und Diagrammdownload, sind problemlos integrierbar.';
	
	chart_load2();
	


	var tablayout = {
		layout: 'table',
		layoutConfig: {
        	columns: 2,
			rows:2,
			tableAttrs: {
				id: 'tabChart',
				width: '680px',
				height: '500px'
			}
    	},
    	items:[{
    		html: introTxt,
			id:'introText',
			width: '300',
    		height: '210'
			//colspan: 2
    	},{
    		contentEl: 'chart_div',
    		id: 'td_chart',
			width: '360',
			height: '210'
    	},{
    		contentEl: 'map_chart',
			id: 'td_map_chart',
			style: {marginTop:'6px'},
    		width: '300',
    		height: '290'
			//rowspan:2

    	},{
    		contentEl: 'grid_chart',
    		id: 'td_grid_chart',
			width: '360',
    		height: '290',
			style: {marginTop:'6px'}
			//style: {marginLeft: '62px'}
    	}] 
	};
	
	if(Ext.getCmp('chartPanel')){
		Ext.getCmp('chartPanel').destroy();
	}

	var chartPanel = new Ext.Panel({
		title: title,
		id: 'chartPanel',
		width: 700,
		height: 550,
		frame: true,
		//style: {marginLeft: '10px', marginTop: '10px'},
		items: [tablayout],
		listeners :{
    			afterrender: function(){
				visdat.mapGo('chart');
    		}
    	}
	});
	
	return chartPanel;
}