Bugfixes Serienfarbe, FontSize #3

src-modules/module/viz/schluesseltabellen/viz_property.unl

@@ -1,24 +1,24 @@
-1^Grafik-Höhe^height^450^px^1^ ^0^4^10^Diagrammhöhe (exkl. Skalenbeschriftung). Wird nur ausgewertet wenn es keine Y-Achse gibt!^101^^^integer^
-2^Grafik-Breite^width^650^px^1^ ^0^4^10^Diagrammsbreite (exkl.Skalenbeschriftung)^102^100^2000^integer^
-3^Werte-Label-Breite^valueLabelWidth^^px^1^^0^1^18^^^^^integer^
-4^Hintergrundfarbe^backgroundColor^#ffffff^ ^1^#ffffeb^0^3^20^Hintergrundfarbe der Grafik^201^^^string^
-5^Vordergrundfarbe^color^^ ^1^black^0^3^20^Farbe von Text- und Diagrammelementen^202^^^string^
+1^Grafik-Höhe^height^450^ ^1^ ^0^4^10^Diagrammhöhe (exkl. Skalenbeschriftung). Wird nur ausgewertet wenn es keine Y-Achse gibt!^101^^^integer^
+2^Grafik-Breite^width^650^ ^1^ ^0^4^10^Diagrammsbreite (exkl.Skalenbeschriftung)^102^100^2000^integer^
+3^Werte-Label-Breite^valueLabelWidth^^^1^^0^1^18^^^^^integer^
+4^Hintergrundfarbe^backgroundColor^#ffffff^ ^1^#ffffeb^0^3^11^Hintergrundfarbe der Grafik^201^^^string^
+5^Schriftfarbe^color^ ^ ^1^black^0^3^11^Farbe von Text- und Diagrammelementen^202^^^string^
 6^Schriftgröße^fontSize^^px^1^ ^0^4^11^Schriftgröße der Skalenbeschriftung^204^^^integer^
 7^Schriftfamilie^fontFamily^^ ^1^serif|sans-serif|monospace|system_ui^0^2^11^Schriftfamlilie der Skalenbeschriftung^203^^^string^
-8^Flächenfarbe^fill_static^ ^ ^1^ ^0^3^20^Nur für Grafikelement Flächen. Füllfarbe.^305^^^string^
+8^Flächenfarbe^fill_static^ ^ ^1^ ^0^3^11^Nur für Grafikelement Flächen. Füllfarbe.^305^^^string^
 11^X: Schriftneigung^tickRotate_x^^ ^1^ ^0^1^18^Neigungswinkel der Achsenwerte^604^^^integer^
 12^X: Skalierung^ticks_x^^ ^1^ ^0^1^18^Feinheit der Wertegliederung^605^^^integer^
 13^X: Schriftgröße^tickSize_x^^ ^1^ ^0^1^18^Größe der Achsenwerte^603^^^integer^
 15^X: Label-Ausrichtung^labelAnchor_x^^ ^1^left|center|right^0^2^18^Label-Position^601^^^string^
