/* d3 Code */
/*
const chartModel={

	id: "TEST",
	name: "testname",
	renderer: "plot" ,//renderer;
	//this.dataSources=datasources;
	//this.globalProperties=globalproperties;
	options: [],
	targetDiv: document.getElementById("chartDiv"),
	renderChart : function () {
		
		//console.log(JSON.stringify(this));
		document.getElementById("chartDiv").innerHTML=""; //reset canvas
		switch (this.renderer) {
			case "plot":
			this.renderChartWithPlot();
			break;
			default:
				alert("No renderer");
			break;
			}
		},
		
	renderChartWithPlot: function ()
	{
		console.log("using Plot");
		
		var svgPlot=Plot.plot(this.options[0]);
		document.getElementById("chartDiv").appendChild(svgPlot);
	}
	
}

*/
function chartModel(id,name,renderer,datasources)
{
	this.id=id;
	this.name=name;
	this.renderer=renderer;
	this.dataSources=datasources;
	//this.globalProperties=globalproperties;
	this.chartElements=new Array();
	this.options=new Object;
	this.options.marks=new Array();
	//let globalProperties={};
	
	this.getChartSVG = function () {
		
		//console.log(JSON.stringify(this));
		var mySVG="";
		switch (this.renderer) {
			case "plot":
			mySVG=this.getChartSVGWithPlot();
			break;
			default:
				alert("No renderer");
			break;
			}
		return mySVG;
		}
		
	this.getChartSVGWithPlot=function ()
	{
		console.log("using Plot");
		//copy ChartElements to marks:
		var marksArray=new Array();
		for(var k=0;k< this.chartElements.length;k++)
		{
			marksArray[k]=renderChartElementWithPlot(this.chartElements[k]);
			/*Plot.barX(rs_table0,
	 	{
    		          x: "gesamt", 
    		          y: "eintrag",
			  fill: "blue"
    		        }
    		        */
			
		}
	
	this.options["marks"].push(marksArray);
		var svgPlot=Plot.plot(this.options);
		return svgPlot;
	}

}




function possibleVizType(nr,value,name,explanation,isDefault ) 
    {
this.nr=nr;
this.value=value;
this.name=name;
this.explanation=explanation;
this.isDefault=isDefault;

}

function usedVizType(nr,vizTypeUniquename,caption,datasource ) 
    {
this.nr=nr;
this.vizTypeUniquename=vizTypeUniquename;
this.caption=caption;
this.datasource=datasource;
this.elementTypeProperties=new Array();
}

function usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue ) 
    {
this.nr=nr;
this.vizTypePropertyUniquename=vizTypePropertyUniquename;
this.caption=caption;
this.propertyValue=propertyValue;

}

function d3dataRow(nr,dimension1,dimension2,measure ) 
    {
this.nr=nr;
this.dimension1=dimension1;
this.dimension2=dimension2;
this.measure=measure;

}

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;
this.value=value;
this.isDefault=isDefault;

}



function dimFunction(nr,name,value,isDefault ) 
    {
this.nr=nr;
this.name=name;
this.value=value;
this.isDefault=isDefault;

}
function dimensionProperty(name,caption,explanation,isMeasure,isMandatory,datasource) 
{
this.name=name;
this.caption=caption;
this.isMeasure=isMeasure;
this.isMandatory=isMandatory;
this.explanation=explanation;
this.datasource=datasource;
this.getValueResultset = function () {
var valueOptions=[];
var optionCounter=0;
//selectionRsMetaData=fillSelectionResultMetaData();
//console.log("felder"+selectionRsMetaData.length);
var isDefault=true;
	for(var j=0;j < rsColumnMetaData[datasource].length;j++)
		{
			if(rsColumnMetaData[datasource][j].colcaption.trim() !="" 
			&& (
				isMeasure==false || rsColumnMetaData[datasource][j].coltype == 4 || rsColumnMetaData[datasource][j].coltype == 3)
			)
			{
					//console.log("feld "+rsColumnMetaData[j].nr+selectionRsMetaData[j].targetColumn);
				var o=new selectionPropertyValue(rsColumnMetaData[datasource][j].nr,rsColumnMetaData[datasource][j].colcaption,rsColumnMetaData[datasource][j].colname,isDefault);
				valueOptions[optionCounter]=o;
				optionCounter++;
				if(isDefault)
					isDefault=false;
			}
		}
	return valueOptions;
}

}


function selectionProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) 
    {
this.name=name;
this.caption=caption;
this.isDynamic=isDynamic;
this.isMeasure=isMeasure;
this.staticValues=staticValues;
this.isMandatory=isMandatory;
this.defaultValue=defaultValue;
this.optionalFunction=optionalFunction;
this.getValueResultset = function () {
        var valueOptions=[];
	var optionCounter=0;
	if(isDynamic)
	{
		for(var j=0;j < rsMetaData.length;j++)
			{
			var isDefault=false;
			if(rsMetaData[j].colcaption.trim() !="" &&
			(isMeasure==false || rsMetaData[j].coltype == 4 || rsMetaData[j].coltype == 3)
			)
				{
					if(rsMetaData[j].colcaption==defaultValue)
						isDefault=true;
					var o=new selectionPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colname,isDefault);
					valueOptions[optionCounter]=o;
					optionCounter++;
				}
			}
	}
	else
	{
		var staticValuesArray = staticValues.split(/\|/);
		for(var k=0;k < staticValuesArray.length;k++)
		{
			var isDefault=false;
			if(rsMetaData[j].colcaption==defaultValue)
						isDefault=true;
			var o=new selectionPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault);
			valueOptions[k]=o;
		}
	}
	return valueOptions;
    }
}

