Plot neue Version 0.6.1, neue Tabelle viz_property_renderer #5

.classpath

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8"/>
+	<classpathentry kind="src" path="src/main/java"/>
+	<classpathentry kind="con" path="org.eclipse.jst.j2ee.internal.web.container"/>
+	<classpathentry kind="con" path="org.eclipse.jst.j2ee.internal.module.container"/>
+	<classpathentry kind="output" path="build/classes"/>
+</classpath>

.gitignore

@@ -0,0 +1 @@
+/build/

.project

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>viz</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.wst.common.project.facet.core.builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.wst.validation.validationbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jem.workbench.JavaEMFNature</nature>
+		<nature>org.eclipse.wst.common.modulecore.ModuleCoreNature</nature>
+		<nature>org.eclipse.wst.common.project.facet.core.nature</nature>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
+	</natures>
+</projectDescription>

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

@@ -1,6 +1,7 @@
 doku/viz_modul/viz.html
 images/icons/more.svg
 images/icons/chart-bar.svg
+images/information_grey_liberation.svg
 style/sx_viz_muster.css
 WEB-INF/conf/edustore/db/bin/SQL_ENV_viz.sam
 xml/js/viz/viz_functions.js

src-modules/module/viz/conf/viz.xml

@@ -16,6 +16,9 @@ rightname="CS_BIA_STANDARDREPORTS_ADMIN[VIZ]" />
 		<column name="tid" type="SERIAL" size="" default=""	notnull="true" description="tid" isKey="true"/>
 		<column name="uniquename" type="VARCHAR" size="255" default=""	notnull="true" description="Unique Name" />
 		<column name="caption" type="VARCHAR" size="255" default=""	notnull="" description="Bezeichnung" />
+		<column name="renderer_id" type="INTEGER" size="4" default="" notnull="false" description="Renderer"  isKey="false"/>
+		<column name="srcpath" type="VARCHAR" size="255" default="" notnull="false" description="Pfad zum Quellcode"  isKey="false"/>
+		<column name="method" type="VARCHAR" size="255" default="" notnull="false" description="Methode"  isKey="false"/>
 
 	</columns>
 	<primaryKeys><rs>
@@ -197,6 +200,8 @@ rightname="CS_BIA_STANDARDREPORTS_ADMIN[VIZ]" />
 		<column name="tid" type="SERIAL" size="" default=""	notnull="true" description="tid" isKey="true"/>
 		<column name="viz_type_id" type="INTEGER" size="" default="" notnull="false" description="Art der Visualisierung" />
 		<column name="viz_property_id" type="INTEGER" size="255" default=""	notnull="" description="Eigenschaft der Visualisierung" />
+		<column name="viz_property_id" type="INTEGER" size="255" default=""	notnull="" description="Eigenschaft der Visualisierung" />
+		<column name="is_mandatory" type="SMALLINT" size="255" default="0"	notnull="false" description="Pflichteingabe" ><comment>1=ja, 0=nein</comment></column>
 
 	</columns>
 	<primaryKeys><rs>
@@ -334,7 +339,11 @@ parent="Masken verwalten">Abfragen zur Administration von Visualisierungen </the
 	displayType="select" visibleFields="caption" format="%s">
 	<relation-column from="tid" to="renderer_id" />
 </relation>
-
+<!-- viz_type -->
+<relation from="viz_renderer" to="viz_type" delete="FALSE"
+	displayType="select" visibleFields="caption" format="%s">
+	<relation-column from="tid" to="renderer_id" />
+</relation>
 </data-integrity>
 
 </database>

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

