Layout Assistent, Area Chart #5

superx/xml/js/viz/viz_functions.js

@@ -150,6 +150,9 @@ function prepareChartProperties(chartType)
 	case "bar_y":
 	chartProperties=prepareBarYForm();
 	break;
+	case "area_y":
+	chartProperties=prepareBarYForm();
+	break;
 	case "line":
 	chartProperties=prepareLineForm();
 	break;
@@ -224,6 +227,10 @@ if(formDivElem.style.display=="none")
 	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++)
@@ -639,7 +646,9 @@ case "bar_x":
 	case "bar_y":
 		makeBarY(selectionRs);
         break;
-	
+	case "area_y":
+		makeAreaY(selectionRs);
+	break;
 	case "line":
 		makeLine(selectionRs);
 		break;
@@ -848,6 +857,20 @@ function makeBarY(selectionRs) {
 
 	var options= getChartOptions(categoryDim,measureDim,marksArray,true);
 	
+	document.getElementById("chartDiv").appendChild(Plot.plot(options));
+	}
+function makeAreaY(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
+    		        });
+
+	var options= getChartOptions(categoryDim,measureDim,marksArray,true);
+	
 	document.getElementById("chartDiv").appendChild(Plot.plot(options));
 	}
 function makeLine(selectionRs) {
@@ -1014,6 +1037,12 @@ function applyFunction(theValue,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;
@@ -1042,6 +1071,39 @@ function switchWord1and2ff(theString)
 	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;

superx/xml/viz_html_chart.xsl

@@ -1537,19 +1537,31 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 
 <div id="selectionResultPreview" class="section">
 
-  
+  <!--
 	<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');"><!--is-focused-->
+	  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">
 </div>
 
@@ -1566,11 +1578,13 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
     <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="area_y">Flächendiagramm vertikal (einfach)</option>
     <option class="maskinput" value="line">Liniendiagramm vertikal (einfach)</option>
 </select>
 </td>
 </tr>
 </table>
+<hr />
  <div class="field is-grouped">
 	  <div class="label-container">
 	     <label class="label is-required is-small"><strong>Erweiterte Layouteigenschaften</strong></label>
@@ -1590,22 +1604,34 @@ 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"><strong>Diagramm-Vorschau</strong></label>
 	  </div> 
        	  <span class="separator"> </span> 
-	  <a  onClick="createChart();" ><!--is-focused-->
+	  <a  onClick="createChart();" >
 		<span class="icon is-small"><i class="../images/more.svg"></i>
 			<img src="../images/more.svg" title="Laden" />
 		</span>
 	   </a>
        </div>
+-->
 
 </form>
 </div>
 
-
+<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" 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">