function updateChartModel()
{
	var optionsString="{";
	if(document.getElementById("chartName").value=="")
		document.getElementById("chartName").value=vizInitialName;
	var chartName=document.getElementById("chartName").value;
	//myChartModel.options.caption=chartName;
	if(myChartModel.renderer=="")
		myChartModel.renderer=document.getElementById("fldVizRenderer").value;
	optionsString+="\"caption\":\""+chartName+"\"";

	var myForm=document.forms["chartPropertiesForm"];
	
		//first Collect all groups:
	var commonChartPropertyGroups=[];
	var previousGroup="";
	for(var k=0;k < commonChartProperties.length;k++)
		{
			var groupVariableName=commonChartProperties[k].groupVariableName;
			if(groupVariableName!="" 
				&& groupVariableName != previousGroup)
			{
			var newcommonChartPropertyGroup = new commonChartPropertyGroup(commonChartProperties[k].groupCaption,commonChartProperties[k].groupUniquename,groupVariableName);
			commonChartPropertyGroups.push(newcommonChartPropertyGroup);
			}
		previousGroup=groupVariableName;
		}
	//Now create options Str with all groups:
	var textDelim="";
	for(var i=0;i < commonChartPropertyGroups.length;i++)
	{
		if(commonChartPropertyGroups[i].groupVariableName!="layout")
			optionsString+=",\""+commonChartPropertyGroups[i].groupVariableName+"\":{\"dummy1\":1"; 
		for(var k=0;k < commonChartProperties.length;k++)
		{
		
			if(commonChartProperties[k].groupVariableName==commonChartPropertyGroups[i].groupVariableName
				&& commonChartProperties[k].variableName!=""
				&& getCommonChartProperty(commonChartProperties[k].name)!="")
			{
				textDelim=(commonChartProperties[k].propValueType=="string")?"\"":"";
				optionsString+=",\""+commonChartProperties[k].variableName+"\":"+textDelim+getCommonChartProperty(commonChartProperties[k].name)+textDelim;
			}
		}
		if(commonChartPropertyGroups[i].groupVariableName!="layout")
			optionsString+=" }"; //close tag
	}
	
		
	/*
	for(var k=0;k < commonChartProperties.length;k++)
	{
		for(var i=0;i < myForm.elements.length;i++)
		{
			if(commonChartProperties[k].name==myForm.elements[i].name
			&&myForm.elements[i].value!="")
				{
				console.log("Feld ausgefüllt:" +commonChartProperties[k].name);
				textDelim=(commonChartProperties[k].propValueType=="string")?"\"":"";
				optionsString+=",\""+commonChartProperties[k].variableName+"\":"+textDelim+myForm.elements[i].value+textDelim;
				}
				
		}
	}*/
	optionsString+= ", \"marks\":[]";
	optionsString+=" }"; //close tag
	/*
	var stylesString="{\"overflow\": \"visible\"";
	
	for(var k=0;k < commonChartProperties.length;k++)
	{
		if(commonChartProperties[k].groupUniquename=="STYLE" )
		{
			stylesString+=",\""+commonChartProperties[k].variableName+"\":\""+getCommonChartProperty(commonChartProperties[k].name)+"\"";
		}
			
	}
	stylesString+=" }";
	
	console.log("Styles:"+ stylesString);
	var styles=JSON.parse(stylesString); */
	var chartOptions=JSON.parse(optionsString);

	myChartModel.options=chartOptions;

	//console.log("options:"+ optionsString);
	//var globalProperties=JSON.parse(optionsString);
	//globalProperties["marks"].push(marksArray);
	
	//myChartModel.options=globalProperties;
	//myChartModel.options["marks"].push(marksArray);
	return myChartModel;
	
}
function renderChart(chartDiv,currentChartModel)
{
	
	if(document.getElementById("chartName").value=="")
		document.getElementById("chartName").value=vizInitialName;
	var chartName=document.getElementById("chartName").value;
	var renderer=document.getElementById('fldVizRenderer').value;
	var mySVG=currentChartModel.getChartSVG();
	document.getElementById(chartDiv).innerHTML="";
	document.getElementById(chartDiv).appendChild(mySVG);
	
}

function prepareSelectionForm()
{
	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 createChartElementConfig1Form(renderer,elemID)
{
	//first empty form:
	var formChartElementConfig1=document.getElementById("ChartElementConfig1Div");
	while (formChartElementConfig1.firstChild) {
		formChartElementConfig1.removeChild(formChartElementConfig1.firstChild);
	}

		//First Datasource:
	const elementDatasourceDiv=document.createElement("div");
	const fieldDatasourceElem = document.createElement("div");
	fieldDatasourceElem.classList.add("field");
	fieldDatasourceElem.classList.add("is-grouped");
		//label:
	const labelDatasourceElem = document.createElement("div");
	labelDatasourceElem.classList.add("label-container");
		const labelDatasource = document.createElement("label");
		labelDatasource.classList.add("label");
		labelDatasource.classList.add("is-required");
		labelDatasource.classList.add("is-small");
		labelDatasource.classList.add("has-tooltip-right");
		labelDatasource.setAttribute("data-tooltip","Datenquelle für das Diagrammelement");

		const textnode = document.createTextNode("Datenquelle");
		labelDatasource.appendChild(textnode);
		labelDatasourceElem.appendChild(labelDatasource);
		fieldDatasourceElem.appendChild(labelDatasourceElem);
	const inpElemId = document.createElement("input");
		inpElemId.name="chartElementID";
		inpElemId.id="chartElementID";
		inpElemId.type="hidden";
		

	const selDatasourceElem = document.createElement("select");
		selDatasourceElem.name="chartElementDatasource";
		selDatasourceElem.id="chartElementDatasource";
		selDatasourceElem.classList.add("select");
		selDatasourceElem.classList.add("is-small");

		selDatasourceElem.onchange= function () {  
				createChartElementsConfig2Form(renderer);
		};
		fillSelectOptions(selDatasourceElem,rsTableMetaData,true);
	fieldDatasourceElem.appendChild(selDatasourceElem);
	fieldDatasourceElem.appendChild(inpElemId);
	
	elementDatasourceDiv.appendChild(fieldDatasourceElem);
	formChartElementConfig1.appendChild(elementDatasourceDiv);
	
		//Then vizType:
	const elementVizTypeDiv=document.createElement("div");
	const fieldVizTypeElem = document.createElement("div");
	fieldVizTypeElem.classList.add("field");
	fieldVizTypeElem.classList.add("is-grouped");
		//label:
	const labelVizTypeElem = document.createElement("div");
	labelVizTypeElem.classList.add("label-container");
		const labelVizType = document.createElement("label");
		labelVizType.classList.add("label");
		labelVizType.classList.add("is-required");
		labelVizType.classList.add("is-small");
		labelVizType.classList.add("has-tooltip-right");
		labelVizType.setAttribute("data-tooltip","Art des Diagrammelements");

		const textnodeVizType = document.createTextNode("Diagrammelement-Typ");
		labelVizType.appendChild(textnodeVizType);
		labelVizTypeElem.appendChild(labelVizType);
		fieldVizTypeElem.appendChild(labelVizTypeElem);

	const selVizTypeElem = document.createElement("select");
		selVizTypeElem.name="chartElementVizType";
		selVizTypeElem.id="chartElementVizType";
		selVizTypeElem.classList.add("select");
		selVizTypeElem.classList.add("is-small");
		selVizTypeElem.onchange= function () {  
				createChartElementsConfig2Form(renderer);
		};
		fillSelectOptions(selVizTypeElem,getPossibleVizTypes(renderer),true);
	fieldVizTypeElem.appendChild(selVizTypeElem);
	elementVizTypeDiv.appendChild(fieldVizTypeElem);
	
	formChartElementConfig1.appendChild(elementVizTypeDiv);
	
	}
function createChartElementsConfig2Form(renderer)
{	
	var dataSource=document.getElementById("chartElementDatasource").value;
	var vizType=document.getElementById("chartElementVizType").value;
	//now Elements:
	var formChartElementConfig2Div=document.getElementById("ChartElementConfig2Div");
	while (formChartElementConfig2Div.firstChild) {
		formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild);
	}

	const elementDivBox = document.createElement("div");

	for(var k=0;k < vizTypeProperties.length;k++)
	{
		if(vizType==vizTypeProperties[k].typeUniquename)
			elementDivBox.appendChild(renderDimensionField(vizTypeProperties[k],dataSource));
	}
	const saveBtnDiv = document.createElement("div");
	const saveBtn = document.createElement("input");
	saveBtn.type="BUTTON";
	saveBtn.value="Übernehmen";
	saveBtn.onclick =function() {
            saveChartElementConfig()
        }
	saveBtnDiv.appendChild(saveBtn);
	elementDivBox.appendChild(saveBtnDiv);
	formChartElementConfig2Div.appendChild(elementDivBox);
	
	/*columnsDiv.appendChild(columnDiv);
	//title
	const columnDivTitle = document.createElement("div");
	columnDivTitle.classList.add("column");
	columnDivTitle.classList.add("is-narrow");
	const columnDivBoxTitle = document.createElement("div");
	columnDivBoxTitle.classList.add("box");
	columnDivBoxTitle.style="width: 500px";
	for(var k=0;k < myCommonChartProperties.length;k++)
		{
			if(myCommonChartProperties[k].name=="caption")
				columnDivBoxTitle.appendChild(renderChartPropertyField(myCommonChartProperties[k]));
		}
	
	columnDivTitle.appendChild(columnDivBoxTitle);
	columnsDiv.appendChild(columnDivTitle);
	myForm.appendChild(columnsDiv);
	*/
}