-16^Außenrand links^marginLeft^100^px^1^ ^0^4^10^Abstand zwischen Grafik und linkem Hintergrundrand^103^^^integer^
-17^Außenrand rechts^marginRight^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und rechtem Hintergrundrand^104^^^integer^
-18^Außenrand oben^marginTop^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und oberem Hintergrundrand^105^^^integer^
-19^Außenrand unten^marginBottom^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und unterem Hintergrundrand^106^^^integer^
-20^Innenrand oben^insetTop^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung oben^107^^^integer^
-21^Innenrand unten^insetBottom^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung unten^108^^^integer^
-22^Innenrand links^insetLeft^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung links^109^^^integer^
-23^Innenrand rechts^insetRight^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung rechts^110^^^integer^
-24^Farbschema^scheme^ ^ ^1^blues|greens|greys|oranges|purples|reds^0^2^20^Nur für Grafikelemente Balken und Linien: Farbtonschema für Serien.^303^^^string^
+16^Außenrand links^marginLeft^100^^1^ ^0^4^10^Abstand zwischen Grafik und linkem Hintergrundrand^103^^^integer^
+17^Außenrand rechts^marginRight^ ^^1^ ^0^4^10^Abstand zwischen Grafik und rechtem Hintergrundrand^104^^^integer^
+18^Außenrand oben^marginTop^ ^^1^ ^0^4^10^Abstand zwischen Grafik und oberem Hintergrundrand^105^^^integer^
+19^Außenrand unten^marginBottom^ ^^1^ ^0^4^10^Abstand zwischen Grafik und unterem Hintergrundrand^106^^^integer^
+20^Innenrand oben^insetTop^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung oben^107^^^integer^
+21^Innenrand unten^insetBottom^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung unten^108^^^integer^
+22^Innenrand links^insetLeft^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung links^109^^^integer^
+23^Innenrand rechts^insetRight^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung rechts^110^^^integer^
+24^Farbschema^scheme^ ^ ^1^blues|greens|greys|oranges|purples|reds^0^2^22^Nur für Grafikelemente Balken und Linien: Farbtonschema für Serien.^303^^^string^
 25^Farbtyp^type^^ ^1^einfarbig|mehrfarbig|zyklisch^0^2^20^Ein-/Mehrfarbigkeit von Diagrammelementen^302^^^string^
 43^Farbsättigung^fillOpacity^^ ^1^ ^0^4^20^Deckkraft der Füllfarbe von Diagrammelementen^306^^^string^
 45^Strichdicke^strokeWidth^^ ^1^ ^0^1^12^Strichdicke von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^308^^^string^
@@ -27,17 +27,17 @@
 58^Datums-Skala^date scales^^ ^1^time|utc^0^2^15^Art der Skalen-Gliederung^403^^^string^
 60^Farbschema-Typ^schemetype^^ ^1^linear|sqrt|pow|log|symlog|sequential|cyclical|quantile^0^2^20^Art der Farbverteilung in Diagrammelementen^304^^^string^
 61^Grafik-Elementtyp^marks^ ^ ^1^Plot.line|Plot.dot|Plot.areaX|Plot.areaY.|Plot.barX|Plot.barY|Plot.rectX|Plot.rectY|Plot.ruleX|Plot.ruleY|Plot.tickX|Plot.tickY|Plot.arrow|Plot.cell|Plot.text|Plot.link|Plot.image^0^2^12^Ausrichtung und Form der grafischen Elemente^301^^^string^
-63^X: Label-Abstand^labelOffset_x^^px^1^ ^0^1^18^Label-Abstand von Achse^602^^^integer^
+63^X: Label-Abstand^labelOffset_x^^^1^ ^0^1^18^Label-Abstand von Achse^602^^^integer^
 68^Maß: Chart-Abstand^gridChartOffset^^ ^1^ ^0^1^18^ ^607^^^string^
-69^Maß: Label-Höhe^gridLabelHeight^^px^1^ ^0^1^18^ ^608^^^integer^
+69^Maß: Label-Höhe^gridLabelHeight^^^1^ ^0^1^18^ ^608^^^integer^
 70^X-Achse^x^^ ^1^ ^0^1^5^ ^608^^^string^
 72^Y-Achse^y^^ ^1^ ^0^1^6^ ^608^^^string^
 73^Maß 1^measure1^^ ^1^ ^0^1^6^ ^608^^^string^
 76^Serien-Dimension^stroke^^ ^1^ ^0^1^5^ ^608^^^string^
-78^Legende^legend^^ ^1^true|false^0^2^11^ ^303^^^boolean^
+78^Legende^legend^ ^ ^1^true|false^0^2^22^ ^303^^^boolean^
 79^Beschriftung^text^ ^ ^1^ ^0^1^5^ ^608^^^string^
