Refactoring Objekt dataRow generisch, Anpassung barX,barY,line #3

src-modules/module/viz/conf/includes.txt

@@ -1,9 +1,9 @@
 doku/viz_modul/viz.html
 WEB-INF/conf/edustore/db/bin/SQL_ENV_viz.sam
-xml/js/d3/viz_functions.js
-xml/js/d3/d3.min.js
-xml/js/d3/d3-license.txt
+xml/js/viz/viz_functions.js
+xml/js/viz/d3.min.js
+xml/js/viz/d3-license.txt
 xml/viz_html_chart.xsl
 images/icons/chart-bar.svg
-xml/js/d3/plot.js
+xml/js/viz/plot.js
 

superx/xml/js/viz/viz_functions.js

@@ -1,14 +1,25 @@
 /* d3 Code */
 
-function d3dataRow(nr,name,value ) 
+function d3dataRow(nr,dimension1,dimension2,measure ) 
     {
 this.nr=nr;
-this.name=name;
-this.value=value;
+this.dimension1=dimension1;
+this.dimension2=dimension2;
+this.measure=measure;
 
 }
 
-function chartPropertyValue(nr,name,value,isDefault ) 
+function selectionRowMetaData(nr,targetColumn,colname,colcaption,coltype,colfunction)
+{
+this.nr=nr;
+this.targetColumn=targetColumn;
+this.colname=colname;
+this.colcaption=colcaption;
+this.coltype=coltype;
+this.colfunction=colfunction;
+}
+
+function selectionPropertyValue(nr,name,value,isDefault ) 
     {
 this.nr=nr;
 this.name=name;
@@ -17,6 +28,8 @@ this.isDefault=isDefault;
 
 }
 
+
+
 function dimFunction(nr,name,value,isDefault ) 
     {
 this.nr=nr;
@@ -24,9 +37,38 @@ this.name=name;
 this.value=value;
 this.isDefault=isDefault;
 
+}
+function chartProperty(name,caption,isMeasure,isMandatory) 
+{
+this.name=name;
+this.caption=caption;
+this.isMeasure=isMeasure;
+this.isMandatory=isMandatory;
+this.getValueResultset = function () {
+var valueOptions=[];
+var optionCounter=0;
+selectionRsMetaData=fillSelectionResultMetaData();
+console.log("felder"+selectionRsMetaData.length);
+	for(var j=0;j < selectionRsMetaData.length;j++)
+		{
+		var isDefault=false;
+		console.log("feld "+selectionRsMetaData[j].nr+selectionRsMetaData[j].targetColumn);
+		if(selectionRsMetaData[j].nr)
+			{
+				if(selectionRsMetaData[j].targetColumn==this.name)
+					isDefault=true;
+				var o=new selectionPropertyValue(selectionRsMetaData[j].nr,selectionRsMetaData[j].colcaption,selectionRsMetaData[j].targetColumn,isDefault);
+				valueOptions[optionCounter]=o;
+				optionCounter++;
+			}
+		}
+	return valueOptions;
+}
+
 }
 
-function chartProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) 
+
+function selectionProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) 
     {
 this.name=name;
 this.caption=caption;
@@ -50,7 +92,7 @@ this.getValueResultset = function () {
 				{
 					if(rsMetaData[j].colcaption==defaultValue)
 						isDefault=true;
-					var o=new chartPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colname,isDefault);
+					var o=new selectionPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colname,isDefault);
 					valueOptions[optionCounter]=o;
 					optionCounter++;
 				}
@@ -64,7 +106,7 @@ this.getValueResultset = function () {
 			var isDefault=false;
 			if(rsMetaData[j].colcaption==defaultValue)
 						isDefault=true;
-			var o=new chartPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault);
+			var o=new selectionPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault);
 			valueOptions[k]=o;
 		}
 	}
@@ -72,13 +114,30 @@ this.getValueResultset = function () {
     }
 }
 
-function prepareChartProperties(chartType)
+function prepareSelectionForm()
 {
-	var dimFunctions=[];
-	var myFunction= new dimFunction(0,"Wort 1 ans Ende","switchWord1and2ff",false);
-	dimFunctions[0]=myFunction;
+	var selectionProperties=[];
+	
+	var myProp= new selectionProperty("dimension1","Dimension 1",true,false,true,null,null,true);
+	selectionProperties[0]=myProp;
+	var myProp= new selectionProperty("dimension2","Dimension 2",true,false,false,null,null,true);
+	selectionProperties[1]=myProp;
+	var myProp= new selectionProperty("measure1","Maß",true,true,true,null,null,true);
+	selectionProperties[2]=myProp;
+
+return selectionProperties;
+}
+
+function showChartPropertiesForm()
+{
+	document.getElementById("chartPropertiesFormDiv").style.visibility="visible";
+}
 