function saveChartElementConfig()
{
	var elemID=document.getElementById("chartElementID").value;
	var vizTypeUniquename=document.getElementById("chartElementVizType").value;
	var datasource=document.getElementById("chartElementDatasource").value;
	
	if(elemID=="")
		elemID=0;
	
	var myVizType=new usedVizType(elemID,vizTypeUniquename,vizTypeUniquename,datasource); //nr,vizTypeUniquename,caption,datasource
	var propertyCounter=0;
	for(var k=0;k < vizTypeProperties.length;k++)
	{
		if(vizTypeUniquename==vizTypeProperties[k].typeUniquename
		&& document.getElementById(vizTypeProperties[k].propUniquename).value !="")
		{
			var myUsedVizTypeProperty=new usedVizTypeProperty(propertyCounter,vizTypeProperties[k].propUniquename, vizTypeProperties[k].caption,document.getElementById(vizTypeProperties[k].propUniquename).value); //))nr,vizTypePropertyUniquename,caption,propertyValue )
			myVizType.elementTypeProperties.push(myUsedVizTypeProperty); 
		}
	}
	//myVizType.elementTypeProperties=null;
	//TODO: Existenz abfangen, hier wird einfach hinzugefügt:
	myChartModel.chartElements.push(myVizType);
	
	/*var marksArray=new Array();
	marksArray[elemID]=Plot.barX(rs_table0,
	 	{
    		          x: "gesamt", 
    		          y: "eintrag",
			  fill: "blue"
    		        }
			);
	chartOptions["marks"].push(marksArray);*/
	
}
function getPossibleVizTypes(renderer)
{
	
	var possibleVizTypes=new Array();
	for(var k=0;k < vizTypes.length;k++)
		{
		var isDefault=true;
		if(vizTypes[k].rendererUniquename==renderer)
			{
				var newVizType = new possibleVizType( //nr,value,name,explanation,isDefault 
				k,vizTypes[k].uniquename,vizTypes[k].caption,'',isDefault);
				possibleVizTypes.push(newVizType);
				isDefault=false;
				
			}
		}
		
	return possibleVizTypes;
}
function fillDimensionProperty(vizTypeProperty,datasource)
{
	var isMeasure=(vizTypeProperty.groupUniquename=="MEASURE")?true:false;
	var myProp= new dimensionProperty(vizTypeProperty.propUniquename,vizTypeProperty.caption,vizTypeProperty.explanation,isMeasure,vizTypeProperty.isMandatory,datasource);
	
	return myProp;
}
function showChartPropertiesFormDiv(formDiv,formElementsDiv,renderer)
{
	var myDiv=document.getElementById(formDiv);
	switch (formDiv)
	{
		case "generalChartPropertiesFormDiv":
			renderGeneralChartPropertiesForm(formElementsDiv,commonChartProperties,renderer);
		break;
		case "ChartElementDiv":
		break;
		default:
		//do nothing
		break;
		}
			

	if(myDiv.style.display=="block")
		myDiv.style.display="none";
	else
		myDiv.style.display="block";

}

function prepareChartProperties(chartType)
{
	var chartProperties=[];
	chartProperties=prepareForm(chartType,vizTypeProperties); 
	renderForm("chartPropertiesForm",chartProperties,commonChartProperties);
	renderFormDetails("chartPropertiesFormDetails",commonChartProperties);

	return true;
	
}

function prepareForm(vizTypeUniquename,vizTypeProperties)
{
	var chartProperties=[];
	var propertyCounter=0;
	for(var k=0;k < vizTypeProperties.length;k++)
	{
	if(vizTypeUniquename==vizTypeProperties[k].typeUniquename)
	{
		var isMeasure=(vizTypeProperties[k].groupUniquename=="MEASURE")?true:false;
		var myProp= new dimensionProperty(vizTypeProperties[k].propUniquename,vizTypeProperties[k].caption,vizTypeProperties[k].explanation,isMeasure,vizTypeProperties[k].isMandatory);
		chartProperties.push(myProp);
		propertyCounter++;
	}
	}
	return chartProperties;
}
/*
function prepareBarXForm()
{
	var chartProperties=[];
	var propertyCounter=0;
	var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",false,true);
	chartProperties[0]=myProp;
	var myProp= new dimensionProperty("viz_measure1","Maß",true,true);
	chartProperties[1]=myProp;

return chartProperties;
}

function prepareBarYForm()
{
	var chartProperties=[];
	var propertyCounter=0;
	var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true);
	chartProperties[0]=myProp;
	var myProp= new dimensionProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true);
	chartProperties[1]=myProp;
	var myProp= new dimensionProperty("viz_measure1","Maß",true,true,true,null,null,true);
	chartProperties[2]=myProp;

return chartProperties;
}

function prepareLineForm()
{
	var chartProperties=[];
	var propertyCounter=0;
	var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true);
	chartProperties[0]=myProp;
	var myProp= new dimensionProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true);
	chartProperties[1]=myProp;
	var myProp= new dimensionProperty("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 dimensionProperty("dimension1","X-Achse",true,false,true,null,null,true);
	chartProperties[0]=myProp;
	var myProp= new dimensionProperty("measure1","Y-Achse",true,true,true,null,null,true);
	chartProperties[1]=myProp;

return chartProperties;
}
*/
function fillDataSelectionForm(formDiv)
{
formDivElem=document.getElementById(formDiv);
if(formDivElem.style.display=="none")
{
	var selectionProperties=[];
	var dimFunctions=[];
	var myFunction= new dimFunction(0,"Wort 1 ans Ende","switchWord1and2ff",false);
	dimFunctions[0]=myFunction;
	var myFunction= new dimFunction(1,"Nur Wort 1","justWord1",false);
	dimFunctions[1]=myFunction;
	var myFunction= new dimFunction(2,"Abkürzen (20)","abbreviate",false);
	dimFunctions[2]=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);
		}
	}
	formDivElem.style.display="block";
}
else
	formDivElem.style.display="none";
	
}

