@ -36,6 +36,7 @@ const chartModel={
* / * /
function chartModel ( id , name , renderer , datasources ) function chartModel ( id , name , renderer , datasources )
{ {
this . version = "0.2b" ;
this . id = id ; this . id = id ;
this . name = name ; this . name = name ;
this . renderer = renderer ; this . renderer = renderer ;
@ -46,7 +47,7 @@ function chartModel(id,name,renderer,datasources)
this . chartPropertiesUsed = new Array ( ) ; this . chartPropertiesUsed = new Array ( ) ;
//let globalProperties={};
//let globalProperties={};
this . getChartSVG = function ( ) { / * t h i s . g e t C h a r t S V G = f u n c t i o n ( ) {
//console.log(JSON.stringify(this));
//console.log(JSON.stringify(this));
var mySVG = "" ; var mySVG = "" ;
@ -96,9 +97,7 @@ function chartModel(id,name,renderer,datasources)
myOptions = getPlotOptionsObj ( this . chartPropertiesUsed ) ; myOptions = getPlotOptionsObj ( this . chartPropertiesUsed ) ;
var marksArray = new Array ( ) ; var marksArray = new Array ( ) ;
/ * f o r ( v a r k = 0 ; k < m y C h a r t M o d e l . c h a r t P r o p e r t i e s U s e d . l e n g t h ; k + + )
{
} * /
//first empty marks:
//first empty marks:
for ( var k = 0 ; k < myOptions [ "marks" ] . length ; k ++ ) for ( var k = 0 ; k < myOptions [ "marks" ] . length ; k ++ )
{ {
@ -108,13 +107,7 @@ function chartModel(id,name,renderer,datasources)
for ( var k = 0 ; k < this . chartElements . length ; k ++ ) for ( var k = 0 ; k < this . chartElements . length ; k ++ )
{ {
marksArray [ k ] = renderChartElementWithPlot ( this . chartElements [ k ] ) ; marksArray [ k ] = renderChartElementWithPlot ( this . chartElements [ k ] ) ;
/ * P l o t . b a r X ( r s _ t a b l e 0 ,
{
x : "gesamt" ,
y : "eintrag" ,
fill : "blue"
}
* /
} }
@ -144,6 +137,7 @@ function chartModel(id,name,renderer,datasources)
return svgD3 ; return svgD3 ;
}
}
* /
} }
@ -307,13 +301,13 @@ this.getValueResultset = function () {
/* Render Model:*/ /* Render Model:*/
function renderChartSVGFromModel ( currentChartModel , targetDiv ) { function renderChartSVGFromModel ( currentChartModel , targetDiv ) {
var mySVG = "" ;
switch ( currentChartModel . renderer ) { switch ( currentChartModel . renderer ) {
case "plot" : case "plot" :
mySVG = get ChartSVGWithPlot( currentChartModel ) ; render ChartSVGWithPlot( currentChartModel , targetDiv ) ;
break ; break ;
case "d3js" : case "d3js" :
mySVG = get ChartSVGWithD3( currentChartModel ) ; render ChartSVGWithD3( currentChartModel , targetDiv ) ;
break ; break ;
case "d3jsv3" : case "d3jsv3" :
renderChartSVGWithD3V3 ( currentChartModel , targetDiv ) ; renderChartSVGWithD3V3 ( currentChartModel , targetDiv ) ;
@ -324,6 +318,57 @@ function renderChartSVGFromModel(currentChartModel,targetDiv) {
} }
return true ; 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 ( ) ;
/ * f o r ( v a r k = 0 ; k < m y C h a r t M o d e l . c h a r t P r o p e r t i e s U s e d . l e n g t h ; 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 ] ) ;
/ * P l o t . b a r X ( r s _ t a b l e 0 ,
{
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 ) function renderChartSVGWithD3V3 ( currentChartModel , targetDiv )
{ {
console . log ( "using D3JS_v3" ) ; console . log ( "using D3JS_v3" ) ;
@ -368,31 +413,9 @@ function updateChartModel()
//first Collect all groups:
//first Collect all groups:
myChartModel . chartPropertiesUsed = myChartPropertiesUsed ; myChartModel . chartPropertiesUsed = myChartPropertiesUsed ;
/ *
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 ) ; * /
//Update the source Code TEXTAREA:
updateChartModelCode ( myChartModel ) ;
//console.log("options:"+ optionsString);
//var globalProperties=JSON.parse(optionsString);
//globalProperties["marks"].push(marksArray);
//myChartModel.options=globalProperties;
//myChartModel.options["marks"].push(marksArray);
return myChartModel ; return myChartModel ;
} }
@ -448,26 +471,11 @@ function renderChart(chartDiv,currentChartModel)
document . getElementById ( "chartName" ) . value = vizInitialName ; * / document . getElementById ( "chartName" ) . value = vizInitialName ; * /
if ( currentChartModel . chartElements . length > 0 && currentChartModel . chartElements [ 0 ] ) if ( currentChartModel . chartElements . length > 0 && currentChartModel . chartElements [ 0 ] )
{ {
if ( currentChartModel . renderer == "plot" ) renderChartSVGFromModel ( currentChartModel , chartDiv ) ;
{
var mySVG = currentChartModel . getChartSVG ( ) ;
if ( typeof mySVG === 'object' )
{
document . getElementById ( chartDiv ) . innerHTML = "" ;
document . getElementById ( chartDiv ) . appendChild ( mySVG ) ;
}
}
else
{
//d3js:
//currentChartModel.targetDiv=chartDiv;
//currentChartModel.renderChartSVG();
renderChartSVGFromModel ( currentChartModel , chartDiv ) ;
}
} }
else else
document . getElementById ( chartDiv ) . innerHTML = "<svg style=\"width:100%;height: auto;\" viewBox=\"0 0 800 600\" width=\"800\" height=\"600\"></svg>" ; document . getElementById ( chartDiv ) . innerHTML = "<svg style=\"width:100%;height: auto;\" viewBox=\"0 0 800 600\" width=\"800\" height=\"600\">" +
// "<rect x=\"0\" y=\"0\" width=\"800\" height=\"450\" fill=\"#cccccc\"></rect>" ;
"<rect x=\"0\" y=\"0\" width=\"800\" height=\"450\" fill=\"#cccccc\"></rect></svg>" ;
//
//
} }
@ -742,6 +750,7 @@ function showChartPropertiesFormDiv(formDiv,formElementsDiv,renderer)
function prepareChartProperties ( chartType ) function prepareChartProperties ( chartType )
{ {
/*OBSOLETE*/
var chartProperties = [ ] ; var chartProperties = [ ] ;
chartProperties = prepareForm ( chartType , vizTypeProperties ) ;
chartProperties = prepareForm ( chartType , vizTypeProperties ) ;
renderForm ( "chartPropertiesForm" , chartProperties , commonChartProperties ) ; renderForm ( "chartPropertiesForm" , chartProperties , commonChartProperties ) ;
@ -822,6 +831,7 @@ return chartProperties;
* / * /
function fillDataSelectionForm ( formDiv ) function fillDataSelectionForm ( formDiv )
{ {
/* OBSOLETE*/
formDivElem = document . getElementById ( formDiv ) ; formDivElem = document . getElementById ( formDiv ) ;
if ( formDivElem . style . display == "none" ) if ( formDivElem . style . display == "none" )
{ {
@ -1132,18 +1142,67 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
while ( myForm . firstChild ) { while ( myForm . firstChild ) {
myForm . removeChild ( 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 ) ;
/ * a l t e L i s t e f l a c h :
const divBox = document . createElement ( "div" ) ; const divBox = document . createElement ( "div" ) ;
//divBox.classList.add("box");
//divBox.style="width: 300px";
/ *
const colHeader = document . createTextNode ( "Layout" ) ;
const colHeaderParagraph = document . createElement ( "p" ) ;
colHeaderParagraph . classList . add ( "title" ) ;
colHeaderParagraph . classList . add ( "is-6" ) ;
colHeaderParagraph . appendChild ( colHeader ) ;
divBox . appendChild ( colHeaderParagraph ) ;
* /
for ( var k = 0 ; k < myCommonChartProperties . length ; k ++ ) for ( var k = 0 ; k < myCommonChartProperties . length ; k ++ )
{ {
if ( ( myCommonChartProperties [ k ] . groupVariableName == "layout" if ( ( myCommonChartProperties [ k ] . groupVariableName == "layout"
@ -1158,10 +1217,21 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
myForm . appendChild ( divBox ) ; 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 ) function renderFormDetails ( formDiv , myCommonChartProperties )
{ {
/*OBSOLETE*/
//first empty form:
//first empty form:
var myForm = document . getElementById ( formDiv ) ; var myForm = document . getElementById ( formDiv ) ;
while ( myForm . firstChild ) { while ( myForm . firstChild ) {
@ -1250,6 +1320,13 @@ for(var k=0;k < myCommonChartProperties.length;k++)
function renderChartPropertyField ( commonChartProperty ) 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" ) ; const fieldElem = document . createElement ( "div" ) ;
fieldElem . classList . add ( "field" ) ; fieldElem . classList . add ( "field" ) ;
fieldElem . classList . add ( "is-grouped" ) ; fieldElem . classList . add ( "is-grouped" ) ;
@ -1296,6 +1373,7 @@ function renderChartPropertyField(commonChartProperty)
renderChart ( 'chartDiv' , myChartModel ) ; renderChart ( 'chartDiv' , myChartModel ) ;
} ; } ;
fillSelectOptions ( selElem , commonChartProperty . getValueResultset ( ) , commonChartProperty . isMandatory ) ; fillSelectOptions ( selElem , commonChartProperty . getValueResultset ( ) , commonChartProperty . isMandatory ) ;
selElem . value = ( propValue == "" ) ? commonChartProperty . defaultValue : propValue ;
inputElem . appendChild ( selElem ) ; inputElem . appendChild ( selElem ) ;
inputParaElem . appendChild ( inputElem ) ; inputParaElem . appendChild ( inputElem ) ;
@ -1312,7 +1390,7 @@ function renderChartPropertyField(commonChartProperty)
} }
textAreaElem . name = commonChartProperty . name ; textAreaElem . name = commonChartProperty . name ;
textAreaElem . id = commonChartProperty . name ; textAreaElem . id = commonChartProperty . name ;
textAreaElem . value = commonChartProperty . defaultValue ; textAreaElem . value = ( propValue == "" ) ? commonChartProperty . defaultValue : prop Value ;
textAreaElem . onchange = function ( ) {
textAreaElem . onchange = function ( ) {
updateChartModel ( ) ; updateChartModel ( ) ;
renderChart ( 'chartDiv' , myChartModel ) ; renderChart ( 'chartDiv' , myChartModel ) ;
@ -1342,7 +1420,7 @@ function renderChartPropertyField(commonChartProperty)
rangeElem . name = commonChartProperty . name ; rangeElem . name = commonChartProperty . name ;
rangeElem . id = commonChartProperty . name ; rangeElem . id = commonChartProperty . name ;
rangeElem . value = commonChartProperty . defaultValue ; rangeElem . value = ( propValue == "" ) ? commonChartProperty . defaultValue : prop Value ;
rangeElem . onchange = function ( ) {
rangeElem . onchange = function ( ) {
updateChartModel ( ) ; updateChartModel ( ) ;
renderChart ( 'chartDiv' , myChartModel ) ; renderChart ( 'chartDiv' , myChartModel ) ;
@ -1366,7 +1444,7 @@ function renderChartPropertyField(commonChartProperty)
} }
inpElem . name = commonChartProperty . name ; inpElem . name = commonChartProperty . name ;
inpElem . id = commonChartProperty . name ; inpElem . id = commonChartProperty . name ;
inpElem . value = commonChartProperty . defaultValue ; inpElem . value = ( propValue == "" ) ? commonChartProperty . defaultValue : prop Value ;
inpElem . onchange = function ( ) {
inpElem . onchange = function ( ) {
updateChartModel ( ) ; updateChartModel ( ) ;
renderChart ( 'chartDiv' , myChartModel ) ; renderChart ( 'chartDiv' , myChartModel ) ;
@ -1384,6 +1462,17 @@ function renderChartPropertyField(commonChartProperty)
} }
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 ) function fillSelectOptions ( myCombo , myValues , isMandatory )
{ {
var optionCounter = 0 ; var optionCounter = 0 ;
@ -1469,6 +1558,7 @@ const thCap = document.createElement("th");
const textnode = document . createTextNode ( "Zeilennr." ) ; const textnode = document . createTextNode ( "Zeilennr." ) ;
thCap . appendChild ( textnode ) ; thCap . appendChild ( textnode ) ;
rowElem . appendChild ( thCap ) ; rowElem . appendChild ( thCap ) ;
for ( var col = 0 ; col < metadata . length ; col ++ ) for ( var col = 0 ; col < metadata . length ; col ++ )
{ {
if ( metadata [ col ] . nr ) if ( metadata [ col ] . nr )
@ -1481,6 +1571,27 @@ for(var col=0;col < metadata.length;col++)
} }
tabElem . appendChild ( rowElem ) ; 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 < rowcount ; row ++ ) for ( row = 0 ; row < rowcount ; row ++ )
{ {
if ( data [ row ] ) if ( data [ row ] )
@ -1562,23 +1673,15 @@ var myDiv=document.getElementById(chartDivElem);
myDiv . style . display = "block" ; myDiv . style . display = "block" ;
} }
function renderChartElementWithPlot ( chartElem ) function renderChartElementWithPlot ( chartElem , targetDiv )
{ {
var plotMark = new Object ;
var plotMark = new Object ;
if ( chartElem ) if ( chartElem )
{ {
var chartType = chartElem . vizTypeUniquename ; var chartType = chartElem . vizTypeUniquename ;
var myDatasourceRs = rs [ chartElem . datasource ] ; var myDatasourceRs = rs [ chartElem . datasource ] ;
var optionString = "{\"dummy\": \"1\"" ;
for ( var k = 0 ; k < chartElem . elementTypeProperties . length ; k ++ )
{
if ( chartElem . elementTypeProperties [ k ] . propertyValue != "" )
{
optionString += ",\"" + chartElem . elementTypeProperties [ k ] . vizTypePropertyUniquename + "\":\"" + chartElem . elementTypeProperties [ k ] . propertyValue + "\"" ;
}
} var optionString = prepareChartPropertiesForPlotMark ( chartType , chartElem ) ;
optionString += " }" ;
console . log ( "Mark-option for " + chartType + ":" + optionString ) ; console . log ( "Mark-option for " + chartType + ":" + optionString ) ;
var markOptions = JSON . parse ( optionString ) ;
var markOptions = JSON . parse ( optionString ) ;
@ -1624,10 +1727,58 @@ switch (chartType)
} }
return plotMark ; return plotMark ;
} }
function prepareChartPropertiesForPlotMark ( chartType , chartElem )
{
var orientation = getVizTypeOrientation ( chartElem . vizTypeUniquename ) ;
var optionString = "{\"dummy\": \"1\"" ;
for ( var k = 0 ; k < chartElem . elementTypeProperties . length ; k ++ )
{
var propUniquename = chartElem . elementTypeProperties [ k ] . vizTypePropertyUniquename ;
var propValue = chartElem . elementTypeProperties [ k ] . propertyValue ;
if ( propValue != "" )
{
optionString += ",\"" + propUniquename + "\":\"" + propValue + "\"" ;
if ( propUniquename == "stroke" && chartType != "line" )
{
//Seriendimension hat immer fill
optionString += ",\"fill\":\"" + propValue + "\"" ;
//optionString+=",\"sort\":\""+propValue+"\"";
}
if ( propUniquename == "text" )
{
//Wertelabel
optionString += ",\"textAnchor\":\"start\"" ;
}
function renderChartElementWithD3 ( chartElem ) if ( propUniquename == "x" && orientation == "V" )
{
//Vertikale Diagramme sortieren immer nach X-Achse
optionString += ",\"sort\":\"" + propValue + "\"" ;
}
if ( propUniquename == "y" && orientation == "H" )
{
//Horizontale Diagramme sortieren immer nach Y-Achse
optionString += ",\"sort\":\"" + propValue + "\"" ;
}
}
}
optionString += " }" ;
return optionString ;
}
function getVizTypeOrientation ( vizTypeUniquename )
{
var orientation = "" ;
for ( var k = 0 ; k < vizTypes . length ; k ++ )
{
if ( vizTypes [ k ] . uniquename == vizTypeUniquename )
orientation = vizTypes [ k ] . orientation ;
}
return orientation ;
}
function renderChartElementWithD3 ( chartElem , targetDiv )
{ {
var mySvg = d3 . select ( "#chartDiv" ) . selectAll ( "svg" ) ; //.append("svg");
var mySvg = d3 . select ( "#" + targetDiv ) . selectAll ( "svg" ) ; //.append("svg");
if ( chartElem ) if ( chartElem )
{ {
var chartType = chartElem . vizTypeUniquename ; var chartType = chartElem . vizTypeUniquename ;
@ -1637,14 +1788,14 @@ console.log("Mark-option for "+chartType);
switch ( chartType ) switch ( chartType )
{ {
case "bar_x_d3" : case "bar_x_d3" :
makeBarX _d3 ( mySvg , data , chartElem ) ; mySvg = m akeBarX _d3 ( mySvg , data , chartElem ) ;
break ; break ;
default : default :
alert ( "Unknown chart type" ) ; alert ( "Unknown chart type" ) ;
break ; break ;
} }
} }
//return mySvg;
return mySvg ;
} }
function renderChartElementWithD3V3 ( chartElem , targetDiv ) function renderChartElementWithD3V3 ( chartElem , targetDiv )
{ {
@ -1783,7 +1934,8 @@ function makeBarX_d3(svg,data,chartElem)
. attr ( "dy" , "0.35em" ) . attr ( "dy" , "0.35em" )
. attr ( "text-anchor" , "end" ) . attr ( "text-anchor" , "end" )
. text ( d => d . dimension1 ) ; . text ( d => d . dimension1 ) ;
//return bar;
return bar ;
} }
function makeLine _alt ( svg , data ) { function makeLine _alt ( svg , data ) {
@ -1842,7 +1994,7 @@ function makeSample()
} }
function getChartOptions ( categoryDim1 , categoryDim2 , measureDim , marksArray , chartOrientationVertical ) function getChartOptions ( categoryDim1 , categoryDim2 , measureDim , marksArray , chartOrientationVertical )
{ {
/*OBSOLETE*/
var options ; var options ;
//var categoryDim1=document.getElementById("viz_dimension1").value;
//var categoryDim1=document.getElementById("viz_dimension1").value;
//var categoryDim2=document.getElementById("viz_dimension2").value;
//var categoryDim2=document.getElementById("viz_dimension2").value;
@ -2237,25 +2389,50 @@ else
function showChartModelCode ( ) function showChartModelCode ( )
{ {
var myCodeDiv = document . getElementById ( "chartModelSrcCode" ) ;
var mySrcDiv = document . getElementById ( "chartModelsrc" ) ; var mySrcDiv = document . getElementById ( "chartModelsrc" ) ;
if ( mySrcDiv . style . display == "block" ) if ( mySrcDiv . style . display == "block" )
mySrcDiv . style . display = "none" ; mySrcDiv . style . display = "none" ;
else else
mySrcDiv . style . display = "block" ; mySrcDiv . style . display = "block" ;
var myJson = "" ; updateChartModelCode ( myChartModel ) ;
}
function updateChartModelCode ( myChartModel )
{
var myCodeDiv = document . getElementById ( "chartModelSrcCode" ) ;
var myJson = "" ;
if ( myChartModel ) if ( myChartModel )
{ {
myJson = JSON . stringify ( myChartModel ) ; myJson = JSON . stringify ( myChartModel ) ;
myCodeDiv . innerHTML = myJson ; myCodeDiv . innerHTML = myJson ;
myCodeDiv . value = myJson ;
} }
else else
{ {
myCodeDiv . innerHTML = "Kein Quellcode gefunden" ; myCodeDiv . innerHTML = "Kein Quellcode gefunden" ;
} }
}
function loadChartModelCode ( chartModelSrcCodeTextarea , chartDiv )
{
var mySrc = document . getElementById ( chartModelSrcCodeTextarea ) ;
var myJsonString = mySrc . value ;
if ( myJsonString != "" )
{
myChartModel = JSON . parse ( myJsonString ) ;
if ( myChartModel )
{
document . getElementById ( "vizElementCounter" ) . value = myChartModel . chartElements . length ;
renderChart ( chartDiv , myChartModel )
}
}
} }
function copySrcCode ( mydiv ) function copySrcCode ( mydiv )