+function prepareChartProperties(chartType)
+{
 	var chartProperties=[];
+	//var chartWidth=getCommonChartProperty("chartWidth");
+	//document.forms["chartPropertiesForm"].elements["chartWidth"].value=chartWidth;
 	switch (chartType) {
 	case "bar_x":
 	chartProperties=prepareBarXForm();
@@ -93,18 +152,20 @@ function prepareChartProperties(chartType)
 	return false;
 	break;
 }
-renderForm("chartProperties",chartProperties,commonChartProperties,dimFunctions);
+renderForm("chartPropertiesFormDetails",chartProperties,commonChartProperties);
 
 return true;
+	
 }
 
+
 function prepareBarXForm()
 {
 	var chartProperties=[];
 	var propertyCounter=0;
-	var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,true,null,null,true);
+	var myProp= new chartProperty("viz_dimension1","Kategorie-Dimension",false,true);
 	chartProperties[0]=myProp;
-	var myProp= new chartProperty("viz_measure_dim","Maß",true,true,false,true,null,true);
+	var myProp= new chartProperty("viz_measure1","Maß",true,true);
 	chartProperties[1]=myProp;
 
 return chartProperties;
@@ -114,11 +175,11 @@ function prepareBarYForm()
 {
 	var chartProperties=[];
 	var propertyCounter=0;
-	var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,true,null,null,true);
+	var myProp= new chartProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true);
 	chartProperties[0]=myProp;
-	var myProp= new chartProperty("viz_series_dim","Serien-Dimension",true,false,false,null,null,true);
+	var myProp= new chartProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true);
 	chartProperties[1]=myProp;
-	var myProp= new chartProperty("viz_measure_dim","Maß",true,true,true,null,null,true);
+	var myProp= new chartProperty("viz_measure1","Maß",true,true,true,null,null,true);
 	chartProperties[2]=myProp;
 
 return chartProperties;
@@ -128,23 +189,166 @@ function prepareLineForm()
 {
 	var chartProperties=[];
 	var propertyCounter=0;
-	var myProp= new chartProperty("viz_category_dim","X-Achse",true,false,true,null,null,true);
+	var myProp= new chartProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true);
+	chartProperties[0]=myProp;
+	var myProp= new chartProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true);
+	chartProperties[1]=myProp;
+	var myProp= new chartProperty("viz_measure1","Maß",true,true,true,null,null,true);
+	chartProperties[2]=myProp;
+
+return chartProperties;
+}
+
+function prepareLineForm_alt()
+{
+	var chartProperties=[];
+	var propertyCounter=0;
+	var myProp= new chartProperty("dimension1","X-Achse",true,false,true,null,null,true);
 	chartProperties[0]=myProp;
-	var myProp= new chartProperty("viz_measure_dim","Y-Achse",true,true,true,null,null,true);
+	var myProp= new chartProperty("measure1","Y-Achse",true,true,true,null,null,true);
 	chartProperties[1]=myProp;
 
 return chartProperties;
 }