function selectionResultPreview(myDiv)
{
	myDivElem=document.getElementById(myDiv);
if(myDivElem.style.display=="none")
{
	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);
	myDivElem.style.display="block";
}
else
	myDivElem.style.display="none";
}
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++;
		var dim2=new selectionRowMetaData(counter,"dimension2",dimension2,getColumnCaption(dimension2),0,functionOfDimension2);
		selectionRsMetaData.push(dim2 );
		}
	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;
			}
			
		}
	//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,myChartProperties,myCommonChartProperties)
{
	//OBSOLETE:
	//first empty form:
	var myForm=document.getElementById(formDiv);
	while (myForm.firstChild) {
		myForm.removeChild(myForm.firstChild);
	}
	const columnsDiv = document.createElement("div");
	columnsDiv.classList.add("columns");
	const columnDiv = document.createElement("div");
	columnDiv.classList.add("column");
	columnDiv.classList.add("is-narrow");
	const columnDivBox = document.createElement("div");
	columnDivBox.classList.add("box");
	columnDivBox.style="width: 500px";

	for(var k=0;k < myChartProperties.length;k++)
	{
		columnDivBox.appendChild(renderDimensionField(myChartProperties[k]));
	}
	columnDiv.appendChild(columnDivBox);
	columnsDiv.appendChild(columnDiv);
	//title
	const columnDivTitle = document.createElement("div");
	columnDivTitle.classList.add("column");
	columnDivTitle.classList.add("is-narrow");
	const columnDivBoxTitle = document.createElement("div");
	columnDivBoxTitle.classList.add("box");
	columnDivBoxTitle.style="width: 500px";
	for(var k=0;k < myCommonChartProperties.length;k++)
		{
			if(myCommonChartProperties[k].name=="caption")
				columnDivBoxTitle.appendChild(renderChartPropertyField(myCommonChartProperties[k]));
		}
	
	columnDivTitle.appendChild(columnDivBoxTitle);
	columnsDiv.appendChild(columnDivTitle);
	myForm.appendChild(columnsDiv);

}

function renderDimensionField(vizTypeProperty,datasource)
{
		const fieldElem = document.createElement("div");
		fieldElem.classList.add("field");
		fieldElem.classList.add("is-grouped");
		//label:
		const labelElem = document.createElement("div");
		labelElem.classList.add("label-container");
		const label = document.createElement("label");
		label.classList.add("label");
		label.classList.add("is-required");
		label.classList.add("is-small");
		label.classList.add("has-tooltip-right");
		//label.setAttribute("data-tooltip",dimensionProperty.explanation);

		const textnode = document.createTextNode(vizTypeProperty.caption);
		label.appendChild(textnode);
		labelElem.appendChild(label);
		fieldElem.appendChild(labelElem);
		//input:
		const inputFieldElem = document.createElement("div");
		inputFieldElem.classList.add("field");
		inputFieldElem.classList.add("is-active");
		const inputSelectElem = document.createElement("div");
		inputSelectElem.classList.add("select");
		inputSelectElem.classList.add("is-small");
		//inputSelectElem.classList.add("is-fullwidth");
		
		const selElem = document.createElement("select");
		selElem.name=vizTypeProperty.propUniquename;
		selElem.id=vizTypeProperty.propUniquename;
/*	vermutlich unnötig:	selElem.onchange= function () {  
				renderChart('chartDiv'); 
		};*/
		var dimensionProperty=fillDimensionProperty(vizTypeProperty,datasource);
		fillSelectOptions(selElem,dimensionProperty.getValueResultset(),dimensionProperty.isMandatory);
		inputSelectElem.appendChild(selElem);
		inputFieldElem.appendChild(inputSelectElem);
		fieldElem.appendChild(inputFieldElem);
		return fieldElem;

}

function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,renderer)
{
	//first empty form:
	var myForm=document.getElementById(formDiv);
	while (myForm.firstChild) {
		myForm.removeChild(myForm.firstChild);
	}
		
	const divBox = document.createElement("div");
	//divBox.classList.add("box");
		//divBox.style="width: 300px";
		/*
		const colHeader = document.createTextNode("Layout");
		const colHeaderParagraph = document.createElement("p");
		colHeaderParagraph.classList.add("title");
		colHeaderParagraph.classList.add("is-6");
		colHeaderParagraph.appendChild(colHeader);
		divBox.appendChild(colHeaderParagraph);
		*/
		for(var k=0;k < myCommonChartProperties.length;k++)
		{
			if((myCommonChartProperties[k].groupVariableName=="layout"
			|| myCommonChartProperties[k].groupVariableName=="style"
			)
			&& myCommonChartProperties[k].rendererUniquename==renderer)
				divBox.appendChild(renderChartPropertyField(myCommonChartProperties[k]));
		}
	
	
	myForm.appendChild(divBox);
}

function renderFormDetails(formDiv,myCommonChartProperties)
{
	//first empty form:
	var myForm=document.getElementById(formDiv);
	while (myForm.firstChild) {
		myForm.removeChild(myForm.firstChild);
	}
	const columnsDiv = document.createElement("div");
	columnsDiv.classList.add("columns");
	
	/*
	const tabElem = document.createElement("table");
	for(var k=0;k < myCommonChartProperties.length;k++)
	{
	const rowElem = document.createElement("tr");
	const tdCap = document.createElement("td");
	const textnode = document.createTextNode(myCommonChartProperties[k].caption);
	tdCap.appendChild(textnode);
	rowElem.appendChild(tdCap);
	if(myCommonChartProperties[k].inputType=="TEXT")
		{
		//Einfaches Texteingabefeld:
		const tdInpElem = document.createElement("td");
		const inpElem = document.createElement("input");
		inpElem.id=myCommonChartProperties[k].name;
		inpElem.name=myCommonChartProperties[k].name;
		inpElem.type="text";
		inpElem.value=myCommonChartProperties[k].defaultValue;
		tdInpElem.appendChild(inpElem);
		rowElem.appendChild(tdInpElem);

		}
	else
		{ 
		const tdSelElem = document.createElement("td");
		const selElem = document.createElement("select");
		selElem.name=myCommonChartProperties[k].name;
		selElem.id=myCommonChartProperties[k].name;
		fillSelectOptions(selElem,myCommonChartProperties[k].getValueResultset(),myCommonChartProperties[k].isMandatory);
		tdSelElem.appendChild(selElem);
		rowElem.appendChild(tdSelElem);
		}
	tabElem.appendChild( rowElem);
	}
*/

//first Collect all groups:
var commonChartPropertyGroups=[];
var previousGroup="";
for(var k=0;k < myCommonChartProperties.length;k++)
	{
		var groupUniquename=myCommonChartProperties[k].groupUniquename;
		if(groupUniquename!="" 
			&& groupUniquename != previousGroup
			&& myCommonChartProperties[k].groupVariableName !="")
		{
		var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,"");
		commonChartPropertyGroups.push(newcommonChartPropertyGroup);
		}
	previousGroup=groupUniquename;
	}
	for(var i=0;i < commonChartPropertyGroups.length;i++)
	{
		const columnDiv = document.createElement("div");
		columnDiv.classList.add("column");
		columnDiv.classList.add("is-narrow");
		const columnDivBox = document.createElement("div");
		columnDivBox.classList.add("box");
		columnDivBox.style="width: 300px";
		
		const colHeader = document.createTextNode(commonChartPropertyGroups[i].caption);
		const colHeaderParagraph = document.createElement("p");
		colHeaderParagraph.classList.add("title");
		colHeaderParagraph.classList.add("is-6");
		colHeaderParagraph.appendChild(colHeader);
		columnDivBox.appendChild(colHeaderParagraph);
		
		for(var k=0;k < myCommonChartProperties.length;k++)
		{
			if(myCommonChartProperties[k].groupUniquename==commonChartPropertyGroups[i].groupUniquename)
				columnDivBox.appendChild(renderChartPropertyField(myCommonChartProperties[k]));
		}
	columnDiv.appendChild(columnDivBox);
	columnsDiv.appendChild(columnDiv);
	}
	myForm.appendChild(columnsDiv);
}