@@ -1,30 +1,33 @@
-1^Diagramm-Höhe^height^500^px^1^^0^1^10^(Wird nur ausgewertet wenn es keine Y-Achse gibt)^^^^
-2^Diagramm-Breite^chartWidth^600^px^1^^0^1^10^Äußere Breite des Diagramms  inkl. Ränder^^100^2000^
-3^Werte-Label-Breite^valueLabelWidth^20^px^1^^0^1^10^^^^^
-4^Hintergrundfarbe^backgroundColor^#ffffeb^ ^1^ ^0^1^11^^^^^
-5^Vordergrundfarbe^color^#3333ff^ ^1^ ^0^1^11^Text- und Diagrammelemente^^^^
-6^Schriftgröße^fontSize^10^pt^1^^0^1^11^Text- und Diagrammelemente^^^^
-7^Schriftfamilie^fontFamily^sans-serif^ ^1^sans-serif|serif|monospace^0^2^11^^^^^
-8^Flächenfarbe^fill^blue^ ^1^ ^0^1^12^^^^^
-9^Grid-Label-Höhe^gridLabelHeight^18^ ^1^ ^0^1^10^^^^^
-10^Grid-Offset^gridChartOffset^3^ ^1^ ^0^1^10^^^^^
-11^tickRotate^tickRotate^-45^ ^0^ ^0^1^5^^^^^
-12^ticks^Einheit X-Achse^5^ ^0^ ^0^1^5^^^^^
-13^tickSize^Abstand X-Achse und Beschriftung^10^ ^0^ ^0^1^5^^^^^
-14^labelOffset^Abstand X-Achse Beschriftung^10^ ^0^ ^0^1^5^^^^^
-15^Ausrichtung X-Achse Beschriftung^labelAnchor^center^ ^0^left|center|right^0^2^5^^^^^
-16^Außenrand links^^^^1^^0^1^10^^^^^
-17^Außenrand rechts^^^^1^^0^1^10^^^^^
-18^Außenrand oben^^^^1^^0^1^10^^^^^
-19^Außenrand unten^^^^1^^0^1^10^^^^^
-20^Innenrand oben^^^^1^^0^1^10^^^^^
-21^Innenrand unten^^^^1^^0^1^10^^^^^
-22^Innenrand links^^^^1^^0^1^10^^^^^
-23^Innenrand rechts^^^^1^^0^1^10^^^^^
-24^Farbschema^scale.scheme^ ^ ^1^blues|greens^0^2^12^^^^^
-25^Farbtyp^^^^1^^0^1^12^^^^^
-43^Farbsättigung^^^^1^^0^1^12^^^^^
-44^Strichfarbe^stroke^ ^ ^1^ ^0^1^12^^^^^
-45^Strichdicke^strokeWidth^ ^ ^1^ ^0^1^12^^^^^
-47^Werte X-Achse^Plot.groupX^ ^ ^1^Anzahl|Summe|Proportion|Minimum|Maximum|Durchschnitt|Varianz|Erster|Letzter^0^2^14^^^^^
-55^Werte Y-Achse^Plot.groupY^ ^ ^1^Anzahl|Summe|Proportion|Minimum|Maximum|Durchschnitt|Varianz|Erster|Letzter^0^2^14^^^^^
+1^Diagramm-Höhe^height^400^px^1^ ^0^4^10^(Wird nur ausgewertet wenn es keine Y-Achse gibt)^101^^^
+2^Diagramm-Breite^width^500^px^1^ ^0^4^10^Äußere Breite des Diagramms  inkl. Ränder^102^100^2000^
+3^Werte-Label-Breite^valueLabelWidth^20^px^1^^0^1^18^^^^^
+4^Hintergrundfarbe^backgroundColor^#ccffcc^ ^1^#ffffeb^0^3^11^ ^201^^^
+5^Vordergrundfarbe^color^black^ ^1^black^0^3^11^Text- und Diagrammelemente^202^^^
+6^Schriftgröße^fontSize^10^px^1^ ^0^4^11^Text- und Diagrammelemente^204^^^
+7^Schriftfamilie^fontFamily^serif^ ^1^serif|sans-serif|monospace|system_ui^0^2^11^ ^203^^^
+8^Flächenfarbe^fill^blue^ ^1^blue|red|brand^0^2^12^relevant für Flächen,Balken, Säulen, Streifen, Punkte^305^^^
+11^Kat: Schriftneigung^tickRotate^-45^ ^1^ ^0^1^18^ ^604^^^
+12^Kat: Skalierung^ticks^5^ ^1^ ^0^1^18^ ^605^^^
+13^Kat: Schriftgröße^tickSize^10^ ^1^ ^0^1^18^ ^603^^^
+15^Kat: Label-Ausrichtung^labelAnchor^center^ ^1^left|center|right^0^2^18^ ^601^^^
+16^Außenrand links^marginLeft^50^px^1^ ^0^4^10^ ^103^^^
+17^Außenrand rechts^marginRight^50^px^1^ ^0^4^10^ ^104^^^
+18^Außenrand oben^marginTop^50^px^1^ ^0^4^10^ ^105^^^
+19^Außenrand unten^marginBottom^50^px^1^ ^0^4^10^ ^106^^^
+20^Innenrand oben^insetTop^0^px^1^ ^0^4^10^ ^107^^^
+21^Innenrand unten^insetBottom^0^px^1^ ^0^4^10^ ^108^^^
+22^Innenrand links^insetLeft^0^px^1^ ^0^4^10^ ^109^^^
+23^Innenrand rechts^insetRight^0^px^1^ ^0^4^10^ ^110^^^
+24^Farbschema^scheme^ ^ ^1^blues|greens|greys|oranges|purples|reds^0^2^12^ ^303^^^
+25^Farbtyp^type^ ^ ^1^einfarbig|mehrfarbig|zyklisch^0^2^12^ ^302^^^
+43^Farbsättigung^fillOpacity^0,5^ ^1^ ^0^4^12^ ^306^^^
+44^Strichfarbe^stroke^ ^ ^1^ ^0^1^12^sfsfsdf^307^^^
+45^Strichdicke^strokeWidth^ ^ ^1^ ^0^1^12^^308^^^
+56^Fortlaufende Skala^continous scales^ ^ ^1^identity|linear|log|pow|sqrt|symlog^0^2^15^ ^401^^^
+57^Kategorie-Skala^categorical scales^ ^ ^1^point|band^0^2^15^ ^402^^^
+58^Datums-Skala^date scales^ ^ ^1^time|utc^0^2^15^ ^403^^^
+60^Farbschema-Typ^schemetype^ ^ ^1^linear|sqrt|pow|log|symlog|sequential|cyclical|quantile^0^2^12^ ^304^^^
+61^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^ ^301^^^
+63^Kat: Label-Abstand^labelOffset^ ^px^1^ ^0^1^18^ ^602^^^
+68^Maß: Chart-Abstand^gridChartOffset^3^ ^1^ ^0^1^18^ ^607^^^
+69^Maß: Label-Höhe^gridLabelHeight^18^px^1^ ^0^1^18^ ^608^^^

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