-80^Serienfarbe^fill^ ^ ^1^ ^0^1^20^Nur für Grafikelemente Balken und Linien: Merkmal der Serien-Dimension^305^^^string^
-81^Y: Label-Abstand^labelOffset_y^^px^1^ ^0^1^21^Label-Abstand von Achse^602^^^integer^
+80^Serienfarbe^fill^ ^ ^1^ ^0^1^22^Nur für Grafikelemente Balken und Linien: Merkmal der Serien-Dimension^305^^^string^
+81^Y: Label-Abstand^labelOffset_y^^^1^ ^0^1^21^Label-Abstand von Achse^602^^^integer^
 82^Y: Label-Ausrichtung^labelAnchor_y^^ ^1^left|center|right^0^2^21^Label-Position^601^^^string^
 83^Y: Schriftgröße^tickSize_y^^ ^1^ ^0^1^21^Größe der Achsenwerte^603^^^integer^
 84^Y: Schriftneigung^tickRotate_y^^ ^1^ ^0^1^21^Neigungswinkel der Achsenwerte^604^^^integer^

src-modules/module/viz/schluesseltabellen/viz_property_group.unl

@@ -6,5 +6,5 @@
 15^SCALES^Skalen-Typen^100^
 18^TICKS_LABELS_X^X-Achsen-Beschriftung^60^
 19^TICKFORMATTING^Zahlen-, Datumsformat^90^
-20^COLOR^Farben^40^
 21^TICKS_LABELS_Y^Y-Achsen-Beschriftung^50^
+22^SERIES^Seriendimension^65^

src-modules/module/viz/schluesseltabellen/viz_property_group_renderer.unl

@@ -3,3 +3,4 @@
 3^2^18^x^
 4^2^20^color^
 5^2^21^y^
+6^2^22^color^

src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl

@@ -1,5 +1,5 @@
 1^2^2^width^
-2^2^4^background^
+2^2^4^backgroundColor^
 3^2^5^color^
 4^2^7^fontFamily^
 5^2^6^fontSize^

src-modules/module/viz/schluesseltabellen/viz_type.unl

@@ -8,4 +8,4 @@
 9^box_y^Boxplot (vertikal)^2^ ^ ^V^
 10^text^Wertelabel^2^ ^ ^^
 11^bar_x_d3^Balken (horizontal)^1^^^H^
-12^sankey^Sankey^1^/superx/xml/js/viz/sankey.js^^H^
+12^sankey^Sankey^1^ ^^H^

src-modules/module/viz/schluesseltabellen/viz_type_property.unl

@@ -10,11 +10,10 @@
 17^6^72^1^0^
 20^1^76^0^20^
 22^2^76^0^20^
-24^5^8^0^20^
+24^5^80^0^20^
 26^3^76^0^20^
 27^6^88^0^0^
 29^6^89^0^0^
-30^5^89^0^0^
 33^7^70^1^0^
 34^7^72^0^0^
 35^9^70^0^0^

superx/xml/30190_html_chart_sankey.xsl

@@ -18,10 +18,9 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
                                                       <!-- wichtig für DOJO!-->
 <xsl:output method="xml"    media-type="text/html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="DTD/xhtml1-strict.dtd"    cdata-section-elements="script style"    indent="yes" encoding="UTF-8"/>
-<xsl:variable name="defaultRenderer" select="'d3jsv3'" />
+<xsl:variable name="defaultRenderer" select="'d3js'" />
 <xsl:variable name="availableRendererPlot" select="'false'" />
-<xsl:variable name="availableRendererD3" select="'false'" />
-<xsl:variable name="availableRendererD3V3" select="'true'" />
+<xsl:variable name="availableRendererD3" select="'true'" />
 
 <xsl:template match="/">
 <xsl:call-template name="table"/>
@@ -74,9 +73,9 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 </xsl:template>
 <!-- end main -->
 <xsl:template name="importVizJavascriptLibs">
-<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.v3.min.js" />
-<script language="Javascript" type="text/javascript" src="../xml/js/viz/viz_functions.js" />
-<script language="Javascript" type="text/javascript" src="../xml/js/viz/sankey_v3.js" />
+<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.min.js" />
+<script language="Javascript" type="text/javascript" src="../xml/js/viz/plot.js" />
+<script language="Javascript" type="module" src="../xml/js/viz/d3-sankey.js" />
 <script language="Javascript" type="text/javascript">
 <xsl:text><![CDATA[
 function createViewer()
@@ -87,6 +86,8 @@ renderChart('chartDiv2',myChartModel);
 }
 ]]></xsl:text>
 </script>