function renderChartPropertyField(commonChartProperty)
{
		const fieldElem = document.createElement("div");
		fieldElem.classList.add("field");
		fieldElem.classList.add("is-grouped");
		//label:
		const labelElem = document.createElement("div");
		labelElem.classList.add("label-container");
		const label = document.createElement("label");
		label.classList.add("label");
		label.classList.add("is-required");
		label.classList.add("is-small");
		label.classList.add("has-tooltip-right");
		label.setAttribute("data-tooltip",commonChartProperty.explanation);

		const textnode = document.createTextNode(commonChartProperty.caption);
		label.appendChild(textnode);
		labelElem.appendChild(label);
		fieldElem.appendChild(labelElem);
		//input:
		const inputFieldElem = document.createElement("div");
		inputFieldElem.classList.add("field");
		const inputParaElem = document.createElement("p");
		inputParaElem.classList.add("control-new");
		const inputElem = document.createElement("div");
		inputElem.classList.add("is-small");
		//inputElem.classList.add("is-fullwidth");
		
		switch (commonChartProperty.inputType) {
		case "SELECT":
			//select input:
			inputElem.classList.add("select");
			inputElem.classList.add("is-small");
			const selElem = document.createElement("select");
			selElem.name=commonChartProperty.name;
			selElem.id=commonChartProperty.name;
			//selElem.style="width:50px";
			if(commonChartProperty.variableName=="")
			{
				selElem.disabled="disabled";
				selElem.readonly="readonly";
			}
	
			selElem.onchange= function () {  
					updateChartModel();
					renderChart('chartDiv',myChartModel);
			};
			fillSelectOptions(selElem,commonChartProperty.getValueResultset(),commonChartProperty.isMandatory);
			inputElem.appendChild(selElem);
			inputParaElem.appendChild(inputElem);

		break;
		case "TEXTAREA":
			//großes Texteingabefeld:
			const textAreaElem = document.createElement("textarea");
			textAreaElem.cols="20";
			textAreaElem.rows=3;
			if(commonChartProperty.variableName=="")
			{
				textAreaElem.disabled="disabled";
				textAreaElem.readonly="readonly";
			}
			textAreaElem.name=commonChartProperty.name;
			textAreaElem.id=commonChartProperty.name;
			textAreaElem.value=commonChartProperty.defaultValue;
			textAreaElem.onchange= function () {  
					updateChartModel();
					renderChart('chartDiv',myChartModel);
			};
			inputElem.appendChild(textAreaElem);
			inputParaElem.appendChild(inputElem);
			
		break;
		case "RANGE":
		
			//Schieberegler:
			const rangeElem = document.createElement("input");
			rangeElem.type="NUMBER";
			rangeElem.size=5;
			if(commonChartProperty.variableName=="")
			{
				rangeElem.disabled="disabled";
				rangeElem.readonly="readonly";
			}
			
			/* klappt noch nicht:
			rangeElem.type="RANGE";
			rangeElem.min=commonChartProperty.range_from;
			rangeElem.max=commonChartProperty.range_to;
			rangeElem.step=50;
			*/

			rangeElem.name=commonChartProperty.name;
			rangeElem.id=commonChartProperty.name;
			rangeElem.value=commonChartProperty.defaultValue;
			rangeElem.onchange= function () {  
					updateChartModel();
					renderChart('chartDiv',myChartModel);
			};
			inputElem.appendChild(rangeElem);
			inputParaElem.appendChild(inputElem);
		break;
		default:
			//Einfaches Texteingabefeld:
			const inpElem = document.createElement("input");
			inpElem.type="TEXT";
			if(commonChartProperty.propValueType=="integer")
					inpElem.type="NUMBER";
			if(commonChartProperty.inputType=="COLOR")
					inpElem.type="color";
			inpElem.size=5;
			if(commonChartProperty.variableName=="")
			{
				inpElem.disabled="disabled";
				inpElem.readonly="readonly";
			}
			inpElem.name=commonChartProperty.name;
			inpElem.id=commonChartProperty.name;
			inpElem.value=commonChartProperty.defaultValue;
			inpElem.onchange= function () {  
					updateChartModel();
					renderChart('chartDiv',myChartModel);
			};
			inputElem.appendChild(inpElem);
			inputParaElem.appendChild(inputElem);
			
		break;
		}
		
		
		inputFieldElem.appendChild(inputParaElem);
		fieldElem.appendChild(inputFieldElem);
		return fieldElem;

}

function fillSelectOptions(myCombo,myValues,isMandatory)
{
var optionCounter=0;
var selectedOption=null;
while (myCombo.firstChild) {
    myCombo.removeChild(myCombo.firstChild);
}
var optionCounter=0;
if(!isMandatory)
{
	//add an empty option:
	var o=new Option("","");
	myCombo.options[optionCounter]=o;
	optionCounter++;
}
for(var j=0;j < myValues.length;j++)
{
	if(myValues[j].isDefault)
		selectedOption=optionCounter;
	
	var o=new Option(myValues[j].name,myValues[j].value,null,null);
	myCombo.options[optionCounter]=o;
	optionCounter++;
}
if(selectedOption!=null)
	myCombo.selectedIndex=selectedOption;
}




function prepareData_alt()
{
var data=[];

var rowcount=rs.length;
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++)
{
	console.log(rs.length+"-"+j+"-"+colnrOfCategorydimName);
	if(rs[j][colnrOfCategorydimName]) //only if Name is not empty:
	{
	var dimension1Value=rs[j][colnrOfCategorydimName];
	var measureDimValue=rs[j][colnrOfMeasure];
	if(functionOfCategoryDim !="")
		dimension1Value=applyFunction(dimension1Value,functionOfCategoryDim);
	if(functionOfMeasureDim !="")
		measureDimValue=applyFunction(measureDimValue,functionOfMeasureDim);
	data.push(new d3dataRow(j,dimension1Value,measureDimValue));
	//identify max String length to compute x axis size
	if(dimension1Value.length >maxLenName)
		maxLenName=dimension1Value.length;
	//the same for values:
	if(measureDimValue >maxValue)
		maxValue=measureDimValue;
	}
	
}
return data;
}


function showDataTable(myTableDiv,data,metadata,maxRows)
{
	
tableDiv=document.getElementById(myTableDiv);
if(tableDiv.innerHTML=="")
{
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");
const thCap = document.createElement("th");
const textnode = document.createTextNode("Zeilennr.");
thCap.appendChild(textnode);
rowElem.appendChild(thCap);
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=0;row<rowcount;row++)
{
	if(data[row])
	{
		const rowElem = document.createElement("tr");
		const tdCap = document.createElement("td");
		const textnode = document.createTextNode(row);
		tdCap.appendChild(textnode);
		rowElem.appendChild(tdCap);
		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].colname]);
				tdCap.appendChild(textnode);
				rowElem.appendChild(tdCap);
				}
			}
		tabElem.appendChild(rowElem);
	}
}
tableDiv.appendChild(tabElem);
}
else
	tableDiv.innerHTML=""; //reset table
}

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 showChartDiv(chartDivElem)
{
var myDiv=document.getElementById(chartDivElem);
	if(myDiv.style.display=="block")
		myDiv.style.display="none";
	else
		myDiv.style.display="block";
}