@@ -1,6 +1,9 @@
-5^X^X-Achse^50^
-6^Y^Y-Achse^40^
-10^LAYOUT^Diagramm-Layout^10^
-11^STYLE^Diagramm-Style^20^
-12^ELEMENTS^Diagramm-Elemente^30^
-14^DATACATEGORY^Wertekategorien^60^
+5^CATEGORY^Kategorie-Achse^60^
+6^DIMENSION^Maß-Achse^70^
+10^LAYOUT^Layout^10^
+11^STYLE^Style^20^
+12^MARKS^Diagramm-Elemente^30^
+15^SCALES^Skalen-Typen^40^
+17^AXIS^Achsen-Customizing^50^
+18^TICKS_LABELS^Achsen-Beschriftung^^
+19^TICKFORMATTING^Zahlen-, Datumsformat^80^

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

@@ -4,3 +4,5 @@
 4^2^7^fontFamily^
 5^2^6^fontSize^
 6^2^1^height^
+7^2^8^fill^
+8^2^16^marginLeft^

src-modules/module/viz/schluesseltabellen/viz_property_unload.x

@@ -4,3 +4,6 @@ DOQUERY "select * from viz_property_group order by 1,2" false ^ viz_property_gro
 DOQUERY "select * from viz_renderer order by 1,2" false ^ viz_renderer.unl
 DOQUERY "select * from viz_property_renderer order by 1,2" false ^ viz_property_renderer.unl
 DOQUERY "select * from viz_property_group_renderer order by 1,2" false ^ viz_property_group_renderer.unl
+DOQUERY "select * from viz_type order by 1,2" false ^ viz_type.unl
+DOQUERY "select * from viz_type_property order by 1,2" false ^ viz_type_property.unl
+

superx/META-INF/MANIFEST.MF

@@ -0,0 +1,3 @@
+Manifest-Version: 1.0
+Class-Path: 
+

superx/xml/js/viz/viz_functions.js

@@ -114,6 +114,7 @@ this.getValueResultset = function () {
     }
 }
 
