diff --git a/superx/xml/js/viz/viz_functions.js b/superx/xml/js/viz/viz_functions.js
index c2a6fb2..b88372a 100644
--- a/superx/xml/js/viz/viz_functions.js
+++ b/superx/xml/js/viz/viz_functions.js
@@ -160,7 +160,8 @@ function prepareChartProperties(chartType)
 	return false;
 	break;
 }
-renderForm("chartPropertiesFormDetails",chartProperties,commonChartProperties);
+renderForm("chartPropertiesForm",chartProperties);
+renderFormDetails("chartPropertiesFormDetails",commonChartProperties);
 
 return true;
 	
@@ -365,27 +366,26 @@ function fillSelectionResult(selectionRsMetaData)
 	
 }
 
-function renderForm(formDiv,chartProperties,myCommonChartProperties)
+function renderForm(formDiv,myChartProperties)
 {
 	//first empty form:
 	var myForm=document.getElementById(formDiv);
 	while (myForm.firstChild) {
 		myForm.removeChild(myForm.firstChild);
 	}
+	/*
 	const tabElem = document.createElement("table");
-	//tabElem.caption="Eigenschaften";
-	myForm.appendChild(tabElem);
-	for(var k=0;k < chartProperties.length;k++)
+	for(var k=0;k < myChartProperties.length;k++)
 		{
 		const rowElem = document.createElement("tr");
 		const tdCap = document.createElement("td");
-		const textnode = document.createTextNode(chartProperties[k].caption);
+		const textnode = document.createTextNode(myChartProperties[k].caption);
 		tdCap.appendChild(textnode);
 		const tdSelElem = document.createElement("td");
 		const selElem = document.createElement("select");
-		selElem.name=chartProperties[k].name;
-		selElem.id=chartProperties[k].name;
-		fillSelectOptions(selElem,chartProperties[k].getValueResultset(),chartProperties[k].isMandatory);
+		selElem.name=myChartProperties[k].name;
+		selElem.id=myChartProperties[k].name;
+		fillSelectOptions(selElem,myChartProperties[k].getValueResultset(),myChartProperties[k].isMandatory);
 		tdSelElem.appendChild(selElem);
 				
 		rowElem.appendChild(tdCap);
@@ -393,6 +393,58 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties)
 		//here values, and then:
 		tabElem.appendChild( rowElem);
 		}
+	myForm.appendChild(tabElem);
+	*/
+	for(var k=0;k < myChartProperties.length;k++)
+		{
+		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");
+		const textnode = document.createTextNode(myChartProperties[k].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 inputParaElem = document.createElement("p");
+		inputParaElem.classList.add("control-new");
+		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=myChartProperties[k].name;
+		selElem.id=myChartProperties[k].name;
+		fillSelectOptions(selElem,myChartProperties[k].getValueResultset(),myChartProperties[k].isMandatory);
+		inputSelectElem.appendChild(selElem);
+		inputParaElem.appendChild(inputSelectElem);
+		inputFieldElem.appendChild(inputParaElem);
+		fieldElem.appendChild(inputFieldElem);
+		
+		
+		myForm.appendChild(fieldElem);
+	}
+}
+
+function renderFormDetails(formDiv,myCommonChartProperties)
+{
+	//first empty form:
+	var myForm=document.getElementById(formDiv);
+	while (myForm.firstChild) {
+		myForm.removeChild(myForm.firstChild);
+	}
+	const tabElem = document.createElement("table");
+	//tabElem.caption="Eigenschaften";
 	for(var k=0;k < myCommonChartProperties.length;k++)
 	{
 	const rowElem = document.createElement("tr");
@@ -425,15 +477,11 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties)
 		}
 	//here values, and then:
 	tabElem.appendChild( rowElem);
-	}		
-
+	}	
 	myForm.appendChild(tabElem);
-		
 	//TODO: myCommonChartProperties auf separatem TAB
 }
 
-
-
 function fillSelectOptions(myCombo,myValues,isMandatory)
 {
 var optionCounter=0;
@@ -595,17 +643,15 @@ for(row=1;row<rowcount;row++)
 tableDiv.appendChild(tabElem);
 }
 
