/* 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.version="0.2b"; this.id=id; this.name=name; this.renderer=renderer; this.dataSources=datasources; //this.globalProperties=globalproperties; this.targetDiv=""; //only for d3 this.chartElements=new Array(); this.chartPropertiesUsed=new Array(); //let globalProperties={}; /*this.getChartSVG = function () { //console.log(JSON.stringify(this)); var mySVG=""; switch (this.renderer) { case "plot": mySVG=this.getChartSVGWithPlot(); break; case "d3js": mySVG=this.getChartSVGWithD3(); break; case "d3jsv3": mySVG=this.getChartSVGWithD3V3(); break; default: alert("No renderer"); break; } return mySVG; } this.renderChartSVG = function () { //console.log(JSON.stringify(this)); var mySVG=""; switch (this.renderer) { case "plot": mySVG=this.getChartSVGWithPlot(); break; case "d3js": mySVG=this.getChartSVGWithD3(); break; case "d3jsv3": this.renderChartSVGWithD3V3(); break; default: alert("No renderer"); break; } return true; } this.getChartSVGWithPlot=function () { console.log("using Plot"); var myOptions=new Object; //myOptions.marks=new Array(); //myOptions.sort=new Array(); myOptions=getPlotOptionsObj(this.chartPropertiesUsed); var marksArray=new Array(); //first empty marks: for(var k=0;k< myOptions["marks"].length;k++) { myOptions["marks"][k].pop(); } //copy ChartElements to marks: for(var k=0;k< this.chartElements.length;k++) { marksArray[k]=renderChartElementWithPlot(this.chartElements[k]); } myOptions["marks"].push(marksArray); var svgPlot=Plot.plot(myOptions); return svgPlot; } this.getChartSVGWithD3=function () { console.log("using D3JS"); var svgD3=new Object; for(var k=0;k< this.chartElements.length;k++) { svgD3=renderChartElementWithD3(this.chartElements[k]); } return svgD3; } this.renderChartSVGWithD3V3=function () { console.log("using D3JS_v3"); var svgD3=new Object; for(var k=0;k< this.chartElements.length;k++) { svgD3=renderChartElementWithD3V3(this.chartElements[k],this.targetDiv); } return svgD3; } */ } 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 usedVizProperty(name,vizPropertyVariablename,propertyValue ) { this.name=name; this.vizPropertyVariablename=vizPropertyVariablename; this.propertyValue=propertyValue; } function usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue ) { this.nr=nr; this.vizTypePropertyUniquename=vizTypePropertyUniquename; this.caption=caption; this.propertyValue=propertyValue; } function d3dataRow(nr,dimension1,dimension2,measure1 ) { this.nr=nr; this.dimension1=dimension1; this.dimension2=dimension2; this.measure1=measure1; } 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=false; 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; } } /* Render Model:*/ function renderChartSVGFromModel(currentChartModel,targetDiv) { switch (currentChartModel.renderer) { case "plot": renderChartSVGWithPlot(currentChartModel,targetDiv); break; case "d3js": renderChartSVGWithD3(currentChartModel,targetDiv); break; case "d3jsv3": renderChartSVGWithD3V3(currentChartModel,targetDiv); break; default: alert("No renderer"); break; } return true; } function renderChartSVGWithPlot (currentChartModel,targetDiv) { console.log("using Plot"); var myOptions=new Object; //myOptions.marks=new Array(); //myOptions.sort=new Array(); myOptions=getPlotOptionsObj(currentChartModel.chartPropertiesUsed); var marksArray=new Array(); /*for(var k=0;k< myChartModel.chartPropertiesUsed.length;k++) { }*/ //first empty marks: for(var k=0;k< myOptions["marks"].length;k++) { myOptions["marks"][k].pop(); } //copy ChartElements to marks: for(var k=0;k< currentChartModel.chartElements.length;k++) { marksArray[k]=renderChartElementWithPlot(currentChartModel.chartElements[k]); /*Plot.barX(rs_table0, { x: "gesamt", y: "eintrag", fill: "blue" } */ } myOptions["marks"].push(marksArray); var svgPlot=Plot.plot(myOptions); document.getElementById(targetDiv).innerHTML=""; document.getElementById(targetDiv).appendChild(svgPlot); //return svgPlot; } function renderChartSVGWithD3 (currentChartModel,targetDiv) { console.log("using D3JS"); var svgD3=new Object; for(var k=0;k< currentChartModel.chartElements.length;k++) { svgD3=renderChartElementWithD3(currentChartModel.chartElements[k],targetDiv); } //document.getElementById(targetDiv).innerHTML=""; //document.getElementById(targetDiv).appendChild(svgD3); } function renderChartSVGWithD3V3 (currentChartModel,targetDiv) { console.log("using D3JS_v3"); var svgD3=new Object; for(var k=0;k< currentChartModel.chartElements.length;k++) { svgD3=renderChartElementWithD3V3(currentChartModel.chartElements[k],targetDiv); } return svgD3; } /*Transfer form to model: */ function updateChartModel() { var myChartPropertiesUsed=new Array(); //first empty properties: /*for(var k=0;k< myChartModel.chartPropertiesUsed.length;k++) { myChartModel.chartPropertiesUsed[k].pop(); }*/ 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; var myCaption=new usedVizProperty("caption","caption",chartName); myChartPropertiesUsed.push(myCaption); //var myForm=document.forms["chartPropertiesForm"]; for(var k=0;k < commonChartProperties.length;k++) { if(getCommonChartProperty(commonChartProperties[k].name)!="") { var myProp=new usedVizProperty(commonChartProperties[k].name,commonChartProperties[k].variableName,getCommonChartProperty(commonChartProperties[k].name)); myChartPropertiesUsed.push(myProp); } } //first Collect all groups: myChartModel.chartPropertiesUsed=myChartPropertiesUsed; //Update the source Code TEXTAREA: updateChartModelCode(myChartModel); return myChartModel; } function getPlotOptionsObj(chartPropertiesUsed) { var commonChartPropertyGroups=[]; var previousGroup=""; var optionsString="{"; optionsString+="\"caption\":\""+getChartPropertyValue(chartPropertiesUsed,"caption")+"\""; 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!="" && getChartPropertyValue(chartPropertiesUsed,commonChartProperties[k].name)!="") { textDelim=(commonChartProperties[k].propValueType=="string")?"\"":""; optionsString+=",\""+commonChartProperties[k].variableName+"\":"+textDelim+getChartPropertyValue(chartPropertiesUsed,commonChartProperties[k].name)+textDelim; } } if(commonChartPropertyGroups[i].groupVariableName!="layout") optionsString+=" }"; //close tag } optionsString+= ", \"marks\":[]"; optionsString+=" }"; //close tag var chartOptions=JSON.parse(optionsString); return chartOptions; } function renderChart(chartDiv,currentChartModel) { /*if(document.getElementById("chartName").value=="") document.getElementById("chartName").value=vizInitialName;*/ if(currentChartModel.chartElements.length>0 && currentChartModel.chartElements[0]) { renderChartSVGFromModel(currentChartModel,chartDiv); } else document.getElementById(chartDiv).innerHTML=""+ ""; // } 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 Grafikelements"); const textnodeVizType = document.createTextNode("Grafikelement-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),false); 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.classList.add("button"); saveBtn.classList.add("is-small"); 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); //Reset Elements Form elemID++; document.getElementById("chartElementID").value=elemID; document.getElementById("chartElementVizType").value=""; var formChartElementConfig2Div=document.getElementById("ChartElementConfig2Div"); while (formChartElementConfig2Div.firstChild) { formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild); } document.getElementById("vizElementCounter").value=myChartModel.chartElements.length; renderChart('chartDiv',myChartModel); /*var marksArray=new Array(); marksArray[elemID]=Plot.barX(rs_table0, { x: "gesamt", y: "eintrag", fill: "blue" } ); chartOptions["marks"].push(marksArray);*/ } function removeChartElementConfig() { var propertyCounter=myChartModel.chartElements.length; if(propertyCounter>0) { var elemID=myChartModel.chartElements[propertyCounter-1].nr; /*var filtered=myChartModel.chartElements.filter(obj => obj.nr !== propertyCounter-1); myChartModel.chartElements=filtered;*/ myChartModel.chartElements.pop(); elemID--; if(document.getElementById("chartElementID")) document.getElementById("chartElementID").value=elemID; document.getElementById("vizElementCounter").value=myChartModel.chartElements.length; renderChart('chartDiv',myChartModel); } } function resetChartPropertiesForm() { myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData); renderChart('chartDiv',myChartModel); return true; } function getPossibleVizTypes(renderer) { var possibleVizTypes=new Array(); for(var k=0;k < vizTypes.length;k++) { if(vizTypes[k].rendererUniquename==renderer) { var newVizType = new possibleVizType( //nr,value,name,explanation,isDefault k,vizTypes[k].uniquename,vizTypes[k].caption,'',false); possibleVizTypes.push(newVizType); } } 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) { /*OBSOLETE*/ 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) { /* OBSOLETE*/ 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 filld3data(myRs,MyRsMetaData,chartElem) { //Identify dimensions and measures: var dimension1,dimension2,measure1; var data=[]; for(var k=0;k { for (var col in row) { console.log(col +"-"+row[col]); if(col==dimension1) dimension1Value=row[col]; if(col==dimension2) dimension2Value=row[col]; if(col==measure1) measure1Value=row[col]; } data.push(new d3dataRow(rownr,dimension1Value,dimension2Value,measure1Value)); rownr++; } ); /* 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 data; } function fillSelectionResult(selectionRsMetaData) { //OBSOLETE: var selectionRs=[]; //get MetaData: var dimension1,dimension2,measure, functionOfDimension1,functionOfDimension2,functionOfMeasureDim; for(rownr=0;rownrmaxLenDimension1) 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); } //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; } const columnDiv = document.createElement("div"); for(var i=0;i < commonChartPropertyGroups.length;i++) { const columnGroupDiv = document.createElement("div"); columnGroupDiv.id=commonChartPropertyGroups[i].groupUniquename; columnGroupDiv.classList.add("box"); const columnGroupHeaderDiv = document.createElement("div"); const colHeader = document.createTextNode(commonChartPropertyGroups[i].caption); const colHeaderBold = document.createElement("strong"); colHeaderBold.appendChild(colHeader); const colHeaderParagraph = document.createElement("label"); colHeaderParagraph.classList.add("label"); colHeaderParagraph.classList.add("is-small"); colHeaderParagraph.appendChild(colHeaderBold); //Toggle visibility: const colHeaderToggleBtn = document.createElement("a"); colHeaderToggleBtn.id="openBody"+commonChartPropertyGroups[i].groupUniquename; //colHeaderToggleBtn.classList.add("is-small"); colHeaderToggleBtn.onclick =function() {             toggleGroupBodyDiv(this.id)         } const colHeaderToggleBtnText = document.createTextNode(" ..."); colHeaderToggleBtn.appendChild(colHeaderToggleBtnText); colHeaderParagraph.appendChild(colHeaderToggleBtn); columnGroupHeaderDiv.appendChild(colHeaderParagraph); //columnGroupHeaderDiv.appendChild(colHeaderToggleBtn); columnGroupDiv.appendChild(columnGroupHeaderDiv); const columnGroupBodyDiv = document.createElement("div"); columnGroupBodyDiv.id="Body"+commonChartPropertyGroups[i].groupUniquename; columnGroupBodyDiv.style.display="none"; for(var k=0;k < myCommonChartProperties.length;k++) { if(myCommonChartProperties[k].groupUniquename==commonChartPropertyGroups[i].groupUniquename && myCommonChartProperties[k].variableName!="") columnGroupBodyDiv.appendChild(renderChartPropertyField(myCommonChartProperties[k])); } columnGroupDiv.appendChild(columnGroupBodyDiv); columnDiv.appendChild(columnGroupDiv); } myForm.appendChild(columnDiv); /*alte Liste flach: const divBox = document.createElement("div"); for(var k=0;k < myCommonChartProperties.length;k++) { if((myCommonChartProperties[k].groupVariableName=="layout" || myCommonChartProperties[k].groupVariableName=="style" || myCommonChartProperties[k].groupVariableName=="x" || myCommonChartProperties[k].groupVariableName=="y" || myCommonChartProperties[k].groupVariableName=="color" ) && myCommonChartProperties[k].rendererUniquename==renderer) divBox.appendChild(renderChartPropertyField(myCommonChartProperties[k])); } myForm.appendChild(divBox); */ } function toggleGroupBodyDiv(groupBodyDiv) { var bodyDiv=groupBodyDiv.substr(4); //remove "open" Prefix var myDiv=document.getElementById(bodyDiv); if(myDiv.style.display=="block") myDiv.style.display="none"; else myDiv.style.display="block"; } function renderFormDetails(formDiv,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 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) { //Wenn im chartModel schon ein Wert vorhanden ist, wird er vorbelegt: if(commonChartProperty) var propValue=""; if(myChartModel && myChartModel.chartPropertiesUsed.length>0) { propValue=getChartModelChartPropertyUsed(myChartModel.chartPropertiesUsed,commonChartProperty.name ); } 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); selElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; 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= (propValue=="")?commonChartProperty.defaultValue:propValue; 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= (propValue=="")?commonChartProperty.defaultValue:propValue; 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= (propValue=="")?commonChartProperty.defaultValue:propValue; inpElem.onchange= function () { updateChartModel(); renderChart('chartDiv',myChartModel); }; inputElem.appendChild(inpElem); inputParaElem.appendChild(inputElem); break; } inputFieldElem.appendChild(inputParaElem); fieldElem.appendChild(inputFieldElem); return fieldElem; } function getChartModelChartPropertyUsed(myChartPropertiesUsed,commonChartPropertyName) { var propValue=""; for(var k=0;k < myChartPropertiesUsed.length;k++) { if(myChartPropertiesUsed[k].name==commonChartPropertyName) propValue=myChartPropertiesUsed[k].propertyValue; } return propValue; } 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; selectedOption=optionCounter; 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;jmaxLenName) 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); //Variablennamen in Subheader const rowElemSubHeader = document.createElement("tr"); const tdCap = document.createElement("td"); tdCap.style="font-family:monospace;font-size:smaller"; const textnodeSubHeader = document.createTextNode("(rownr)"); tdCap.appendChild(textnodeSubHeader); rowElemSubHeader.appendChild(tdCap); for(var col=0;col < metadata.length;col++) { if(metadata[col].nr) { const thCap = document.createElement("td"); thCap.style="font-family:monospace;font-size:smaller"; const textnode = document.createTextNode("("+metadata[col].colname+")"); thCap.appendChild(textnode); rowElemSubHeader.appendChild(thCap); } } tabElem.appendChild(rowElemSubHeader); for(row=0;row 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 d.measure1); var maxLenName=d3.max(data, d => d.dimension1.length); var maxLenNamePx=maxLenName*fontSize; var x = d3.scaleLinear().domain([0, d3.max(data, d => d.measure1)]).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.measure1)) //x) .attr("height", y.bandwidth() - 1) ; //value label: bar.append("text") .attr("fill", "white") .attr("x", d => x(d.measure1)/2) .attr("y", (y.bandwidth() - 1) / 2) .attr("dy", "0.35em") .attr("text-anchor","middle") .text(d => d.measure1); //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.dimension1); return bar; } 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) { /*OBSOLETE*/ 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) { //OBSOLETE 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,markOptions,myDatasourceRs) { //OBSOLETE var barXPlot=new Object; barXPlot=Plot.barX(myDatasourceRs, markOptions ); /* var categoryDim=""; var measureDim=""; var fillval=""; for(var k=0;k 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 getChartPropertyValue(propArray,propName) { var propertyValue=""; for (var i=0;i o.name === name); if(prop.defaultValue!="") { propertyValue=prop.defaultValue; } } /*for (var i=0;i0) { switch (renderer) { case "plot": var myFigure=myChartDiv.childNodes[0]; if(myFigure.childNodes.length>0) { var mySvg=myFigure.childNodes[0]; svg_xml = (new XMLSerializer).serializeToString(mySvg); } break; case "d3js": for (var i=0;i+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"; } } function makeSankeyD3(mySvg,data,metaData,chartElem) { // load the data var captionEmptyTarget="Kein Abschluss"; var sNodes=getSankeyNodes(data,captionEmptyTarget); //graph.nodes; var sLinks=getSankeyLinks(sNodes,data); //graph.links; renderSankey(mySvg,sNodes,sLinks); //var myChartSVG = SankeyChart(sNodes,sLinks); } function getSankeyNodes(data,captionEmptyTarget) { var myNodes=[]; var distinctSource = []; var zs=""; for (var i = 0; i < data.length; i++) { if(zs.indexOf("_" + data[i].dimension1 +"_")<0) { distinctSource.push(data[i].dimension1); zs+="_" + data[i].dimension1 +"_"; } } for (var i = 0; i < data.length; i++) { if(zs.indexOf("_" + data[i].dimension2 +"_")<0) { distinctSource.push(data[i].dimension2); zs+="_" + data[i].dimension2 +"_"; } } for (var i = 0; i < distinctSource.length; i++) { myNodes[i] = { "node": i, "name": distinctSource[i] }; console.log("Abschluss: "+distinctSource[i]); } //Kein Abschluss: myNodes[i] = { "node": i, "name": captionEmptyTarget }; return myNodes; } function getSankeyLinks(myNodes,data) { var myLinks=[]; var linkIndex=0; for (var i = 0; i < data.length; i++) { if(data[i].dimension2 !="") { myLinks[linkIndex]={ "source": getSankeyNodeIndex(myNodes,data[i].dimension1), "target": getSankeyNodeIndex(myNodes,data[i].dimension2), "value":data[i].measure1 }; linkIndex++; } else { myLinks[linkIndex]={ "source": getSankeyNodeIndex(myNodes,data[i].dimension1), "target": myNodes.length-1, "value":data[i].measure1 }; linkIndex++; } } return myLinks; } function getSankeyNodeIndex(myNodes,name) { var myIndex=0; for (var i = 0; i < myNodes.length; i++) { if(myNodes[i].name==name) myIndex=i } return myIndex; } function getMeasureCaption(chartElem,metaData) { var measureCaption=""; for(var k=0;k