+
 function prepareSelectionForm()
 {
 	var selectionProperties=[];
@@ -145,13 +146,15 @@ function prepareChartProperties(chartType)
 	//document.forms["chartPropertiesForm"].elements["chartWidth"].value=chartWidth;
 	switch (chartType) {
 	case "bar_x":
-	chartProperties=prepareBarXForm();
+	chartProperties=prepareForm("bar_x",vizTypeProperties); //prepareBarXForm();
 	break;
 	case "bar_y":
 	chartProperties=prepareBarYForm();
 	break;
 	case "area_y":
 	chartProperties=prepareBarYForm();
+	case "dot":
+	chartProperties=prepareBarYForm();
 	break;
 	case "line":
 	chartProperties=prepareLineForm();
@@ -167,6 +170,22 @@ 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,isMeasure,vizTypeProperties[k].isMandatory);
+		chartProperties.push(myProp);
+		propertyCounter++;
+	}
+	}
+	return chartProperties;
+}
 
 function prepareBarXForm()
 {
@@ -397,7 +416,7 @@ function renderForm(formDiv,myChartProperties,myCommonChartProperties)
 	columnDivBoxTitle.style="width: 500px";
 	for(var k=0;k < myCommonChartProperties.length;k++)
 		{
-			if(myCommonChartProperties[k].name=="chartCaption")
+			if(myCommonChartProperties[k].name=="caption")
 				columnDivBoxTitle.appendChild(renderChartPropertyField(myCommonChartProperties[k]));
 		}
 	
@@ -503,7 +522,7 @@ for(var k=0;k < myCommonChartProperties.length;k++)
 		var groupUniquename=myCommonChartProperties[k].groupUniquename;
 		if(groupUniquename!="" && groupUniquename != previousGroup)
 		{
-		var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename);
+		var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,"");
 		commonChartPropertyGroups.push(newcommonChartPropertyGroup);
 		}
 	previousGroup=groupUniquename;
@@ -890,6 +909,9 @@ case "bar_x":
 	case "area_y":
 		makeAreaY(chartDivElem,selectionRs);
 	break;
+	case "dot":
+		makeDot(chartDivElem,selectionRs);
+	break;
 	case "line":
 		makeLine(chartDivElem,selectionRs);
 		break;
@@ -1009,33 +1031,76 @@ function makeSample()
 function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVertical)
 {
 	var options;
-	var categoryDim=document.getElementById("dimension1").value;
-	var measureDim=document.getElementById("measure1").value;
-	var fontSizeDefault=getCommonChartProperty("fontSize")+"pt";
-	var myCaption=getCommonChartProperty("chartCaption");
+	var categoryDim=document.getElementById("viz_dimension1").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 marginLeftDefault=chartWidth/5; //20% linker Rand
-	var marginBottomDefault=100;
+	var marginBottomValue=100;//getCommonChartProperty("marginBottom");;
 	var categoryLabel=getColumnCaption(categoryDim);
 	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:
+	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)!="")
+			{
+				optionsString+=",\""+commonChartProperties[k].variableName+"\":\""+getCommonChartProperty(commonChartProperties[k].name)+"\"";
+			}
+		}
+		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].variableName!="" && (commonChartProperties[k].groupUniquename=="STYLE" 
-			|| commonChartProperties[k].groupUniquename=="LAYOUT"))
+		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);
 	/*var styles={
     backgroundColor: myBgColor,
     color: myColor,
@@ -1047,8 +1112,8 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 	if(chartOrientationVertical)
 		{
 	 options={
-			marginLeft:marginLeftDefault,
-			marginBottom:marginBottomDefault,
+			marginLeft:marginLeftValue,
+			marginBottom:marginBottomValue,
 			width:chartWidth,
 			x: {
 				    tickRotate: -45,
@@ -1066,9 +1131,11 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 		}
 	else
 		{
+		options=chartOptions;
+		/*
 		 options={
-					marginLeft:marginLeftDefault,
-					marginBottom:marginBottomDefault,					
+					marginLeft:marginLeftValue,
+					marginBottom:marginBottomValue,					
 					width:chartWidth,
 					y: {
 					    label:categoryLabel
@@ -1083,7 +1150,7 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 					caption:myCaption
 					  
 		 		}
-		
+		*/
 		}
 	//document.getElementById("chartOptions").innerHTML=JSON.stringify(options);
 
@@ -1126,6 +1193,7 @@ function makeBarX(chartDivElem,selectionRs) {
     Plot.barX(selectionRs, {x: measureDim, y: categoryDim})
   ]
 });*/