-function createChart()
+function createChart(chartDivElem)
 {
 chartType=document.getElementById("viz_chart_type").value;
-/*
-if(document.getElementById("dimension1").value=="" || 
-	document.getElementById("measure1").value=="" )
-{
-	alert("Bitte wählen Sie eine Kategorie und ein Maß");
-	return false;
-}
-*/
+var myDiv=document.getElementById(chartDivElem);
+	if(myDiv.style.display=="block")
+		myDiv.style.display="none";
+	else
+		myDiv.style.display="block";
+
 var selectionRsMetaData=[];
 var selectionRs=[];
 
@@ -622,8 +668,8 @@ var gridChartOffset = getCommonChartProperty("gridChartOffset");
 var chartWidth=getCommonChartProperty("chartWidth");
 var fontSize=getCommonChartProperty("fontSize");
 //svg,data
-document.getElementById("chartDiv").innerHTML=""; //reset canvas
-var svg = d3.select("#chartDiv").append("svg")
+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)
@@ -638,19 +684,19 @@ case "sample":
 	makeSample();
 	break;
 case "bar_x":
-	makeBarX(selectionRs);
+	makeBarX(chartDivElem,selectionRs);
     break;
 	case "bar_x_alt":
 		makeBarX(svg,data);
         break;
 	case "bar_y":
-		makeBarY(selectionRs);
+		makeBarY(chartDivElem,selectionRs);
         break;
 	case "area_y":
-		makeAreaY(selectionRs);
+		makeAreaY(chartDivElem,selectionRs);
 	break;
 	case "line":
-		makeLine(selectionRs);
+		makeLine(chartDivElem,selectionRs);
 		break;
 	default:
 		alert("Please select a chart type");
@@ -775,6 +821,7 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 	var myFontFamily=getCommonChartProperty("font-family");
 	var myBgColor=getCommonChartProperty("background-color");
 	var myColor=getCommonChartProperty("color");
+	var myCaption=getCommonChartProperty("chartCaption");
 
 	var marginLeftDefault=chartWidth/5; //20% liner Rand
 	var marginBottomDefault=100;
@@ -804,7 +851,8 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 				    label: measureLabel 
 			},
 			marks:	  marksArray,
-	 		style: styles
+	 		style: styles,
+			caption: myCaption
 	 		}
 		}
 	else
@@ -822,7 +870,8 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 					    label: measureLabel 
 					  },	
 					  marks:	  marksArray,
-				 		style: styles
+				 		style: styles,
+					caption:myCaption
 					  
 		 		}
 		
@@ -831,21 +880,31 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 
 	return options;
 }