function renderChartElementWithPlot(chartElem)
{
var plotMark=new Object;	
var chartType=chartElem.vizTypeUniquename;
/*
var selectionRsMetaData=[];
var selectionRs=[];


selectionRsMetaData=fillSelectionResultMetaData();

selectionRs=fillSelectionResult(selectionRsMetaData);
*/
	
switch (chartType)
{
	case "sample":
		makeSample();
		break;
	case "bar_x":
		plotMark=renderBarXwithPlot(chartElem);
	    break;
	case "bar_x_stacked":
		makeBarXStacked(chartDivElem,selectionRs);
	break;
	case "bar_x_alt":
		makeBarX(svg,data);
        break;
	case "bar_y":
		makeBarY(chartDivElem,selectionRs);
        break;
	case "area_y":
		makeAreaY(chartDivElem,selectionRs);
	break;
	case "dot":
		makeDot(chartDivElem,selectionRs);
	break;
	case "line":
		makeLine(chartDivElem,selectionRs);
		break;
	default:
		alert("Please select a chart type");
	break;
}
return plotMark;
}

function createChart(chartDivElem)
{
	//OBSOLETE!
chartType=document.getElementById("viz_chart_type").value;

var selectionRsMetaData=[];
var selectionRs=[];

//data=prepareData();
selectionRsMetaData=fillSelectionResultMetaData();
//alert(selectionRsMetaData[0].colname);
selectionRs=fillSelectionResult(selectionRsMetaData);

	
var valueLabelWidth = getCommonChartProperty("valueLabelWidth"); 
var fontFamily=getCommonChartProperty("fontFamily"); 
var gridLabelHeight =  getCommonChartProperty("gridLabelHeight"); 
var gridChartOffset = getCommonChartProperty("gridChartOffset");
var chartWidth=getCommonChartProperty("chartWidth");
var fontSize=getCommonChartProperty("fontSize");
//svg,data
document.getElementById(chartDivElem).innerHTML=""; //reset canvas
/*
var svg = d3.select("#"+chartDivElem).append("svg")
      .attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth)
      //.attr("height", y.range()[1])
      .attr("font-family", fontFamily)
      .attr("font-size", fontSize)
      .attr("text-anchor", "start")
      .attr("id", "chartSVG")
      ;
svg.width=50;
*/
switch (chartType)
{
	case "sample":
		makeSample();
		break;
	case "bar_x":
		makeBarX(chartDivElem,selectionRs);
	    break;
	case "bar_x_stacked":
		makeBarXStacked(chartDivElem,selectionRs);
	break;
	case "bar_x_alt":
		makeBarX(svg,data);
        break;
	case "bar_y":
		makeBarY(chartDivElem,selectionRs);
        break;
	case "area_y":
		makeAreaY(chartDivElem,selectionRs);
	break;
	case "dot":
		makeDot(chartDivElem,selectionRs);
	break;
	case "line":
		makeLine(chartDivElem,selectionRs);
		break;
	default:
		alert("Please select a chart type");
	break;
}

}

function makeBarX_alt(svg,data)
{
	var barHeight = 18; 
	var barLabelWidth = 500; 
	var barLabelPadding = 10; 
	var maxBarWidth = maxValue;
	var fontSize=getCommonChartProperty("fontSize");
	var chartWidth=getCommonChartProperty("chartWidth");
	var maxValue=d3.max(data, d => d.value);
	var maxLenName=d3.max(data, d => d.name.length);
	var maxLenNamePx=maxLenName*fontSize;
	var x = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([0, chartWidth]);
	var y = d3.scaleBand().domain(data.map(d => d.nr)).range([0, barHeight * data.length]);
	const bar = svg.selectAll("g")
	    .data(data)
	    .join("g")
	    .attr("transform", d => `translate(${maxLenNamePx},${y(d.nr)})`)
		  ;

	  bar.append("rect")
	      .attr("fill", "steelblue")
	      .on("mouseover",function(){
		d3.select(this).attr("fill", "red");
		})
	      .on("mouseout",function(){
		d3.select(this).attr("fill", "steelblue");
		})
	      .transition()
	    .duration(750)
	    .delay(function(d, i) { return i * 10; })
	      .attr("width", d => x(d.value)) //x)
	      .attr("height", y.bandwidth() - 1)
		
	;
	//value label:
	  bar.append("text")
	      .attr("fill", "white")
	      .attr("x", d => x(d.value)/2)
	      .attr("y", (y.bandwidth() - 1) / 2)
	      .attr("dy", "0.35em")
	      .attr("text-anchor","middle")
	      .text(d => d.value);
	      //label:
		bar.append("text")
	      .attr("fill", "black")
	      .attr("x", 0)
	      .attr("y", (y.bandwidth() - 1) / 2)
	      .attr("dy", "0.35em")
	      .attr("text-anchor","end")
	      .text(d => d.name);
}

function makeLine_alt(svg,data) {
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;
var marginLeftPx=xLabel.length*fontSize;

var options = {
  marginBottom:maxLenNamePx,
  marginLeft:marginLeftPx,
  x: {
    tickRotate: -45,
    ticks: 5,
    tickSize: 5,
    line: true,
    tickPadding: 10,
    labelAnchor: "left",
    labelOffset: 0,
    nice: true,
    label: xLabel,
    type:"point"
  },
  // set y axis options
  y: {
    grid:true,
    label: yLabel 
  },
  sort: "nr",
  // define the marks we will use, dots and a line
    marks: [
    Plot.line(data, {x: "name", y: "value",curve:"linear"}),
    Plot.dot(data, {x: "name", y: "value" })
  ]
  
};
  
  
 document.getElementById("chartDiv").appendChild(Plot.plot(options));
}
function makeSample()
{
	var sales =  [4];
	sales = [
		  {units: 10, fruit: "fig"},
		  {units: 20, fruit: "date"},
		  {units: 40, fruit: "plum"},
		  {units: 30, fruit: "plum"}
		];
	document.getElementById("chartDiv").appendChild(Plot.dot(sales, 
			{x: "units", y: "fruit"}
	).plot());

	}