+function fillDataSelectionForm(formDiv)
+{
+	var selectionProperties=[];
+	var dimFunctions=[];
+	var myFunction= new dimFunction(0,"Wort 1 ans Ende","switchWord1and2ff",false);
+	dimFunctions[0]=myFunction;
+
+	selectionProperties=prepareSelectionForm();
+	for(var k=0;k < selectionProperties.length;k++)
+	{
+		fillSelectOptions(document.getElementById(selectionProperties[k].name),selectionProperties[k].getValueResultset(),selectionProperties[k].isMandatory);
+		if(selectionProperties[k].optionalFunction)
+		{
+			var fnSelElem = document.getElementById(selectionProperties[k].name+"_fn");
+			fillSelectOptions(fnSelElem,dimFunctions,false);
+		}
+	}
+	
+}
+
+function selectionResultPreview(myDiv)
+{
+	var selectionRs=[];
+	var selectionRsMetaData=[];
+	var rowcount=rs.length;
+	var maxLenCategoryDim=0;
+	var maxMeasure=0;
+	selectionRsMetaData=fillSelectionResultMetaData();
+	//alert(selectionRsMetaData[0].colname);
+	selectionRs=fillSelectionResult(selectionRsMetaData);
+
+	showSelectionTable("selectionResultPreviewTable",selectionRs,selectionRsMetaData,10);
+
+}
+function fillSelectionResultMetaData()
+{
+	var selectionRsMetaData=[];
+	var dimension1=document.getElementById("dimension1").value;
+	var dimension2=document.getElementById("dimension2").value;
+	var measure=document.getElementById("measure1").value;
+	
+	var functionOfDimension1=document.getElementById("dimension1_fn").value;
+	var functionOfDimension2=document.getElementById("dimension2_fn").value;
+	var functionOfMeasureDim=document.getElementById("measure1_fn").value;
+	
+	//first fill metadata:
+
+	var counter=1;
+	selectionRsMetaData.push(new selectionRowMetaData(counter,"dimension1",dimension1,getColumnCaption(dimension1),0,functionOfDimension1));
+	if(dimension2!="")
+		{
+		counter++;
+		selectionRsMetaData.push(new selectionRowMetaData(counter,"dimension2",dimension2,getColumnCaption(dimension2),0),functionOfDimension2);
+		}
+	counter++;
+	selectionRsMetaData.push(new selectionRowMetaData(counter,"measure",measure,getColumnCaption(measure),0),functionOfMeasureDim);
+	
+	return selectionRsMetaData;
+}
+function fillSelectionResult(selectionRsMetaData)
+{
+
+	var selectionRs=[];
+	//get MetaData:
+	var dimension1,dimension2,measure,
+	functionOfDimension1,functionOfDimension2,functionOfMeasureDim;
+	for(rownr=0;rownr<selectionRsMetaData.length;rownr++)
+	{
+		if(selectionRsMetaData[rownr].targetColumn=="dimension1")
+			{
+			dimension1=selectionRsMetaData[rownr].colname;
+			functionOfDimension1=selectionRsMetaData[rownr].colfunction;
+			}
+			
+		if(selectionRsMetaData[rownr].targetColumn=="dimension2")
+			{
+			dimension2=selectionRsMetaData[rownr].colname;
+			functionOfDimension2=selectionRsMetaData[rownr].colfunction;
+			}
+		if(selectionRsMetaData[rownr].targetColumn=="measure")
+			{
+			measure=selectionRsMetaData[rownr].colname;
+			functionOfMeasureDim=selectionRsMetaData[rownr].colfunction;
+			}
 			
-function renderForm(formDiv,chartProperties,myCommonChartProperties,dimFunctions)
+		}
+	//alert(dimension1+"-"+dimension2+"-"+measure+"-"+	functionOfCategoryDim+"-"+functionOfDimension2+"-"+functionOfMeasureDim);
+	//get and transform Data:
+	var maxLenDimension1=0;
+	var maxMeasure=0;
+	var rowcount=rs.length;
+	//alert("Zeilenanzahl " +rowcount);
+	for(rownr=0;rownr<rowcount;rownr++)
+	{
+		var dimension1Value=rs[rownr][dimension1];
+		if(functionOfDimension1)
+		{
+			dimension1Value=applyFunction(dimension1Value,functionOfDimension1);
+		}
+		var dimension2Value;
+		if(dimension2)
+			{
+			var dimension2Value=rs[rownr][dimension2];
+			if(functionOfDimension2!="")
+			{
+				dimension2Value=applyFunction(dimension2,functionOfDimension2);
+						}
+			}
+
+		var measureDimValue=rs[rownr][measure];
+		if(functionOfMeasureDim)
+		{
+			measureDimValue=applyFunction(measureDimValue,functionOfMeasureDim);
+		}
+		console.log(rownr +"-" + dimension1Value +"-" +dimension2Value +"-" +measureDimValue);
+		selectionRs.push(new d3dataRow(rownr,dimension1Value,dimension2Value,measureDimValue));
+		//identify max String length to compute x axis size
+		if(dimension1Value.length >maxLenDimension1)
+			maxLenDimension1=dimension1Value.length;
+		//the same for values:
+		if(measureDimValue >maxMeasure)
+			maxMeasure=measureDimValue;
+		
+		
+	}
+	//TODO:Sorting and filtering
+	return selectionRs;
+	
+}
+
+function renderForm(formDiv,chartProperties,myCommonChartProperties)
 {
 	//first empty form:
 	var myForm=document.getElementById(formDiv);
 	while (myForm.firstChild) {
 		myForm.removeChild(myForm.firstChild);
 	}
-	//now fill it:
 	const tabElem = document.createElement("table");
+	//tabElem.caption="Eigenschaften";
 	myForm.appendChild(tabElem);
 	for(var k=0;k < chartProperties.length;k++)
 		{
@@ -158,17 +362,6 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties,dimFunctions
 		selElem.id=chartProperties[k].name;
 		fillSelectOptions(selElem,chartProperties[k].getValueResultset(),chartProperties[k].isMandatory);
 		tdSelElem.appendChild(selElem);
-		if(chartProperties[k].optionalFunction)
-		{
-			const fnElemLabel = document.createTextNode(" opt. Fkt.: ");
-			const fnSelElem = document.createElement("select");
-			fnSelElem.name=chartProperties[k].name+"_fn";
-			fnSelElem.id=chartProperties[k].name+"_fn";
-			fillSelectOptions(fnSelElem,dimFunctions,false);
-			tdSelElem.appendChild(fnElemLabel);
-			tdSelElem.appendChild(fnSelElem);
-			
-		}
 				
 		rowElem.appendChild(tdCap);
 		rowElem.appendChild(tdSelElem);
@@ -229,15 +422,15 @@ if(selectedOption!=null)
 
 
 
-function prepareData()
+function prepareData_alt()
 {
 var data=[];
 
 var rowcount=rs.length;
-var colnrOfCategorydimName=document.getElementById("viz_category_dim").value;
-var colnrOfMeasure=document.getElementById("viz_measure_dim").value;
-var functionOfCategoryDim=document.getElementById("viz_category_dim_fn").value;
-var functionOfMeasureDim=document.getElementById("viz_measure_dim_fn").value;
+var colnrOfCategorydimName=document.getElementById("dimension1").value;
+var colnrOfMeasure=document.getElementById("measure1").value;
+var functionOfCategoryDim=document.getElementById("dimension1_fn").value;
+var functionOfMeasureDim=document.getElementById("measure1_fn").value;
 var maxLenName=0;
 var maxValue=0;
 for(j=1;j<rowcount;j++)
@@ -245,16 +438,16 @@ for(j=1;j<rowcount;j++)
 	console.log(rs.length+"-"+j+"-"+colnrOfCategorydimName);
 	if(rs[j][colnrOfCategorydimName]) //only if Name is not empty:
 	{
-	var categoryDimValue=rs[j][colnrOfCategorydimName];
+	var dimension1Value=rs[j][colnrOfCategorydimName];
 	var measureDimValue=rs[j][colnrOfMeasure];
 	if(functionOfCategoryDim !="")
-		categoryDimValue=applyFunction(categoryDimValue,functionOfCategoryDim);
+		dimension1Value=applyFunction(dimension1Value,functionOfCategoryDim);
 	if(functionOfMeasureDim !="")
 		measureDimValue=applyFunction(measureDimValue,functionOfMeasureDim);
-	data.push(new d3dataRow(j,categoryDimValue,measureDimValue));
+	data.push(new d3dataRow(j,dimension1Value,measureDimValue));
 	//identify max String length to compute x axis size
-	if(categoryDimValue.length >maxLenName)
-		maxLenName=categoryDimValue.length;
+	if(dimension1Value.length >maxLenName)
+		maxLenName=dimension1Value.length;
 	//the same for values:
 	if(measureDimValue >maxValue)
 		maxValue=measureDimValue;
@@ -265,60 +458,115 @@ return data;
 }
 
 
-function showDataTable()
+function showDataTable(myTableDiv,data,metadata,maxRows)
 {
-tableDiv=document.getElementById("tableDiv");
+	
+tableDiv=document.getElementById(myTableDiv);
 tableDiv.innerHTML=""; //reset table
-var rowcount=rs.length;
+var rowcount=data.length;
+if(rowcount > maxRows)
+	rowcount=maxRows;
 const tabElem = document.createElement("table");
 tabElem.border="1";
 tabElem.width="100%";
 const rowElem = document.createElement("tr");
-for(var col=0;col < rsMetaData.length;col++)
+for(var col=0;col < metadata.length;col++)
+	{
+	if(metadata[col].nr)
 		{
 		const thCap = document.createElement("th");
-	const textnode = document.createTextNode(rsMetaData[col].colcaption);
+		const textnode = document.createTextNode(metadata[col].colcaption);
 		thCap.appendChild(textnode);
 		rowElem.appendChild(thCap);
 		}
+	}
 tabElem.appendChild(rowElem);
 
 for(row=1;row<rowcount;row++)
 {
-	if(rs[row])
+	if(data[row])
 	{
 		const rowElem = document.createElement("tr");
-		for(var col=1;col < rs[row].length;col++)
+		for(var col=0;col < metadata.length;col++)
 			{
-			const tdCap = document.createElement("td");
-			if(rs[row][col])
+			if(metadata[col].nr)
 				{
-				const textnode = document.createTextNode(rs[row][col]);
+				const tdCap = document.createElement("td");
+				const textnode = document.createTextNode(data[row][metadata[col].colname]);
 				tdCap.appendChild(textnode);
-			}
 				rowElem.appendChild(tdCap);
 				}
+			}
 		tabElem.appendChild(rowElem);
 	}
 }
 tableDiv.appendChild(tabElem);
 }
 
+function showSelectionTable(myTableDiv,data,metadata,maxRows)
+{
 	
+tableDiv=document.getElementById(myTableDiv);
+tableDiv.innerHTML=""; //reset table
+var rowcount=data.length;
+if(rowcount > maxRows)
+	rowcount=maxRows;
+const tabElem = document.createElement("table");
+tabElem.border="1";
+tabElem.width="100%";
+const rowElem = document.createElement("tr");
+for(var col=0;col < metadata.length;col++)
+	{
+	if(metadata[col].nr)
+		{
+		const thCap = document.createElement("th");
+		const textnode = document.createTextNode(metadata[col].colcaption);
+		thCap.appendChild(textnode);
+		rowElem.appendChild(thCap);
+		}
+	}
+tabElem.appendChild(rowElem);
+
+for(row=1;row<rowcount;row++)
+{
+	if(data[row])
+	{
+		const rowElem = document.createElement("tr");
+		for(var col=0;col < metadata.length;col++)
+			{
+			if(metadata[col].nr)
+				{
+				const tdCap = document.createElement("td");
+				const textnode = document.createTextNode(data[row][metadata[col].targetColumn]);
+				tdCap.appendChild(textnode);
+				rowElem.appendChild(tdCap);
+				}
+			}
+		tabElem.appendChild(rowElem);
+	}
+}
+tableDiv.appendChild(tabElem);
+}
 
 function createChart()
 {
 chartType=document.getElementById("viz_chart_type").value;
 /*
-if(document.getElementById("viz_category_dim").value=="" || 
-	document.getElementById("viz_measure_dim").value=="" )
+if(document.getElementById("dimension1").value=="" || 
+	document.getElementById("measure1").value=="" )
 {
 	alert("Bitte wählen Sie eine Kategorie und ein Maß");
 	return false;
 }
 */
-var data=[];
+var selectionRsMetaData=[];
+var selectionRs=[];
+
 //data=prepareData();
+selectionRsMetaData=fillSelectionResultMetaData();
+//alert(selectionRsMetaData[0].colname);
+selectionRs=fillSelectionResult(selectionRsMetaData);
+
 	
 var valueLabelWidth = getCommonChartProperty("valueLabelWidth"); 
 var fontFamily=getCommonChartProperty("fontFamily"); 
@@ -326,7 +574,7 @@ var gridLabelHeight =  getCommonChartProperty("gridLabelHeight");
 var gridChartOffset = getCommonChartProperty("gridChartOffset");
 var chartWidth=getCommonChartProperty("chartWidth");
 var fontSize=getCommonChartProperty("fontSize");
-svg,data
+//svg,data
 document.getElementById("chartDiv").innerHTML=""; //reset canvas
 var svg = d3.select("#chartDiv").append("svg")
       .attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth)
@@ -343,17 +591,17 @@ case "sample":
 	makeSample();
 	break;
 case "bar_x":
-	makeBarX();
+	makeBarX(selectionRs);
     break;
 	case "bar_x_alt":
 		makeBarX(svg,data);
         break;
 	case "bar_y":
-		makeBarY();
+		makeBarY(selectionRs);
         break;
 	
 	case "line":
-		makeLine();
+		makeLine(selectionRs);
 		break;
 	default:
 		alert("Please select a chart type");
@@ -415,8 +663,8 @@ function makeBarX_alt(svg,data)
 }
 
 function makeLine_alt(svg,data) {
-var xLabel=rsMetaData[document.getElementById("viz_category_dim").value-1].colcaption;
-var yLabel=rsMetaData[document.getElementById("viz_measure_dim").value-1].colcaption;
+var xLabel=rsMetaData[document.getElementById("dimension1").value-1].colcaption;
+var yLabel=rsMetaData[document.getElementById("measure1").value-1].colcaption;
 var fontSize=getCommonChartProperty("fontSize");
 var maxLenName=d3.max(data, d => d.name.length);
 var maxLenNamePx=maxLenName*fontSize/1.5;
@@ -471,8 +719,8 @@ function makeSample()
 function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVertical)
 {
 	var options;
-	var categoryDim=document.getElementById("viz_category_dim").value;
-	var measureDim=document.getElementById("viz_measure_dim").value;
+	var categoryDim=document.getElementById("dimension1").value;
+	var measureDim=document.getElementById("measure1").value;
 	var fontSizeDefault=getCommonChartProperty("fontSize");
 	var chartWidth=getCommonChartProperty("chartWidth");
 	var marginLeftDefault=chartWidth/5; //20% liner Rand
@@ -517,15 +765,15 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 		 		}
 		
 		}