+<xsl:call-template name="importVizJavascriptLibs" />
+
 </xsl:template>
 
 <xsl:template name="viz_canvas">

superx/xml/js/viz/viz_functions.js

@@ -164,11 +164,12 @@ this.datasource=datasource;
 this.elementTypeProperties=new Array();
 }
 
-function usedVizProperty(name,vizPropertyVariablename,propertyValue ) 
+function usedVizProperty(name,vizPropertyVariablename,propertyValue,propUnit ) 
     {
 this.name=name;
 this.vizPropertyVariablename=vizPropertyVariablename;
 this.propertyValue=propertyValue;
+this.propUnit=propUnit;
 
 }
 function usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue ) 
@@ -256,6 +257,7 @@ var isDefault=false;
 
 function selectionProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) 
     {
+	/*OBSOLETE*/
 this.name=name;
 this.caption=caption;
 this.isDynamic=isDynamic;
@@ -305,7 +307,7 @@ function renderChartSVGFromModel(currentChartModel,targetDiv) {
 		
 		switch (currentChartModel.renderer) {
 			case "plot":
-			renderChartSVGWithPlot(currentChartModel,targetDiv);
+			renderChartSVGfromModelWithPlot(currentChartModel,targetDiv);
 			break;
 			case "d3js":
 			renderChartSVGWithD3(currentChartModel,targetDiv);
@@ -319,7 +321,7 @@ function renderChartSVGFromModel(currentChartModel,targetDiv) {
 			}
 		return true;
 		}
-function renderChartSVGWithPlot (currentChartModel,targetDiv)
+function renderChartSVGfromModelWithPlot (currentChartModel,targetDiv)
 	{
 		console.log("using Plot");
 		var myOptions=new Object;
@@ -352,11 +354,14 @@ function renderChartSVGWithPlot (currentChartModel,targetDiv)
 	
 		myOptions["marks"].push(marksArray);
 		var svgPlot=Plot.plot(myOptions);
+		var srcPlot=JSON.stringify(myOptions);
+		document.getElementById("plotCodeTextArea").innerHTML=srcPlot;
 		document.getElementById(targetDiv).innerHTML="";
 		document.getElementById(targetDiv).appendChild(svgPlot);
 		
 		//return svgPlot;
 		}
+
 function renderChartSVGWithD3 (currentChartModel,targetDiv)
 	{
 		console.log("using D3JS");
@@ -406,7 +411,7 @@ function updateChartModel()
 		{
 			if(getCommonChartProperty(commonChartProperties[k].name)!="")
 			{
-				var myProp=new usedVizProperty(commonChartProperties[k].name,commonChartProperties[k].variableName,getCommonChartProperty(commonChartProperties[k].name));
+				var myProp=new usedVizProperty(commonChartProperties[k].name,commonChartProperties[k].variableName,getCommonChartProperty(commonChartProperties[k].name),commonChartProperties[k].propUnit);
 				myChartPropertiesUsed.push(myProp);
 			}
 		}
@@ -451,7 +456,7 @@ function getPlotOptionsObj(chartPropertiesUsed)
 				&& commonChartProperties[k].variableName!=""
 				&& getChartPropertyValue(chartPropertiesUsed,commonChartProperties[k].name)!="")
 			{
-				textDelim=(commonChartProperties[k].propValueType=="string")?"\"":"";
+				textDelim=(commonChartProperties[k].propValueType=="string" || commonChartProperties[k].propUnit!="")?"\"":"";
 				optionsString+=",\""+commonChartProperties[k].variableName+"\":"+textDelim+getChartPropertyValue(chartPropertiesUsed,commonChartProperties[k].name)+textDelim;
 			}
 		}
@@ -695,10 +700,17 @@ function removeChartElementConfig()
 	}
 }
 