function getChartOptions(categoryDim1,categoryDim2,measureDim,marksArray,chartOrientationVertical)
{
	var options;
	//var categoryDim1=document.getElementById("viz_dimension1").value;
	//var categoryDim2=document.getElementById("viz_dimension2").value;
	//var measureDim=document.getElementById("viz_measure1").value;
	var chartWidth=getCommonChartProperty("width");
	var marginLeftValue=chartWidth/5; //Default 20% linker Rand
	//if(getCommonChartProperty("marginLeft")!="")
	//	marginLeftValue=getCommonChartProperty("marginLeft");
	var fontSizeDefault=getCommonChartProperty("fontSize")+"pt";
	var myCaption=getCommonChartProperty("caption");
	var myFontFamily=getCommonChartProperty("font-family");
	var myBgColor=getCommonChartProperty("background-color");
	var myColor=getCommonChartProperty("color");
	var marginBottomValue=100;//getCommonChartProperty("marginBottom");;
	var categoryLabel1=getColumnCaption(categoryDim1);
	var categoryLabel2=getColumnCaption(categoryDim2);
	var measureLabel=getColumnCaption(measureDim);
	
	var optionsString="{\"dummy\":1";
	//first Collect all groups:
	var commonChartPropertyGroups=[];
	var previousGroup="";
	for(var k=0;k < commonChartProperties.length;k++)
		{
			var groupVariableName=commonChartProperties[k].groupVariableName;
			if(groupVariableName!="" 
				&& groupVariableName != previousGroup)
			{
			var newcommonChartPropertyGroup = new commonChartPropertyGroup(commonChartProperties[k].groupCaption,commonChartProperties[k].groupUniquename,groupVariableName);
			commonChartPropertyGroups.push(newcommonChartPropertyGroup);
			}
		previousGroup=groupVariableName;
		}
	//Now create options Str with all groups:
	var textDelim="";
	for(var i=0;i < commonChartPropertyGroups.length;i++)
	{
		if(commonChartPropertyGroups[i].groupVariableName!="layout")
			optionsString+=",\""+commonChartPropertyGroups[i].groupVariableName+"\":{\"dummy1\":1"; 
		for(var k=0;k < commonChartProperties.length;k++)
		{
			if(commonChartProperties[k].groupVariableName==commonChartPropertyGroups[i].groupVariableName
				&& commonChartProperties[k].variableName!=""
				&& getCommonChartProperty(commonChartProperties[k].name)!="")
			{
				textDelim=(commonChartProperties[k].propValueType=="string")?"\"":"";
				optionsString+=",\""+commonChartProperties[k].variableName+"\":"+textDelim+getCommonChartProperty(commonChartProperties[k].name)+textDelim;
			}
		}
		if(commonChartPropertyGroups[i].groupVariableName!="layout")
			optionsString+=" }"; //close tag
	}
	//optionsString+= ",\"y\":{\"label\":\"Semester\"}";
	optionsString+= ", \"marks\":[]";
	//optionsString+= ", \"marks\":"+JSON.stringify(marksArray)+"";
	optionsString+= ", \"caption\":\""+myCaption+"\"";
	optionsString+=" }"; //close options tag
	console.log("options:"+ optionsString);

	var stylesString="{\"overflow\": \"visible\"";
	
	for(var k=0;k < commonChartProperties.length;k++)
	{
		if(commonChartProperties[k].groupUniquename=="STYLE" )
		{
			stylesString+=",\""+commonChartProperties[k].variableName+"\":\""+getCommonChartProperty(commonChartProperties[k].name)+"\"";
		}
			
	}
	stylesString+=" }";
	
	console.log("Styles:"+ stylesString);
	var styles=JSON.parse(stylesString);
	var chartOptions=JSON.parse(optionsString);
	chartOptions["marks"].push(marksArray);
	options=chartOptions;

	return options;
}
function makeBarX(chartDivElem,selectionRs) {
	var categoryDim=document.getElementById("viz_dimension1").value;
	//var categoryDim2=document.getElementById("viz_dimension2").value;
	var measureDim=document.getElementById("viz_measure1").value;
	var fillval=document.getElementById("fill").value;
	var marksArray=new Array();
	marksArray[0]=Plot.barX(selectionRs,
	 	{
    		          x: measureDim, 
    		          y: categoryDim,
			  fill: fillval
    		        }
			);
			
	var options= getChartOptions(categoryDim,"",measureDim,marksArray,false);
	console.log("Options:"+  JSON.stringify(options));
	var svgPlot=Plot.plot(options);
	document.getElementById(chartDivElem).appendChild(svgPlot);
	}
function renderBarXwithPlot(chartElem) {
	var barXPlot=new Object;
	var categoryDim="";
	var measureDim="";
	var fillval="";
	var myDatasourceRs=rs[chartElem.datasource];
	for(var k=0;k<chartElem.elementTypeProperties.length;k++)
	{
		if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="viz_dimension1")
			categoryDim=chartElem.elementTypeProperties[k].propertyValue;
		if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="viz_measure1")
			measureDim=chartElem.elementTypeProperties[k].propertyValue;
		if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="fill")
			fillval=chartElem.elementTypeProperties[k].propertyValue;
	}
	if(fillval=="")
		fillval="blue";
	barXPlot=Plot.barX(myDatasourceRs,
	 	{
    		          x: measureDim, 
    		          y: categoryDim,
			  fill: fillval
    		        }
			);
	return barXPlot;
	
	}	
function makeBarXStacked(chartDivElem,selectionRs) {
	var categoryDim1=document.getElementById("y_horizontal").value;
	var categoryDim2=document.getElementById("stroke_bar").value;
	var measureDim=document.getElementById("x_horizontal").value;
	var textDim=document.getElementById("text_horizontal").value;
	//var fillDim=document.getElementById("fill").value;
	var marksArray=new Array();
	marksArray[0]=Plot.barX(selectionRs,
    		   	{
    		          x: measureDim, 
    		          y: categoryDim1,
			  stroke: categoryDim2,
			  fill: categoryDim2
    		        })
			;
	marksArray[1]=Plot.ruleX([0]);
	if(textDim !="")
		marksArray[2]=Plot.text(selectionRs,
    		   	{
    		          x: measureDim, 
    		          y: categoryDim1,
			  text: textDim
    		        })
			;
		
	var options= getChartOptions(categoryDim1,categoryDim2,measureDim,marksArray,false);

	console.log("Options:"+  JSON.stringify(options));
	var svgPlot=Plot.plot(options);
	document.getElementById(chartDivElem).appendChild(svgPlot);
	}
function makeBarY(chartDivElem,selectionRs) {
	var categoryDim=document.getElementById("viz_dimension1").value;
	var measureDim=document.getElementById("viz_measure1").value;
	var marksArray=new Array();
	marksArray[0]=Plot.barY(selectionRs,
    			    	{
    		          y: measureDim, 
    		          x: categoryDim
    		        });
	marksArray[1]=Plot.ruleY([0]);

	var options= getChartOptions(categoryDim,"",measureDim,marksArray,true);
	
	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
	}
function makeAreaY(chartDivElem,selectionRs) {
	var categoryDim=document.getElementById("viz_dimension1").value;
	var measureDim=document.getElementById("viz_measure1").value;
	var marksArray=new Array();
	marksArray[0]=Plot.areaY(selectionRs,
    			    	{
    		          y: measureDim, 
    		          x: categoryDim
    		        });
	marksArray[1]=Plot.ruleY([0]);

	var options= getChartOptions(categoryDim,"",measureDim,marksArray,true);
	
	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
	}