-	document.getElementById("chartOptions").innerHTML=JSON.stringify(options);
+	//document.getElementById("chartOptions").innerHTML=JSON.stringify(options);
 
 	return options;
 }
-function makeBarX() {
-	var categoryDim=document.getElementById("viz_category_dim").value;
-	var measureDim=document.getElementById("viz_measure_dim").value;
+function makeBarX(selectionRs) {
+	var categoryDim=document.getElementById("viz_dimension1").value;
+	var measureDim=document.getElementById("viz_measure1").value;
 	var marksArray=new Array();
-	marksArray[0]=Plot.barX(rs,
+	marksArray[0]=Plot.barX(selectionRs,
     			    	{
     		          x: measureDim, 
     		          y: categoryDim
@@ -535,11 +783,11 @@ function makeBarX() {
 	
 	document.getElementById("chartDiv").appendChild(Plot.plot(options));
 	}
-function makeBarY() {
-	var categoryDim=document.getElementById("viz_category_dim").value;
-	var measureDim=document.getElementById("viz_measure_dim").value;
+function makeBarY(selectionRs) {
+	var categoryDim=document.getElementById("viz_dimension1").value;
+	var measureDim=document.getElementById("viz_measure1").value;
 	var marksArray=new Array();
-	marksArray[0]=Plot.barY(rs,
+	marksArray[0]=Plot.barY(selectionRs,
     			    	{
     		          y: measureDim, 
     		          x: categoryDim
@@ -549,11 +797,11 @@ function makeBarY() {
 	
 	document.getElementById("chartDiv").appendChild(Plot.plot(options));
 	}
-function makeLine() {
-	var categoryDim=document.getElementById("viz_category_dim").value;
-	var measureDim=document.getElementById("viz_measure_dim").value;
+function makeLine(selectionRs) {
+	var categoryDim=document.getElementById("viz_dimension1").value;
+	var measureDim=document.getElementById("viz_measure1").value;
 	var marksArray=new Array();
-	marksArray[0]=Plot.line(rs,
+	marksArray[0]=Plot.line(selectionRs,
     			    	{
     		          y: measureDim, 
     		          x: categoryDim,
@@ -570,8 +818,8 @@ function makeLine() {
 	document.getElementById("chartDiv").appendChild(Plot.plot(options));
 	}
 function makeBarY_alt(svg,data) {
-var xLabel=rsMetaData[document.getElementById("viz_category_dim").value-1].colcaption;
-var yLabel=rsMetaData[document.getElementById("viz_measure_dim").value-1].colcaption;
+var xLabel=rsMetaData[document.getElementById("dimension1").value-1].colcaption;
+var yLabel=rsMetaData[document.getElementById("measure1").value-1].colcaption;
 var fontSize=getCommonChartProperty("fontSize");
 var maxLenName=d3.max(data, d => d.name.length);
 var maxLenNamePx=maxLenName*fontSize/1.5;
@@ -636,7 +884,7 @@ for (var i=0;i<numberOfChildNodes;i++)
 	}
 //alert(svg_xml);
 document.getElementById("chartSrc").innerHTML=svg_xml;
-document.getElementById("chartSrcFields").style.visibility="visible";
+document.getElementById("chartSVGsrc").style.visibility="visible";
 /*
     const selection = window.getSelection();
     const range = document.createRange();

superx/xml/viz_html_chart.xsl

@@ -1086,12 +1086,13 @@ var platform='superx';
 <script language="Javascript">
 
 <xsl:text>
-function dataRowMetaData(nr,colname,colcaption,coltype)
+function dataRowMetaData(nr,colname,colcaption,coltype,colfunction)
     {
     this.nr=nr;
 this.colname=colname;
 this.colcaption=colcaption;
 this.coltype=coltype;
+this.colfunction=colfunction;
 }
 
 function dataRow(rownr</xsl:text>
@@ -1130,12 +1131,14 @@ var rs= new Array();
 rsMetaData.push(new dataRowMetaData(</xsl:text>
 <xsl:value-of select="$rownr"/>
 <xsl:text>,'</xsl:text>
-<xsl:value-of select="f_name"/>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template>
 <xsl:text>','</xsl:text>
 <xsl:call-template name="remove_linebreaksAndQuot">
 <xsl:with-param name="volltext" select="wert" />
 </xsl:call-template>
-<xsl:text>',0));</xsl:text> <!--coltype noch unbekannt-->
+<xsl:text>',0,null));</xsl:text> <!--coltype noch unbekannt, colfunction unnötig-->
 </xsl:for-each>
 
 
@@ -1182,70 +1185,129 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 
 
 </script>
-<table border="0">
-<tr><td>Ausgabetyp:</td>
-<td><select class="maskinputPflicht" id="viz_chart_type" NAME="viz_chart_type" tabindex="200" onChange="prepareChartProperties(this.value)" >
+<div id="dataDiv">
+<div id="dataDivHeader">
+<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datentabelle anzeigen" onClick="showDataTable('dataDivTable',rs,rsMetaData,10);" />
+</div>
+
+<div id="dataDivTable" style="border:thin solid black">
+</div>
+</div>
+
+<div id="dataSelectionDiv">
+<div id="dataSelectionHeader">
+<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datenselektion anzeigen" onClick="fillDataSelectionForm('dataSelectionFormDiv');" />
+
+</div>
+<div id="dataSelectionFormDiv">
+<form name="dataSelectionForm">
+<table>
+<tr><th>Dimension</th><th>Auswahl</th><th>Transformation (optional)</th></tr>
+<tr><td>Dimension 1:</td>
+<td><select class="maskinputPflicht" id="dimension1" NAME="dimension1" tabindex="210">
     <option class="maskinput" value="">Bitte wählen</option>
-    <option class="maskinput" value="sample">Beispiel</option>
-    <option class="maskinput" value="bar_x">Balkendiagramm horizontal (einfach)</option>
-    <option class="maskinput" value="bar_y">Balkendiagramm vertikal (einfach)</option>
-    <option class="maskinput" value="line">Liniendiagramm vertikal (einfach)</option>
+</select>
+</td>
+<td><select  id="dimension1_fn" NAME="dimension1_fn" tabindex="210">
+    <option class="maskinput" value="">vordefinierte Funktionen:</option>
 </select>
 </td>
 </tr>
-</table>
-<div id="chartProperties" style="background-color:ECEDEF;border:thin solid gray">
-
-</div>
-<!--<tr><td>Kategorie-Dimension:</td>
-<td><select class="maskinputPflicht" id="viz_category_dim" NAME="viz_category_dim" tabindex="210">
+<tr><td>Dimension 2:</td>
+<td><select class="maskinputPflicht" id="dimension2" NAME="dimension2" tabindex="210">
     <option class="maskinput" value="">Bitte wählen</option>
 </select>
 </td>
+<td><select  id="dimension2_fn" NAME="dimension2_fn" tabindex="210">
+    <option class="maskinput" value="">vordefinierte Funktionen:</option>
+</select>
+</td>
 </tr>
 <tr><td>Maß:</td>
-<td><select class="maskinputPflicht" id="viz_measure_dim" NAME="viz_measure_dim" tabindex="220">
+<td><select class="maskinputPflicht" id="measure1" NAME="measure1" tabindex="220">
     <option class="maskinput" value="">Bitte wählen</option>
 </select>
-Aggregatfunktion: <select class="maskinputPflicht" id="viz_measure_dim_func" NAME="viz_measure_dim_func" tabindex="230">
-    <option class="maskinput" value="sum">Summe</option>
+</td>
+<td>
+<select id="measure1_fn" NAME="measure1_fn" tabindex="230">
+    <option class="maskinput" value="">vordefinierte Funktionen:</option>
 </select>
 </td>
 </tr>
-<tr><td>Breite</td>
-<td><input type="text" class="maskinputPflicht" id="viz_width" NAME="viz_width" tabindex="240" size="5" value="800"/> px
+</table>
+</form>
+</div>
+</div>
 
+<div id="selectionResultPreview">
+<div id="selectionResultPreviewHeader">
+<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Selektion anzeigen" onClick="selectionResultPreview('selectionResultPreviewTable');" />
+
+</div>
+<div id="selectionResultPreviewTable" style="border:thin solid black">
+</div>
+
+</div>
+
+<div id="chartProperties">
+<div id="chartPropertiesHeader">
+<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Diagramm-Format anzeigen" onClick="showChartPropertiesForm();" />
+</div>
+<div id="chartPropertiesFormDiv" style="visibility:hidden">
+<form name="chartPropertiesForm">
+<table border="0">
+<tr><td>Ausgabetyp:</td>
+<td><select class="maskinputPflicht" id="viz_chart_type" NAME="viz_chart_type" tabindex="200" onChange="prepareChartProperties(this.value)" >
+    <option class="maskinput" value="">Bitte wählen</option>
+    <option class="maskinput" value="sample">Beispiel</option>
+    <option class="maskinput" value="bar_x">Balkendiagramm horizontal (einfach)</option>
+    <option class="maskinput" value="bar_y">Balkendiagramm vertikal (einfach)</option>
+    <option class="maskinput" value="line">Liniendiagramm vertikal (einfach)</option>
+</select>
 </td>
 </tr>
-<tr><td></td>
-<td>
-</td>
-</tr>
-</table>-->
-<p><input type="button" tabindex="10000" class="sx_buttondiv_submit" value="Diagramm erzeugen" onClick="createChart();" /> 
-<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datentabelle anzeigen" onClick="showDataTable();" />
-</p>
+</table>
+<div id="chartPropertiesFormDetails">
+
+</div>
+
+<div id="chartPropertiesFooter">
+<input type="button" tabindex="10000" class="sx_buttondiv_submit" value="Diagramm erzeugen" onClick="createChart();" />  
+<button class="sx_buttondiv_submit" onClick="showOptionsCode();">Plot-Quellcode</button>
+</div>
+</form>
+</div>
+</div>
+
+<div id="chartCanvas">
+<div id="chartCanvasHeader">
+
+</div>
+
 <div id="chartDiv" style="border:thin solid black">
 </div>
-<p>
+<div id="chartCanvasFooter">
+
+</div>
+</div>
+<div id="chartSVGsrcDiv">
+<div id="chartSVGsrcDivHeader">
 <button class="sx_buttondiv_submit" onClick="showSrcCode();">SVG-Quellcode</button>
-<button class="sx_buttondiv_submit" onClick="showOptionsCode();">Plot-Quellcode</button>
-</p>
-<div id="chartSrcFields"  style="visibility:hidden">
-<textarea id="chartSrc" name="chartSrc" class="textarea" placeholder="Quellcode..."  cols="100" rows="20"></textarea><button class="sx_buttondiv_submit" onClick="copySrcCode('chartSrc');">Kopieren</button>
+
 </div>
-<div id="chartOptionsFields"  style="visibility:hidden">
-<textarea id="chartOptions" name="chartOptions" class="textarea" placeholder="Quellcode..."  cols="100" rows="20"></textarea><button class="sx_buttondiv_submit" onClick="copySrcCode('chartOptions');">Kopieren</button>
+<div id="chartSVGsrc"  style="visibility:hidden">
+<textarea id="chartSrc" name="chartSrc" class="textarea" placeholder="Quellcode..."  cols="100" rows="20"></textarea><button class="sx_buttondiv_submit" onClick="copySrcCode('chartSrc');">Kopieren</button>
 </div>
-<div id="tableDiv" style="border:thin solid black">
 </div>
+
+
 </xsl:for-each>
 </xsl:template>
 <xsl:template name="getColumnNameJS">
 <xsl:param name="columnNameFromDB" />
 <xsl:choose>
 <xsl:when test="contains($columnNameFromDB,'?')">
-<xsl:value-of select="concat('column_',@id)"/>
+<xsl:value-of select="concat('column_',@id+1)"/>
 </xsl:when>
 <xsl:otherwise>
 <xsl:value-of select="$columnNameFromDB"/>