-function resetChartPropertiesForm()
+function resetChartPropertiesForm(chosenRenderer)
 {
 	myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData);
 	renderChart('chartDiv',myChartModel);
+	//Show Plot Code if renderer =plot:
+	var myDiv=document.getElementById("plotCodeDiv");
+	if(chosenRenderer=="plot")
+		myDiv.style.display="block";
+	else
+		myDiv.style.display="none";
+
 	return true;
 }
 function getPossibleVizTypes(renderer)
@@ -830,7 +842,74 @@ function prepareLineForm_alt()
 return chartProperties;
 }
 */
-function fillDataSelectionForm(formDiv)
+function fillDataTransformationForm(formDiv,tableId)
+{
+	/* OBSOLETE*/
+formDivElem=document.getElementById(formDiv);
+if(formDivElem.style.display=="none")
+{
+	while (formDivElem.firstChild) {
+		formDivElem.removeChild(formDivElem.firstChild);
+	}
+
+	const elementDivBox = document.createElement("div");
+
+	for(var k=0;k < rsColumnMetaData[tableId].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");
+		label.classList.add("has-tooltip-right");
+		//label.setAttribute("data-tooltip",dimensionProperty.explanation);
+
+		const textnode = document.createTextNode(rsColumnMetaData[tableId][k].colcaption);
+		label.appendChild(textnode);
+		labelElem.appendChild(label);
+		fieldElem.appendChild(labelElem);
+		//TODO: Funktionen
+				//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=rsColumnMetaData[tableId][k].name+"_fn";
+		selElem.id=rsColumnMetaData[tableId][k].name+"_fn";
+			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;
+
+		fillSelectOptions(selElem,dimFunctions,false);
+		inputSelectElem.appendChild(selElem);
+		inputFieldElem.appendChild(inputSelectElem);
+		fieldElem.appendChild(inputFieldElem);
+		elementDivBox.appendChild(fieldElem);
+
+	}
+	formDivElem.appendChild(elementDivBox);
+	formDivElem.style.display="block";
+}
+else
+	formDivElem.style.display="none";
+	
+}
+
+function fillDataSelectionForm(formDiv,tableId)
 {
 	/* OBSOLETE*/
 formDivElem=document.getElementById(formDiv);
@@ -2308,6 +2387,8 @@ function getChartPropertyValue(propArray,propName)
 		if(propArray[i].name==propName )
 			{
 			propertyValue=propArray[i].propertyValue;
+			if(propArray[i].propUnit && propArray[i].propUnit !="")
+				propertyValue+=propArray[i].propUnit;
 			}
 
 	}
@@ -2418,6 +2499,16 @@ updateChartModelCode(myChartModel);
 
 
 }
+function showPlotCode()
+{
+var mySrcDiv=document.getElementById("plotCodeTextAreaDiv");
+	if(mySrcDiv.style.display=="block")
+		mySrcDiv.style.display="none";
+	else
+		mySrcDiv.style.display="block";
+
+}
+
 function updateChartModelCode(myChartModel)
 {
 var myCodeDiv= document.getElementById("chartModelSrcCode");

superx/xml/viz_html_chart.xsl

@@ -79,7 +79,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <script language="Javascript" type="module" src="../xml/js/viz/d3-sankey.js" />
 <xsl:for-each select="/ergebnisse/ergebnis/ergebniselement/vizTypes/vizType[@srcpath !='/superx/xml/js/viz/d3.min.js' 
 and @srcpath != '/superx/xml/js/viz/plot.js'
-and @srcpath != '/superx/xml/js/viz/sankey.js'
+and @srcpath != '/superx/xml/js/viz/d3-sankey.js'
 and @srcpath != ''
 and (@renderer_uniquename='plot' or @renderer_uniquename='d3js') ]">
 <script language="Javascript" type="text/javascript" src="{@srcpath}" />
@@ -103,6 +103,7 @@ staticValues,
 range_from,
 range_to,
 defaultValue,
+propUnit,
 explanation,
 groupCaption,
 groupUniquename,