function makeDot(chartDivElem,selectionRs) {
	var categoryDim=document.getElementById("viz_dimension1").value;
	var measureDim=document.getElementById("viz_measure1").value;
	var marksArray=new Array();
	marksArray[0]=Plot.dot(selectionRs,
    			    	{
    		          y: measureDim, 
    		          x: categoryDim
    		        });
	marksArray[1]=Plot.ruleY([0]);
	//marksArray[2]=Plot.ruleX([0]);

	var options= getChartOptions(categoryDim,"",measureDim,marksArray,true);
	
	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
	}
function makeLine(chartDivElem,selectionRs) {
	var categoryDim=document.getElementById("viz_dimension1").value;
	var measureDim=document.getElementById("viz_measure1").value;
	var marksArray=new Array();
	marksArray[0]=Plot.line(selectionRs,
    			    	{
    		          y: measureDim, 
    		          x: categoryDim,
    		          curve: "linear"
    		        });
	marksArray[1]=Plot.dot(selectionRs,
	    	{
          y: measureDim, 
          x: categoryDim
        });
	marksArray[2]=Plot.ruleY([0]);

	var options= getChartOptions(categoryDim,"",measureDim,marksArray,true);
	
	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
	}
function makeBarY_alt(svg,data) {
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;
var marginLeftPx=xLabel.length*fontSize;

var options = {
  marginBottom:maxLenNamePx,
  marginLeft:marginLeftPx,
  x: {
    tickRotate: -45
  },
  // set y axis options
  y: {
    grid:true,
    label: yLabel 
  },
  
  marks: [
    Plot.barY(data,
    		Plot.groupX(
    	{y: "sum"},
    	{
          x: "name", 
          y: "value"
        }
    	)
)
]
}

 document.getElementById("chartDiv").appendChild(Plot.plot(options));
}



function getCommonChartProperty(name)
{
	var propertyValue="";
	for (var i=0;i<commonChartProperties.length;i++)
	{
		if(commonChartProperties[i].name==name && document.forms["chartPropertiesForm"].elements[name])
			{
			propertyValue=document.forms["chartPropertiesForm"].elements[name].value;
			if(propertyValue=="" && commonChartProperties[i].defaultValue!="")
				{
			propertyValue=commonChartProperties[i].defaultValue;
				}
			}
	}
	return propertyValue;
}


function showSrcCode()
{
var myChartDiv= document.getElementById("chartDiv2");
var mySrcDiv=document.getElementById("chartSVGsrc");
	if(mySrcDiv.style.display=="block")
		mySrcDiv.style.display="none";
	else
		mySrcDiv.style.display="block";

var numberOfChildNodes=myChartDiv.childNodes.length;
var svg_xml ="";
for (var i=0;i<numberOfChildNodes;i++)
	{
	var myNode=myChartDiv.childNodes[i];
	if(myNode.nodeName=="svg")
	{
		var mySvg=myNode; //document.getElementById("chartSVG");
		// Extract the data as SVG text string
		svg_xml = (new XMLSerializer).serializeToString(mySvg);
	}
	}
//alert(svg_xml);
document.getElementById("chartSrc").innerHTML=svg_xml;
//document.getElementById("chartSVGsrc").style.visibility="visible";
/*
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(ergtabelle);
    selection.removeAllRanges();
    selection.addRange(range);

      document.execCommand('copy');
      selection.removeAllRanges();

    alert("Angezeigte Tabelle wurde in die Zwischenablage kopiert.");
    */
}
function showOptionsCode()
{
document.getElementById("chartOptionsFields").style.visibility="visible";

}
function copySrcCode(mydiv)
{
var ergtabelle=document.getElementById(mydiv);
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(ergtabelle);
    selection.removeAllRanges();
    selection.addRange(range);

      document.execCommand('copy');
      selection.removeAllRanges();
}



function makeHisto() {
    d3.csv( "/superx/xml/js/d3/dense.csv" ).then( function( data ) {                        
        var histo = d3.histogram().value( d=>+d.A )( data );
	var height=400;
        var scX = d3.scaleBand().padding( 0.2 ).round( true )
            .range( [15, 515] ).domain( histo );
        
        var scY = d3.scaleLinear().range( [height, 0] )
            .domain( [0, d3.max( histo, d=>d.length ) ] ).nice();
        
        var g = d3.select("#chartDiv").append("svg")
            .append( "g" ).attr( "transform", "translate( 40,50 )" )

        g.selectAll( "rect" ).data( histo ).enter()
            .append( "rect" ).attr( "width", scX.bandwidth() )
            .attr( "x", scX ).attr( "y", d=>scY(d.length) )
            .attr( "height", d => height-scY(d.length) )
            .attr( "fill", "red" ).attr( "fill-opacity", 0.2 )
            .attr( "stroke", "red" ).attr( "stroke-width", 2 )

        g.selectAll( "text" ).data( histo ).enter().append( "text" )
            .attr( "text-anchor", "middle" )
            .attr( "font-family", "sans-serif" )
            .attr( "font-size", 14 )        
            .attr( "x", d => scX(d)+0.5*scX.bandwidth() )
            .attr( "y", 225 )
            .text( d=>(d.x0+d.x1)/2 );

        g.append( "g" ).call( d3.axisLeft(scY) );
    } );
}
function applyFunction(theValue,theFunction)
{
	switch (theFunction) {
		case "switchWord1and2ff":
			var ret=switchWord1and2ff(theValue);
		break;
		case "justWord1":
			var ret=justWord1(theValue);
		break;
		case "abbreviate":
			var ret=abbreviate(theValue,20);
		break;
		default:
			var ret=theValue;
		break;
	}
	
        return ret;

}

function switchWord1and2ff(theString)
{
	//erzeugt z.B. aus "WiSe 2020/2021" den Wert "2020/2021", zum Sortieren
	var theWords = theString.split(/ /);
	var word1=theWords[0];
	var word2="";
	var ret="";
	if(theWords.length >1)
	{
		for(var k=1;k < theWords.length;k++)
		{
			word2+= theWords[k];
		}
		ret +=word2;
	}
	ret+=" "+ word1;
	return ret.trim();
}

function justWord1(theString)
{
	//nur erstes Wort, zum Sortieren
	var word1End=-1;
	var i=0;
	var endFound=false;
	do{
		var myChar=theString.substr(i,1);
		if(myChar=="|" || myChar==" "|| myChar=="-")
		{
			endFound=true;
			word1End=i;
		}
		else
			i++;
	}
	while (endFound==false && i<=theString.length);
	if(word1End==-1)
		word1End=theString.length;
	return theString.substr(0,word1End);
}

function abbreviate(theString,theMaxLength)
{
	//nur erste x Zeichen
	if(theString.length > theMaxLength)
	{
		var theCut = theString.substr(0,theMaxLength-3)+"...";
		return theCut;
	}
	else return theString.trim();
}

function getColumnCaption(columnName)
{
	let rsMetaDataLen = rsMetaData.length;
	var colCaption=columnName;
	for (let i = 0; i < rsMetaDataLen; i++) {
	  if(rsMetaData[i].colname ==columnName)
		  colCaption=rsMetaData[i].colcaption;
	}	
	return colCaption;
}

function showVizNavTab(nr)
{
	
for (let i = 1; i < 4; i++) {
	var divName="tab-"+i;
	//alert(divName);
	tabDivElem=document.getElementById(divName);
	if(i==nr)
		tabDivElem.style.display="block";
	else
		tabDivElem.style.display="none";

}
}