-function makeBarX(selectionRs) {
+function makeBarX(chartDivElem,selectionRs) {
 	var categoryDim=document.getElementById("viz_dimension1").value;
 	var measureDim=document.getElementById("viz_measure1").value;
+	var fillDim=document.getElementById("fill").value;
 	var marksArray=new Array();
+	if(fillDim=="")
 	marksArray[0]=Plot.barX(selectionRs,
     			    	{
     		          x: measureDim, 
-    		          y: categoryDim
+    		          y: categoryDim,
+			  fill: "blue"
     		        });
-
+		else
+	marksArray[0]=Plot.barX(selectionRs,
+    			    	{
+    		          x: measureDim, 
+    		          y: categoryDim,
+			  fill: fillDim
+    		        });
+			
 	var options= getChartOptions(categoryDim,measureDim,marksArray,false);
 	
-	document.getElementById("chartDiv").appendChild(Plot.plot(options));
+	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
 	}
-function makeBarY(selectionRs) {
+function makeBarY(chartDivElem,selectionRs) {
 	var categoryDim=document.getElementById("viz_dimension1").value;
 	var measureDim=document.getElementById("viz_measure1").value;
 	var marksArray=new Array();
@@ -857,9 +916,9 @@ function makeBarY(selectionRs) {
 
 	var options= getChartOptions(categoryDim,measureDim,marksArray,true);
 	
-	document.getElementById("chartDiv").appendChild(Plot.plot(options));
+	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
 	}
-function makeAreaY(selectionRs) {
+function makeAreaY(chartDivElem,selectionRs) {
 	var categoryDim=document.getElementById("viz_dimension1").value;
 	var measureDim=document.getElementById("viz_measure1").value;
 	var marksArray=new Array();
@@ -871,9 +930,9 @@ function makeAreaY(selectionRs) {
 
 	var options= getChartOptions(categoryDim,measureDim,marksArray,true);
 	
-	document.getElementById("chartDiv").appendChild(Plot.plot(options));
+	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
 	}
-function makeLine(selectionRs) {
+function makeLine(chartDivElem,selectionRs) {
 	var categoryDim=document.getElementById("viz_dimension1").value;
 	var measureDim=document.getElementById("viz_measure1").value;
 	var marksArray=new Array();
@@ -891,7 +950,7 @@ function makeLine(selectionRs) {
 
 	var options= getChartOptions(categoryDim,measureDim,marksArray,true);
 	
-	document.getElementById("chartDiv").appendChild(Plot.plot(options));
+	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
 	}
 function makeBarY_alt(svg,data) {
 var xLabel=rsMetaData[document.getElementById("dimension1").value-1].colcaption;
@@ -951,7 +1010,13 @@ function getCommonChartProperty(name)
 
 function showSrcCode()
 {
-var myChartDiv= document.getElementById("chartDiv");
+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++)
@@ -966,7 +1031,7 @@ for (var i=0;i<numberOfChildNodes;i++)
 	}
 //alert(svg_xml);
 document.getElementById("chartSrc").innerHTML=svg_xml;
-document.getElementById("chartSVGsrc").style.visibility="visible";
+//document.getElementById("chartSVGsrc").style.visibility="visible";
 /*
     const selection = window.getSelection();
     const range = document.createRange();
diff --git a/superx/xml/viz_html_chart.xsl b/superx/xml/viz_html_chart.xsl
index a25a7ef..aec4f67 100644
--- a/superx/xml/viz_html_chart.xsl
+++ b/superx/xml/viz_html_chart.xsl
@@ -164,6 +164,9 @@ commonChartProperties.push(newCommonChartProperty);
 var newCommonChartProperty = new commonChartProperty("background-color","Hintergrundfarbe", false,0, null,"#ffffeb");
 commonChartProperties.push(newCommonChartProperty);
 
+var newCommonChartProperty = new commonChartProperty("fill","Füllfarbe", false,0, null,"blue");
+commonChartProperties.push(newCommonChartProperty);
+
 var newCommonChartProperty = new commonChartProperty("color","Farbe Text- und Diagrammelemente", false,0, null,"#3333ff");
 commonChartProperties.push(newCommonChartProperty);
 
@@ -1123,13 +1126,13 @@ var platform='superx';
 <div class="tabs is-left is-small" id="viznav"> 
 	<ul>
 	    <li data-target="viznav-tab1" id="1">
-		<a onclick="showVizNavTab(1);"><span>Diagramm-Daten</span></a>
+	   	<a onclick="showVizNavTab(1);"><span>Diagramm-Daten</span></a>
 	    </li>
 	    <li data-target="viznav-tab2" id="2">
 		<a onclick="showVizNavTab(2);"><span>Diagramm-Layout</span></a>
 	    </li>
 	    <li data-target="viznav-tab3" id="3">
-		<a  onclick="showVizNavTab(3);"><span>Diagramm-Nutzung</span></a>
+		<a onclick="showVizNavTab(3);"><span>Diagramm-Nutzung</span></a>
 	    </li>
 	 </ul>
 </div>
@@ -1296,46 +1299,55 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 </script>
 </xsl:template>
 <xsl:template name="diagrammdaten">
-     <div class="field is-grouped">
-	  <div class="label-container">
-	     <label class="label is-required is-small"><strong>Datentabelle</strong></label>
-	  </div> 
-	  
-       	  <span class="separator"> </span>
-	  <button class="button is-small is-rounded is-white is-outlined"  
-	  onClick="showDataTable('dataDivTable',rs,rsMetaData,10);"><!--is-focused-->
-		<span class="icon is-small"><i class="../images/more.svg"></i>
-			<img src="../images/more.svg" title="Laden" />
-		</span>
-	  </button>
-      </div>
-<div id="dataDiv" class="section">
 
-<div id="dataDivTable"> <!--style="border:thin solid black">-->
-</div>
+<!--Aufruf/Anzeige Diagrammdaten-->
+<div class="field is-grouped">
+  <div class="label-container">
+     <label class="label is-required is-small"><strong>Daten-Tabelle</strong></label>
+  </div> 
+  
+  <span class="separator">&#160;</span>
+  <span class="separator">&#160;</span>
+  
+  <button class="button is-small is-rounded is-white is-outlined"  
+  onClick="showDataTable('dataDivTable',rs,rsMetaData,10);">
+	<span class="icon is-small"><i class="../images/more.svg"></i>
+		<img src="../images/more.svg" title="Laden" />
+	</span>
+  </button>
 </div>
 
-     <div class="field is-grouped">
-	  <div class="label-container">
-	     <label class="label is-required is-small"><strong>Datenset</strong></label>
-	  </div> 
-	  
-       	  <span class="separator"> </span>
-	  <button class="button is-small is-rounded is-white is-outlined"  
-	  onClick="fillDataSelectionForm('dataSelectionFormDiv');"><!--is-focused-->
-		<span class="icon is-small"><i class="../images/more.svg"></i>
-			<img src="../images/more.svg" title="Laden" />
-		</span>
-	  </button>
-      </div>
-
-<div id="dataSelectionDiv" class="section">
-<form name="dataSelectionForm" id="dataSelectionForm">
-
-<div id="dataSelectionFormDiv" style="display:none">
+<div id="dataDiv"> <!--class="section">-->
+  <div id="dataDivTable"> <!--style="border:thin solid black">-->
+  </div>
+</div>
 
+<span class="separator">&#160;</span>
+<span class="separator">&#160;</span>
 
+<!--Aufruf/Anzeige Formular Datenauswahl-->
 <div class="field is-grouped">
+  <div class="label-container">
+     <label class="label is-required is-small"><strong>Daten-Auswahl</strong></label>
+  </div> 
+  
+  <span class="separator">&#160;</span>
+  <span class="separator">&#160;</span>
+     
+  <button class="button is-small is-rounded is-white is-outlined"  
+  onClick="fillDataSelectionForm('dataSelectionFormDiv');">
+	<span class="icon is-small"><i class="../images/more.svg"></i>
+		<img src="../images/more.svg" title="Laden" />
+	</span>
+  </button>
+</div>
+
+<div id="dataSelectionDiv"> <!--class="section"-->
+ <form name="dataSelectionForm" id="dataSelectionForm">
+     
+     <div id="dataSelectionFormDiv" style="display:none">
+	
+     <div class="field is-grouped">
 	  <div class="label-container">
 	     <label class="label is-required is-small">Dimension 1</label>
 	  </div>
@@ -1345,8 +1357,8 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 	  <div class="field is-active">
 	      <p class="control-new">
 	       <div class="select is-small is-fullwidth is-focused">
-		 <select class="maskinputPflicht" id="dimension1" name="dimension1"><!--tabindex="210">-->
-		    <option class="maskinput" value="" selected="selected">Bitte wählen Sie Dimension 1</option>
+		 <select class="maskinputPflicht" id="dimension1" name="dimension1" tabindex="210">
+		    <option class="maskinput" value="" selected="selected"><!--211122BF Bitte wählen Sie Dimension 1--></option>
 		 </select>
 	       </div>
 	      </p>
@@ -1369,8 +1381,8 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 	  <div class="field is-active">
 	      <p class="control-new">
 	       <div class="select is-small is-fullwidth">
-		 <select id="dimension1_fn" name="dimension1_fn"><!-- tabindex="210">-->
-		    <option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation</option>
+		 <select id="dimension1_fn" name="dimension1_fn" tabindex="210">
+		    <option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation></option>
 		 </select>
 	       </div>
 	      </p>
@@ -1386,18 +1398,19 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 	  </span>
         </div>
 
-<div class="field is-grouped">
+     <div class="field is-grouped">
 	  <div class="label-container">
 	     <label class="label is-required is-small">Dimension 2</label>
 	  </div>
+	  
 	  <span class="separator">&#160;</span>
 	  <span class="separator">&#160;</span>
 	   
 	  <div class="field is-active">
 	      <p class="control-new">
 	       <div class="select is-small is-fullwidth is-focused">
-		 <select class="maskinputPflicht" id="dimension2" name="dimension2"><!--tabindex="210">-->
-		    <option class="maskinput" value="" selected="selected">Bitte wählen Sie Dimension 1</option>
+		 <select class="maskinputPflicht" id="dimension2" name="dimension2" tabindex="210">
+		    <option class="maskinput" value="" selected="selected"><!--211122BFBitte wählen Sie Dimension 2--></option>
 		 </select>
 	       </div>
 	      </p>
@@ -1420,7 +1433,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 	  <div class="field is-active">
 	      <p class="control-new">
 	       <div class="select is-small is-fullwidth">
-		 <select id="dimension2_fn" name="dimension2_fn"><!-- tabindex="210">-->
+		 <select id="dimension2_fn" name="dimension2_fn" tabindex="210">
 		    <option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation</option>
 		 </select>
 	       </div>
@@ -1438,7 +1451,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
         </div>
 	
 	
-	<div class="field is-grouped">
+     <div class="field is-grouped">
 	  <div class="label-container">
 	     <label class="label is-required is-small">Maß</label>
 	  </div>
@@ -1449,8 +1462,8 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 	   <div class="field is-active">
 	      <p class="control-new">
 	       <div class="select is-small is-fullwidth">
-		<select class="maskinputPflicht" id="measure1" name="measure1"><!-- tabindex="220" >-->
-		    <option class="maskinput" value="" selected="selected">Bitte wählen Sie die Maßangabe</option>
+		<select class="maskinputPflicht" id="measure1" name="measure1" tabindex="230" >
+		    <option class="maskinput" value="" selected="selected"><!--211122BF Bitte wählen Sie die Maßangabe--></option>
 		</select>
 	       </div>
 	      </p>
@@ -1479,7 +1492,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 	   <div class="field is-active">
 	      <p class="control-new">
 	       <div class="select is-small is-fullwidth is-focused">
-		 <select id="measure1_fn" name="measure1_fn"> <!--tabindex="230">-->
+		 <select id="measure1_fn" name="measure1_fn" tabindex="230">
 		   <option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation</option>
 		 </select>
 		</div>
@@ -1533,47 +1546,50 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 </tr>
 </table>-->
 
+  </div>
+ </form>
 </div>
-</form>
-</div>
+<!--Ende Formular Datenauswahl-->
 
-<div id="selectionResultPreview" class="section">
+<span class="separator">&#160;</span>
+<span class="separator">&#160;</span>
 
-  <!--
-	<div class="field is-grouped">
-	  <div class="label-container">
-	     <label class="label is-required is-small"><strong>Datenvorschau</strong></label>
-	  </div> 
-       	  <span class="separator"> </span>
-	  <button class="button is-small is-rounded is-white is-outlined"
-	  onClick="selectionResultPreview('selectionResultPreviewTable');">
-		<span class="icon is-small"><i class="../images/more.svg"></i>
-			<img src="../images/more.svg" title="Laden" />
-		</span>
-	  </button>
-	</div>-->
-	<footer class="card-footer">
-	<p class="card-footer-item"><button class="button is-link is-outlined is-small" onclick="selectionResultPreview('selectionResultPreviewTable');">Vorschau</button></p> 
-	<!--***Selektionsergebnis
-	<div id="selectionResultPreview" class="section">
-	<div id="selectionResultPreviewHeader"><input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Laden" onclick="selectionResultPreview('selectionResultPreviewTable');"></div>
-	<div id="selectionResultPreviewTable" style="border:thin solid black"></div>
-	</div>
-	Selektionsergebnis***-->
-	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit">Speichern</button></p>
-	<!--****noch anzupassen: <input name="navi" type="hidden" value="true"><input type="hidden" name="tid" value="16000"><input type="hidden" name="UserID" value="4"><input type="hidden" name="reuseresult" value="true"><input type="hidden" name="maxoffset" value=""><input type="hidden" name="contenttype" value="application/jrxml"><input type="hidden" name="irowno" value=""><input type="hidden" name="Köpfe oder Fälle ?" value="studiengang_nr = 1 and fach_nr = 1"><input type="hidden" name="Stichtag" value="6"><input type="hidden" name="Seit Semester" value="20161"><input type="hidden" name="Bis Semester" value="20221"><input type="hidden" name="Studiengang" value=""><input type="hidden" name="Fächer" value=""><input type="hidden" name="Status" value="1,2,3,5,6"><input type="hidden" name="##line##" value="1"><input type="hidden" name="Hörerstatus" value="1=1"><input type="hidden" name="##line##" value="1"><input type="hidden" name="RPTPageOrientation" value="Landscape"><input type="hidden" name="RPTPagination" value="False"></ul>-->
-	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p>
-</footer>
-<div id="selectionResultPreviewTable" style="display:none">
+<!--Aufruf/Anzeige Daten-Vorschau-->
+<div class="field is-grouped">
+  <div class="label-container">
+     <label class="label is-required is-small"><strong>Daten-Vorschau</strong></label>
+  </div> 
+  
+  <span class="separator">&#160;</span>
+  <span class="separator">&#160;</span>
+  
+  <button class="button is-small is-rounded is-white is-outlined"  
+  onClick="selectionResultPreview('selectionResultPreviewTable');">
+	<span class="icon is-small"><i class="../images/more.svg"></i>
+		<img src="../images/more.svg" title="Laden" />
+	</span>
+  </button>
 </div>
 
+<div id="selectionResultPreview"> <!--class="section">-->     
+     <div id="selectionResultPreviewTable" style="display:none"></div>
 </div>
 
+<!--footer BF: nach unten verschoben-->
+<footer class="card-footer">
+	<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" onclick="selectionResultPreview('selectionResultPreviewTable');">Daten-Vorschau</button></p>--> 
+	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit">Speichern</button></p>
+	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p>
+     </footer>
+
 </xsl:template>
+
 <xsl:template name="diagrammlayout">
-<div id="chartProperties" class="section">
+
+<!--Formular Allg. Layoutmerkmale-->
+<div id="chartProperties"> <!--class="section">-->
 <form name="chartPropertiesForm">
-<table border="0">
+<!--<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>
@@ -1585,86 +1601,236 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 </select>
 </td>
 </tr>
-</table>
-<hr />
- <div class="field is-grouped">
+</table>-->
+
+     <div class="label-container">
+	     <label class="label is-required is-small"><strong>Allgemeine Layoutmerkmale</strong></label>
+     </div> 
+     
+     <span class="separator">&#160;</span>
+     <span class="separator">&#160;</span>	  
+
+     <div class="field is-grouped">
 	  <div class="label-container">
-	     <label class="label is-required is-small"><strong>Erweiterte Layouteigenschaften</strong></label>
-	  </div> 
+	     <label class="label is-required is-small">Diagramm-Typ</label>
+	  </div>
+	  
+	  <div class="field is-active">
+	      <p class="control-new">
+	       <div class="select is-small is-fullwidth">
+	       <select class="maskinputPflicht" id="viz_chart_type" NAME="viz_chart_type" tabindex="200" onChange="prepareChartProperties(this.value)" >
+		    <option class="maskinput" value="" selected="selected">Bitte wählen Sie</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>
+	       </div>
+	      </p>
+	  </div>
+	  
+	  <span class="separator">&#160;</span>
+	  <span class="separator">&#160;</span>
+	   
+	   <span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
+		   <figure class="image is-24x24">
+			<img src="../images/information_grey_liberation.svg" />
+		   </figure>
+	   </span>
+     </div>
+<div id="chartPropertiesForm"> <!--style="visibility:hidden" class="section"--></div>
+<!--Ende Formular Allg. Layoutmerkmale-->
+     <!--<div class="field is-grouped"> 
+	  <div class="label-container">
+	     <label class="label is-required is-small">Kategorie-Dimension</label>
+	  </div>
+	   
+	  <div class="field is-active">
+	      <p class="control-new">
+	       <div class="select is-small is-fullwidth">
+		<select class="maskinputPflicht" id="measure1" name="measure1">
+		    <option class="maskinput" value="" selected="selected">Bitte wählen Sie</option>
+		</select>
+	       </div>
+	      </p>
+	  </div>
+	  
+	  <span class="separator">&#160;</span>
+	  <span class="separator">&#160;</span>
 	  
-       	  <span class="separator"> </span>
-	  <a onClick="showChartPropertiesForm();"><!--is-focused-->
+	  <span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
+		   <figure class="image is-24x24">
+			<img src="../images/information_grey_liberation.svg" />
+		   </figure>
+	  </span>
+	  
+     </div>   
+	   	   
+     <div class="field is-grouped">
+	   <div class="label-container">
+	     <label class="label is-required is-small">Maß</label>
+	   </div>
+	   
+	   <div class="field is-active">
+	      <p class="control-new">
+	       <div class="select is-small is-fullwidth">
+		<select class="maskinputPflicht" id="measure1" name="measure1">
+		    <option class="maskinput" value="" selected="selected">Bitte wählen Sie</option>
+		</select>
+	       </div>
+	      </p>
+	   </div> 
+	   
+	   <span class="separator">&#160;</span>
+	   <span class="separator">&#160;</span>
+	  
+	   <span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
+		   <figure class="image is-24x24">
+			<img src="../images/information_grey_liberation.svg" />
+		   </figure>
+	   </span>
+     </div> -->
+	 
+     <!--<div class="field is-grouped">
+	   <div class="label-container">
+	     <label class="label is-required is-small">Serien-Dimension</label> 
+	   </div>
+	 
+	   <div class="field is-active">
+	      <p class="control-new">
+	       <div class="select is-small is-fullwidth">
+		<select class="maskinputPflicht" id="measure1" name="measure1" tabindex="220" 
+		    <option class="maskinput" value="" selected="selected">Bitte wählen Sie</option>
+		</select>
+	       </div>
+	      </p>
+	   </div>
+	   
+	   <span class="separator">&#160;</span>
+	   <span class="separator">&#160;</span>
+	   
+	   <span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
+		   <figure class="image is-24x24">
+			<img src="../images/information_grey_liberation.svg" />
+		   </figure>
+	   </span>
+     </div>-->
+
+<span class="separator">&#160;</span>
+<span class="separator">&#160;</span>
+
+<!--Formular Erweiterte Layoutmerkmale-->
+     <div class="label-container">
+	     <label class="label is-required is-small"><strong>Erweiterte Layoutmerkmale</strong></label>
+     </div> 
+	  
+     <span class="separator">&#160;</span>
+     <span class="separator">&#160;</span>
+	  
+       
+	  <a  
+	  onClick="showChartPropertiesForm();">					
 		<span class="icon is-small"><i class="../images/more.svg"></i>
-			<img src="../images/more.svg" title="Laden" />
+			<img src="../images/more.svg" title="Laden" /> 
 		</span>
 	  </a>
-      </div>
-
-
-<div id="chartPropertiesFormDetails" style="display:none">
-
+          
+     <div id="chartPropertiesFormDetails" style="display:none"><p>Eigenschaften</p> </div>     
+</form>
 </div>
+<!--Ende Formular Erweiterte Layoutmerkmale-->
 
+<span class="separator">&#160;</span>
+<span class="separator">&#160;</span>
 
-     <!-- <div class="field is-grouped">
-	  <div class="label-container">
-	     <label class="label is-required is-small"><strong>Diagramm-Vorschau</strong></label>
-	  </div> 
-       	  <span class="separator"> </span> 
-	  <a  onClick="createChart();" >
-		<span class="icon is-small"><i class="../images/more.svg"></i>
-			<img src="../images/more.svg" title="Laden" />
-		</span>
-	   </a>
-       </div>
--->
+<!--Aufruf/Anzeige Layout-Vorschau-->
+<div class="field is-grouped">
+  <div class="label-container">
+     <label class="label is-required is-small"><strong>Layout-Vorschau</strong></label>
+  </div> 
+  
+  <span class="separator">&#160;</span>
+  <span class="separator">&#160;</span>
+     
+  <button class="button is-small is-rounded is-white is-outlined"  
+  onClick="createChart('chartDiv');">
+	<span class="icon is-small"><i class="../images/more.svg"></i>
+		<img src="../images/more.svg" title="Laden" />
+	</span>
+  </button>
+</div>
 
-</form>
+<div id="chartCanvas"> <!--class="section"-->
+	<!--<div id="chartCanvasHeader"> </div>-->
+	<div id="chartDiv"> <!--style="border:thin solid black"--></div>
+	<!--<div id="chartCanvasFooter"></div>-->
 </div>
 
+<!--footer (BF nach unten verschoben)-->
 <footer class="card-footer">
-	<p class="card-footer-item"><button class="button is-link is-outlined is-small" onClick="createChart();">Vorschau</button></p> 
-	<!--***Selektionsergebnis
-	<div id="selectionResultPreview" class="section">
-	<div id="selectionResultPreviewHeader"><input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Laden" onclick="selectionResultPreview('selectionResultPreviewTable');"></div>
-	<div id="selectionResultPreviewTable" style="border:thin solid black"></div>
-	</div>
-	Selektionsergebnis***-->
+	<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" onClick="createChart();">Layout-Vorschau</button></p>--> 
 	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit">Speichern</button></p>
 	<!--****noch anzupassen: <input name="navi" type="hidden" value="true"><input type="hidden" name="tid" value="16000"><input type="hidden" name="UserID" value="4"><input type="hidden" name="reuseresult" value="true"><input type="hidden" name="maxoffset" value=""><input type="hidden" name="contenttype" value="application/jrxml"><input type="hidden" name="irowno" value=""><input type="hidden" name="Köpfe oder Fälle ?" value="studiengang_nr = 1 and fach_nr = 1"><input type="hidden" name="Stichtag" value="6"><input type="hidden" name="Seit Semester" value="20161"><input type="hidden" name="Bis Semester" value="20221"><input type="hidden" name="Studiengang" value=""><input type="hidden" name="Fächer" value=""><input type="hidden" name="Status" value="1,2,3,5,6"><input type="hidden" name="##line##" value="1"><input type="hidden" name="Hörerstatus" value="1=1"><input type="hidden" name="##line##" value="1"><input type="hidden" name="RPTPageOrientation" value="Landscape"><input type="hidden" name="RPTPagination" value="False"></ul>-->
 	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p>
 </footer>
-<div id="chartCanvas" class="section">
-<div id="chartCanvasHeader">
 
+</xsl:template>
+<xsl:template name="diagrammnutzung">
+<!-- Aufruf/Anzeige Diagramm-Vorschau-->
+<div class="field is-grouped">
+  <div class="label-container">
+     <label class="label is-required is-small"><strong>Diagramm-Vorschau</strong></label>
+  </div>     	
+    
+  <span class="separator">&#160;</span>
+  <span class="separator">&#160;</span>
+  
+  <button class="button is-small is-rounded is-white is-outlined"  
+  onClick="createChart('chartDiv2');">
+	<span class="icon is-small"><i class="../images/more.svg"></i>
+		<img src="../images/more.svg" title="Laden" /> 
+	</span>
+  </button>
 </div>
 
-<div id="chartDiv" style="border:thin solid black">
+<div id="chartCanvas"> <!--class="section"-->
+     <!--<div id="chartCanvasHeader"> </div>-->
+     <div id="chartDiv2"> </div> 
+     <!--<div id="chartCanvasFooter"></div>-->
 </div>
-<div id="chartCanvasFooter">
 
+<span class="separator">&#160;</span>
+<span class="separator">&#160;</span>
+
+<!-- Aufruf/Anzeige SVG-Quellcode-->
+<div class="field is-grouped">
+  <div class="label-container">
+     <label class="label is-required is-small"><strong>Diagramm-Quellcode (svg)</strong></label>
+  </div>     	
+    
+  <span class="separator">&#160;</span>
+  <span class="separator">&#160;</span>
+  
+  <button class="button is-small is-rounded is-white is-outlined"  
+  onClick="showSrcCode();">
+	<span class="icon is-small"><i class="../images/more.svg"></i>
+		<img src="../images/more.svg" title="Laden" /> 
+	</span>
+  </button>
 </div>
-</div>
-</xsl:template>
-<xsl:template name="diagrammnutzung">
-<div id="chartSVGsrcDiv" class="section">
 
-     <div class="field is-grouped">
-	  <div class="label-container">
-	     <label class="label is-required is-small"><strong>SVG-Quellcode</strong></label>
-	  </div> 
-       	  <span class="separator"> </span> 
-	  <a  onClick="showSrcCode();" ><!--is-focused-->
-		<span class="icon is-small"><i class="../images/more.svg"></i>
-			<img src="../images/more.svg" title="Laden" />
-		</span>
-	   </a>
-       </div>
+<div id="chartSVGsrcDiv"> <!--class="section">-->    
+     <div id="chartSVGsrc"  style="display:none">
+	<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>
 
+<!--footer (BF eingefügt *** Klärungsbedarf bzgl. notwendiger Buttons)-->
+<footer class="card-footer">
+	<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" onClick="createChart();">Diagramm-Vorschau</button></p> -->
+	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit" onClick="copySrcCode('chartSrc');">Kopieren</button></p>
+	<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p>-->
+</footer>
 
-<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>
 </xsl:template>
 </xsl:stylesheet>