+console.log("Options:"+  JSON.stringify(options));
 var svgPlot=Plot.plot(options);
 	document.getElementById(chartDivElem).appendChild(svgPlot);
 	}
@@ -1155,6 +1223,20 @@ function makeAreaY(chartDivElem,selectionRs) {
 
 	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
+    		        });
+
+	var options= getChartOptions(categoryDim,measureDim,marksArray,true);
+	
 	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
 	}
 function makeLine(chartDivElem,selectionRs) {
@@ -1221,7 +1303,7 @@ function getCommonChartProperty(name)
 	var propertyValue="";
 	for (var i=0;i<commonChartProperties.length;i++)
 	{
-		if(commonChartProperties[i].name==name )
+		if(commonChartProperties[i].name==name && document.forms["chartPropertiesForm"].elements[name])
 			{
 			propertyValue=document.forms["chartPropertiesForm"].elements[name].value;
 			if(propertyValue=="" && commonChartProperties[i].defaultValue!="")

superx/xml/viz_html_chart.xsl

@@ -122,6 +122,10 @@ padding-bottom:10px;
 <xsl:template name="tableJavascript_viz">
 <script language="Javascript" type="text/javascript" src="/superx/xml/js/viz/d3.min.js" />
 <script language="Javascript" type="text/javascript" src="/superx/xml/js/viz/plot.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']">
+<script language="Javascript" type="text/javascript" src="{@srcpath}" />
+</xsl:for-each>
+
 <script><xsl:text><![CDATA[
 
 //document.body.append(Plot.plot(options));
@@ -175,12 +179,15 @@ var staticValueArray = staticValues.split(/\|/);
 	return valueOptions;
 }
 }
-function commonChartPropertyGroup(caption,groupUniquename) 
+function commonChartPropertyGroup(caption,groupUniquename,groupVariableName) 
 {
 this.caption=caption;
 this.groupUniquename=groupUniquename;
+this.groupVariableName=groupVariableName;
 }
 
+
+
 var commonChartProperties=[];
 ]]></xsl:text>
 <xsl:for-each select="/ergebnisse/ergebnis/ergebniselement/chartProperties/commonChartProperty">
@@ -222,7 +229,7 @@ commonChartProperties.push(newCommonChartProperty);
 </xsl:text>
 </xsl:for-each>
 <xsl:text>
-var newCommonChartProperty = new commonChartProperty("chartCaption",
+var newCommonChartProperty = new commonChartProperty("caption",
 "Titel des Diagramms", 
 false,
 "TEXTAREA",
@@ -235,11 +242,39 @@ false,
 "Diagrammkopf",
 "",
 "plot",
-"",
-"");
+"layout",
+"caption");
 commonChartProperties.push(newCommonChartProperty);
 
 </xsl:text>
+<xsl:text>
+function vizTypeProperty(propUniquename,caption,typeUniquename,groupUniquename,isMandatory) 
+{
+this.propUniquename=propUniquename;
+this.caption=caption;
+this.groupUniquename=groupUniquename;
+this.typeUniquename=typeUniquename;
+this.isMandatory=isMandatory;
+}
+
+var vizTypeProperties=[];
+</xsl:text>
+<xsl:for-each select="/ergebnisse/ergebnis/ergebniselement/viz_type_properties/viz_type_property">
+<xsl:text>
+var newVizTypeProperty = new vizTypeProperty("</xsl:text>
+<xsl:value-of select="@uniquename" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@caption" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@viz_type_uniquename" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@viz_property_group_uniquename" />
+<xsl:text>",</xsl:text>
+<xsl:value-of select="@is_mandatory" /><xsl:text>
+);
+vizTypeProperties.push(newVizTypeProperty);
+</xsl:text>
+</xsl:for-each>
 
 </script>
 <script language="Javascript" type="text/javascript" src="../xml/js/viz/viz_functions.js" />
@@ -1695,10 +1730,9 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 	       <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>
+		    <xsl:for-each select="/ergebnisse/ergebnis/ergebniselement/vizTypes/vizType">
+		    <option class="maskinput" value="{@uniquename}"><xsl:value-of select="@caption" /></option>
+		    </xsl:for-each>
 		 </select>
 	       </div>
 	      </p>