@@ -120,6 +121,7 @@ this.range_to=range_from;
 this.isMandatory=isMandatory;
 this.inputType=inputType;
 this.defaultValue=defaultValue;
+this.propUnit=propUnit;
 this.explanation=explanation;
 this.groupCaption=groupCaption;
 this.groupUniquename=groupUniquename;
@@ -178,6 +180,8 @@ var newCommonChartProperty = new commonChartProperty("</xsl:text>
 <xsl:text>","</xsl:text>
 <xsl:value-of select="@prop_default" />
 <xsl:text>","</xsl:text>
+<xsl:value-of select="@prop_unit" />
+<xsl:text>","</xsl:text>
 <xsl:value-of select="@explanation" />
 <xsl:text>","</xsl:text>
 <xsl:value-of select="@group_caption" />
@@ -634,7 +638,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 <!--
 <div class="field is-grouped">
   <div class="label-container">
-     <label class="label is-required is-small"><strong>Daten-Auswahl</strong></label>
+     <label class="label is-required is-small"><strong>Daten-Transformation</strong></label>
   </div> 
   
   <span class="separator">&#160;</span>
@@ -642,7 +646,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
      
  
   <a  
-  onClick="fillDataSelectionForm('dataSelectionFormDiv');">					
+  onClick="fillDataTransformationForm('dataSelectionFormDiv',0);">					
 	<span class="icon">
 		<img src="../images/icons/more.svg" title="Laden" /> 
 	</span>
@@ -810,12 +814,15 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 			<img src="../images/information_grey_liberation.svg" />
 		   </figure>
 	   </span>
+	     
 	</div>
 	
 
   </div>
+
  </form>
-</div>-->
+</div>
+-->
 <!--Ende Formular Datenauswahl-->
 
 <span class="separator">&#160;</span>
@@ -889,7 +896,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 	  <div class="field is-active">
 	      <p class="control-new">
 	       <div class="select is-small is-fullwidth">
-	       <select class="maskinputPflicht" id="fldVizRenderer" NAME="fldVizRenderer" tabindex="1" onChange="resetChartPropertiesForm();" >
+	       <select class="maskinputPflicht" id="fldVizRenderer" NAME="fldVizRenderer" tabindex="1" onChange="resetChartPropertiesForm(this.value);" >
 		<xsl:if test="$availableRendererPlot='true'">     
 	       <option class="maskinput" value="plot" selected="selected">Observable Plot</option>
 	       </xsl:if>
@@ -1009,6 +1016,26 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
   <rect x="0" y="0" width="650" height="450" fill="#cccccc"></rect>
   </svg></div>
 	
+</div>
+<!--Beginn PlotCode-->
+<div class="field is-grouped" id="plotCodeDiv" style="display:block">
+     <div class="label-container">
+     <label class="label is-required is-small"><strong>Plot-Code</strong></label>
+    </div>
+    <span class="separator">&#160;</span>
+    <span class="separator">&#160;</span>
+     <a onClick="showPlotCode();">					
+	<span class="icon">
+		<img src="../images/icons/more.svg" title="Laden" /> 
+	</span>
+     </a>
+    <div id="plotCodeTextAreaDiv" style="display:none"> 
+	<textarea id="plotCodeTextArea" name="plotCodeTextArea" class="textarea" placeholder="Plot-Quellcode..." readonly="readonly" disabled="disabled">  <!--cols="100" rows="20"-->
+	</textarea>
+	
+	</div>
+
+	
 </div>
   </div>
   </div><!--Ende Eigenschaften + Vorschau  viewBox="0 0 650 450"-->
@@ -1110,7 +1137,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 <!--footer (BF nach unten verschoben)-->
 <footer class="card-footer">
 	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit" onClick="alert('noch nicht implementiert)');">Speichern</button></p>
-	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset" onClick="return resetChartPropertiesForm();">Zurücksetzen</button></p>
+	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset" onClick="return resetChartPropertiesForm('plot');">Zurücksetzen</button></p>
 </footer>
 
 </xsl:template>