@ -142,27 +142,7 @@ function showChartPropertiesForm()
function prepareChartProperties ( chartType ) function prepareChartProperties ( chartType )
{ {
var chartProperties = [ ] ; var chartProperties = [ ] ;
//var chartWidth=getCommonChartProperty("chartWidth");
chartProperties = prepareForm ( chartType , vizTypeProperties ) ;
//document.forms["chartPropertiesForm"].elements["chartWidth"].value=chartWidth;
switch ( chartType ) {
case "bar_x" :
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 ( ) ;
break ;
default :
return false ;
break ;
}
renderForm ( "chartPropertiesForm" , chartProperties , commonChartProperties ) ; renderForm ( "chartPropertiesForm" , chartProperties , commonChartProperties ) ;
renderFormDetails ( "chartPropertiesFormDetails" , commonChartProperties ) ; renderFormDetails ( "chartPropertiesFormDetails" , commonChartProperties ) ;
@ -307,7 +287,8 @@ function fillSelectionResultMetaData()
if ( dimension2 != "" ) if ( dimension2 != "" )
{ {
counter ++ ; counter ++ ;
selectionRsMetaData . push ( new selectionRowMetaData ( counter , "dimension2" , dimension2 , getColumnCaption ( dimension2 ) , 0 ) , functionOfDimension2 ) ; var dim2 = new selectionRowMetaData ( counter , "dimension2" , dimension2 , getColumnCaption ( dimension2 ) , 0 , functionOfDimension2 ) ;
selectionRsMetaData . push ( dim2 ) ;
} }
counter ++ ; counter ++ ;
selectionRsMetaData . push ( new selectionRowMetaData ( counter , "measure" , measure , getColumnCaption ( measure ) , 0 ) , functionOfMeasureDim ) ; selectionRsMetaData . push ( new selectionRowMetaData ( counter , "measure" , measure , getColumnCaption ( measure ) , 0 ) , functionOfMeasureDim ) ;
@ -520,7 +501,9 @@ var previousGroup="";
for ( var k = 0 ; k < myCommonChartProperties . length ; k ++ ) for ( var k = 0 ; k < myCommonChartProperties . length ; k ++ )
{ {
var groupUniquename = myCommonChartProperties [ k ] . groupUniquename ; var groupUniquename = myCommonChartProperties [ k ] . groupUniquename ;
if ( groupUniquename != "" && groupUniquename != previousGroup ) if ( groupUniquename != ""
&& groupUniquename != previousGroup
&& myCommonChartProperties [ k ] . groupVariableName != "" )
{ {
var newcommonChartPropertyGroup = new commonChartPropertyGroup ( myCommonChartProperties [ k ] . groupCaption , groupUniquename , "" ) ; var newcommonChartPropertyGroup = new commonChartPropertyGroup ( myCommonChartProperties [ k ] . groupCaption , groupUniquename , "" ) ;
commonChartPropertyGroups . push ( newcommonChartPropertyGroup ) ; commonChartPropertyGroups . push ( newcommonChartPropertyGroup ) ;
@ -657,7 +640,7 @@ function renderChartPropertyField(commonChartProperty)
default : default :
//Einfaches Texteingabefeld:
//Einfaches Texteingabefeld:
const inpElem = document . createElement ( "input" ) ; const inpElem = document . createElement ( "input" ) ;
inpElem . type = ; inpElem . type = ( commonChartProperty . propValueType == "integer" ) ? "NUMBER" : ;
inpElem . size = 5 ; inpElem . size = 5 ;
if ( commonChartProperty . variableName == "" ) if ( commonChartProperty . variableName == "" )
{ {
@ -882,6 +865,7 @@ var chartWidth=getCommonChartProperty("chartWidth");
var fontSize = getCommonChartProperty ( "fontSize" ) ; var fontSize = getCommonChartProperty ( "fontSize" ) ;
//svg,data
//svg,data
document . getElementById ( chartDivElem ) . innerHTML = "" ; //reset canvas
document . getElementById ( chartDivElem ) . innerHTML = "" ; //reset canvas
/ *
var svg = d3 . select ( "#" + chartDivElem ) . append ( "svg" ) var svg = d3 . select ( "#" + chartDivElem ) . append ( "svg" )
. attr ( "width" , chartWidth ) //maxBarWidth + barLabelWidth + valueLabelWidth)
. attr ( "width" , chartWidth ) //maxBarWidth + barLabelWidth + valueLabelWidth)
//.attr("height", y.range()[1])
//.attr("height", y.range()[1])
@ -891,7 +875,7 @@ var svg = d3.select("#"+chartDivElem).append("svg")
. attr ( "id" , "chartSVG" ) . attr ( "id" , "chartSVG" )
; ;
svg . width = 50 ; svg . width = 50 ;
* /
switch ( chartType ) switch ( chartType )
{ {
case "sample" : case "sample" :
@ -900,6 +884,9 @@ case "sample":
case "bar_x" : case "bar_x" :
makeBarX ( chartDivElem , selectionRs ) ; makeBarX ( chartDivElem , selectionRs ) ;
break ; break ;
case "bar_x_stacked" :
makeBarXStacked ( chartDivElem , selectionRs ) ;
break ;
case "bar_x_alt" : case "bar_x_alt" :
makeBarX ( svg , data ) ; makeBarX ( svg , data ) ;
break ; break ;
@ -1028,11 +1015,12 @@ function makeSample()
) . plot ( ) ) ; ) . plot ( ) ) ;
} }
function getChartOptions ( categoryDim , measureDim , marksArray , chartOrientationVertical ) function getChartOptions ( categoryDim1 , categoryDim2 , measureDim , marksArray , chartOrientationVertical )
{ {
var options ; var options ;
var categoryDim = document . getElementById ( "viz_dimension1" ) . value ; //var categoryDim1=document.getElementById("viz_dimension1").value;
var measureDim = document . getElementById ( "viz_measure1" ) . value ; //var categoryDim2=document.getElementById("viz_dimension2").value;
//var measureDim=document.getElementById("viz_measure1").value;
var chartWidth = getCommonChartProperty ( "width" ) ; var chartWidth = getCommonChartProperty ( "width" ) ;
var marginLeftValue = chartWidth / 5 ; //Default 20% linker Rand
var marginLeftValue = chartWidth / 5 ; //Default 20% linker Rand
//if(getCommonChartProperty("marginLeft")!="")
//if(getCommonChartProperty("marginLeft")!="")
@ -1043,7 +1031,8 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
var myBgColor = getCommonChartProperty ( "background-color" ) ; var myBgColor = getCommonChartProperty ( "background-color" ) ;
var myColor = getCommonChartProperty ( "color" ) ; var myColor = getCommonChartProperty ( "color" ) ;
var marginBottomValue = 100 ; //getCommonChartProperty("marginBottom");;
var marginBottomValue = 100 ; //getCommonChartProperty("marginBottom");;
var categoryLabel = getColumnCaption ( categoryDim ) ; var categoryLabel1 = getColumnCaption ( categoryDim1 ) ;
var categoryLabel2 = getColumnCaption ( categoryDim2 ) ;
var measureLabel = getColumnCaption ( measureDim ) ; var measureLabel = getColumnCaption ( measureDim ) ;
var optionsString = "{\"dummy\":1" ; var optionsString = "{\"dummy\":1" ;
@ -1062,6 +1051,7 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
previousGroup = groupVariableName ; previousGroup = groupVariableName ;
} }
//Now create options Str with all groups:
//Now create options Str with all groups:
var textDelim = "" ;
for ( var i = 0 ; i < commonChartPropertyGroups . length ; i ++ ) for ( var i = 0 ; i < commonChartPropertyGroups . length ; i ++ )
{ {
if ( commonChartPropertyGroups [ i ] . groupVariableName != "layout" ) if ( commonChartPropertyGroups [ i ] . groupVariableName != "layout" )
@ -1072,13 +1062,14 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
&& commonChartProperties [ k ] . variableName != "" && commonChartProperties [ k ] . variableName != ""
&& getCommonChartProperty ( commonChartProperties [ k ] . name ) != "" ) && getCommonChartProperty ( commonChartProperties [ k ] . name ) != "" )
{ {
optionsString += ",\"" + 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" ) if ( commonChartPropertyGroups [ i ] . groupVariableName != "layout" )
optionsString += " }" ; //close tag
optionsString += " }" ; //close tag
} }
optionsString += ; //optionsString+= ",\"y\":{\"label\":\"Semester\"}";
optionsString += ", \"marks\":[]" ; optionsString += ", \"marks\":[]" ;
//optionsString+= ", \"marks\":"+JSON.stringify(marksArray)+"";
//optionsString+= ", \"marks\":"+JSON.stringify(marksArray)+"";
optionsString += ", \"caption\":\"" + myCaption + "\"" ; optionsString += ", \"caption\":\"" + myCaption + "\"" ;
@ -1101,98 +1092,57 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
var styles = JSON . parse ( stylesString ) ; var styles = JSON . parse ( stylesString ) ;
var chartOptions = JSON . parse ( optionsString ) ; var chartOptions = JSON . parse ( optionsString ) ;
chartOptions [ "marks" ] . push ( marksArray ) ; chartOptions [ "marks" ] . push ( marksArray ) ;
/ * v a r s t y l e s = {
backgroundColor : myBgColor ,
color : myColor ,
fontFamily : myFontFamily ,
fontSize : fontSizeDefault ,
overflow : "visible"
} * /
if ( chartOrientationVertical )
{
options = {
marginLeft : marginLeftValue ,
marginBottom : marginBottomValue ,
width : chartWidth ,
x : {
tickRotate : - 45 ,
label : categoryLabel
} ,
// set y axis options
y : {
grid : true ,
label : measureLabel
} ,
marks : marksArray ,
style : styles ,
caption : myCaption
}
}
else
{
options = chartOptions ; options = chartOptions ;
/ *
options = {
marginLeft : marginLeftValue ,
marginBottom : marginBottomValue ,
width : chartWidth ,
y : {
label : categoryLabel
} ,
x : {
tickRotate : - 45 ,
grid : true ,
label : measureLabel
} ,
marks : marksArray ,
style : styles ,
caption : myCaption
}
* /
}
//document.getElementById("chartOptions").innerHTML=JSON.stringify(options);
return options ; return options ;
} }
function makeBarX ( chartDivElem , selectionRs ) { function makeBarX ( chartDivElem , selectionRs ) {
var categoryDim = document . getElementById ( "viz_dimension1" ) . value ; var categoryDim = document . getElementById ( "viz_dimension1" ) . value ;
//var categoryDim2=document.getElementById("viz_dimension2").value;
var measureDim = document . getElementById ( "viz_measure1" ) . value ; var measureDim = document . getElementById ( "viz_measure1" ) . value ;
var fillDim = document . getElementById ( "fill" ) . value ; var fillval = document . getElementById ( "fill" ) . value ;
var marksArray = new Array ( ) ; var marksArray = new Array ( ) ;
if ( fillDim == "" )
marksArray [ 0 ] = Plot . barX ( selectionRs , marksArray [ 0 ] = Plot . barX ( selectionRs ,
Plot . sort ( "rownr" ,
{ {
x : measureDim ,
x : measureDim ,
y : categoryDim , y : categoryDim ,
fill : fillval
fill : "blue" }
} )
) ; ) ;
else
var options = getChartOptions ( categoryDim , "" , measureDim , marksArray , false ) ;
console . log ( "Options:" + JSON . stringify ( options ) ) ;
var svgPlot = Plot . plot ( options ) ;
document . getElementById ( chartDivElem ) . appendChild ( svgPlot ) ;
}
function makeBarXStacked ( chartDivElem , selectionRs ) {
var categoryDim1 = document . getElementById ( "y_horizontal" ) . value ;
var categoryDim2 = document . getElementById ( "stroke_bar" ) . value ;
var measureDim = document . getElementById ( "x_horizontal" ) . value ;
var textDim = document . getElementById ( "text_horizontal" ) . value ;
//var fillDim=document.getElementById("fill").value;
var marksArray = new Array ( ) ;
marksArray [ 0 ] = Plot . barX ( selectionRs , marksArray [ 0 ] = Plot . barX ( selectionRs ,
{ {
x : measureDim ,
x : measureDim ,
y : categoryDim , y : categoryDim1 ,
//sort: {y: "rownr"},
stroke : categoryDim2 ,
fill : fillDim fill : categoryDim2
} )
;
marksArray [ 1 ] = Plot . ruleX ( [ 0 ] ) ;
if ( textDim != "" )
marksArray [ 2 ] = Plot . text ( selectionRs ,
{
x : measureDim ,
y : categoryDim1 ,
text : textDim
} ) } )
; ;
var options = getChartOptions ( categoryDim , measureDim , marksArray , false ) ; var options = getChartOptions ( categoryDim1 , categoryDim2 , measureDim , marksArray , false ) ;
/ * v a r s v g P l o t = P l o t . p l o t ( {
y : {
domain : d3 . sort ( selectionRs , d => - d . rownr ) . map ( d => d . dimension1Value )
} ,
x : {
grid : true
} ,
marks : [
Plot . barX ( selectionRs , { x : measureDim , y : categoryDim } )
]
} ) ; * /
console . log ( "Options:" + JSON . stringify ( options ) ) ; console . log ( "Options:" + JSON . stringify ( options ) ) ;
var svgPlot = Plot . plot ( options ) ; var svgPlot = Plot . plot ( options ) ;
document . getElementById ( chartDivElem ) . appendChild ( svgPlot ) ; document . getElementById ( chartDivElem ) . appendChild ( svgPlot ) ;
@ -1206,8 +1156,9 @@ function makeBarY(chartDivElem,selectionRs) {
y : measureDim ,
y : measureDim ,
x : categoryDim x : categoryDim
} ) ; } ) ;
marksArray [ 1 ] = Plot . ruleY ( [ 0 ] ) ;
var options = getChartOptions ( categoryDim , measureDim , marksArray , true ) ; var options = getChartOptions ( categoryDim , "" , measureDim , marksArray , true ) ;
document . getElementById ( chartDivElem ) . appendChild ( Plot . plot ( options ) ) ; document . getElementById ( chartDivElem ) . appendChild ( Plot . plot ( options ) ) ;
} }
@ -1220,8 +1171,9 @@ function makeAreaY(chartDivElem,selectionRs) {
y : measureDim ,
y : measureDim ,
x : categoryDim x : categoryDim
} ) ; } ) ;
marksArray [ 1 ] = Plot . ruleY ( [ 0 ] ) ;
var options = getChartOptions ( categoryDim , measureDim , marksArray , true ) ; var options = getChartOptions ( categoryDim , "" , measureDim , marksArray , true ) ;
document . getElementById ( chartDivElem ) . appendChild ( Plot . plot ( options ) ) ; document . getElementById ( chartDivElem ) . appendChild ( Plot . plot ( options ) ) ;
} }
@ -1234,8 +1186,10 @@ function makeDot(chartDivElem,selectionRs) {
y : measureDim ,
y : measureDim ,
x : categoryDim x : categoryDim
} ) ; } ) ;
marksArray [ 1 ] = Plot . ruleY ( [ 0 ] ) ;
marksArray [ 2 ] = Plot . ruleX ( [ 0 ] ) ;
var options = getChartOptions ( categoryDim , measureDim , marksArray , true ) ; var options = getChartOptions ( categoryDim , "" , measureDim , marksArray , true ) ;
document . getElementById ( chartDivElem ) . appendChild ( Plot . plot ( options ) ) ; document . getElementById ( chartDivElem ) . appendChild ( Plot . plot ( options ) ) ;
} }
@ -1256,7 +1210,7 @@ function makeLine(chartDivElem,selectionRs) {
} ) ; } ) ;
marksArray [ 2 ] = Plot . ruleY ( [ 0 ] ) ; marksArray [ 2 ] = Plot . ruleY ( [ 0 ] ) ;
var options = getChartOptions ( categoryDim , measureDim , marksArray , true ) ; var options = getChartOptions ( categoryDim , "" , measureDim , marksArray , true ) ;
document . getElementById ( chartDivElem ) . appendChild ( Plot . plot ( options ) ) ; document . getElementById ( chartDivElem ) . appendChild ( Plot . plot ( options ) ) ;
} }
