Browse Source

Dynamische Elemente und Resultsets #5

makro_datasrc
Daniel Quathamer 2 years ago
parent
commit
8d3f90a66e
  1. 192
      superx/xml/js/viz/viz_functions.js
  2. 29
      superx/xml/viz_html_chart.xsl

192
superx/xml/js/viz/viz_functions.js

@ -41,6 +41,7 @@ function chartModel(id,name,renderer,datasources)
this.renderer=renderer; this.renderer=renderer;
this.dataSources=datasources; this.dataSources=datasources;
//this.globalProperties=globalproperties; //this.globalProperties=globalproperties;
this.chartElements=new Array();
this.options=new Object; this.options=new Object;
this.options.marks=new Array(); this.options.marks=new Array();
//let globalProperties={}; //let globalProperties={};
@ -63,7 +64,22 @@ function chartModel(id,name,renderer,datasources)
this.getChartSVGWithPlot=function () this.getChartSVGWithPlot=function ()
{ {
console.log("using Plot"); console.log("using Plot");
//copy ChartElements to marks:
var marksArray=new Array();
for(var k=0;k< this.chartElements.length;k++)
{
marksArray[k]=renderChartElementWithPlot(this.chartElements[k]);
/*Plot.barX(rs_table0,
{
x: "gesamt",
y: "eintrag",
fill: "blue"
}
*/
}
this.options["marks"].push(marksArray);
var svgPlot=Plot.plot(this.options); var svgPlot=Plot.plot(this.options);
return svgPlot; return svgPlot;
} }
@ -83,6 +99,24 @@ 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 usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue )
{
this.nr=nr;
this.vizTypePropertyUniquename=vizTypePropertyUniquename;
this.caption=caption;
this.propertyValue=propertyValue;
}
function d3dataRow(nr,dimension1,dimension2,measure ) function d3dataRow(nr,dimension1,dimension2,measure )
{ {
this.nr=nr; this.nr=nr;
@ -135,16 +169,15 @@ var optionCounter=0;
//selectionRsMetaData=fillSelectionResultMetaData(); //selectionRsMetaData=fillSelectionResultMetaData();
//console.log("felder"+selectionRsMetaData.length); //console.log("felder"+selectionRsMetaData.length);
var isDefault=true; var isDefault=true;
for(var j=0;j < rsColumnMetaData.length;j++) for(var j=0;j < rsColumnMetaData[datasource].length;j++)
{ {
if(rsColumnMetaData[j].tableId==datasource if(rsColumnMetaData[datasource][j].colcaption.trim() !=""
&& rsColumnMetaData[j].colcaption.trim() !=""
&& ( && (
isMeasure==false || rsColumnMetaData[j].coltype == 4 || rsColumnMetaData[j].coltype == 3) isMeasure==false || rsColumnMetaData[datasource][j].coltype == 4 || rsColumnMetaData[datasource][j].coltype == 3)
) )
{ {
//console.log("feld "+rsColumnMetaData[j].nr+selectionRsMetaData[j].targetColumn); //console.log("feld "+rsColumnMetaData[j].nr+selectionRsMetaData[j].targetColumn);
var o=new selectionPropertyValue(rsColumnMetaData[j].nr,rsColumnMetaData[j].colcaption,rsColumnMetaData[j].colname,isDefault); var o=new selectionPropertyValue(rsColumnMetaData[datasource][j].nr,rsColumnMetaData[datasource][j].colcaption,rsColumnMetaData[datasource][j].colname,isDefault);
valueOptions[optionCounter]=o; valueOptions[optionCounter]=o;
optionCounter++; optionCounter++;
if(isDefault) if(isDefault)
@ -203,13 +236,15 @@ this.getValueResultset = function () {
} }
} }
function updateChartModel(myChartModel) function updateChartModel()
{ {
var optionsString="{"; var optionsString="{";
if(document.getElementById("chartName").value=="") if(document.getElementById("chartName").value=="")
document.getElementById("chartName").value=vizInitialName; document.getElementById("chartName").value=vizInitialName;
var chartName=document.getElementById("chartName").value; var chartName=document.getElementById("chartName").value;
//myChartModel.options.caption=chartName; //myChartModel.options.caption=chartName;
if(myChartModel.renderer=="")
myChartModel.renderer=document.getElementById("fldVizRenderer").value;
optionsString+="\"caption\":\""+chartName+"\""; optionsString+="\"caption\":\""+chartName+"\"";
var myForm=document.forms["chartPropertiesForm"]; var myForm=document.forms["chartPropertiesForm"];
@ -283,15 +318,7 @@ function updateChartModel(myChartModel)
console.log("Styles:"+ stylesString); console.log("Styles:"+ stylesString);
var styles=JSON.parse(stylesString); */ var styles=JSON.parse(stylesString); */
var chartOptions=JSON.parse(optionsString); var chartOptions=JSON.parse(optionsString);
var marksArray=new Array();
marksArray[0]=Plot.barX(rs_table0,
{
x: "gesamt",
y: "eintrag",
fill: "blue"
}
);
chartOptions["marks"].push(marksArray);
myChartModel.options=chartOptions; myChartModel.options=chartOptions;
//console.log("options:"+ optionsString); //console.log("options:"+ optionsString);
@ -303,16 +330,14 @@ function updateChartModel(myChartModel)
return myChartModel; return myChartModel;
} }
function renderChart(chartDiv) function renderChart(chartDiv,currentChartModel)
{ {
if(document.getElementById("chartName").value=="") if(document.getElementById("chartName").value=="")
document.getElementById("chartName").value=vizInitialName; document.getElementById("chartName").value=vizInitialName;
var chartName=document.getElementById("chartName").value; var chartName=document.getElementById("chartName").value;
var renderer=document.getElementById('fldVizRenderer').value; var renderer=document.getElementById('fldVizRenderer').value;
var myChartModel=new chartModel(1,chartName,renderer,rsTableMetaData); var mySVG=currentChartModel.getChartSVG();
myChartModel=updateChartModel(myChartModel);
var mySVG=myChartModel.getChartSVG();
document.getElementById(chartDiv).innerHTML=""; document.getElementById(chartDiv).innerHTML="";
document.getElementById(chartDiv).appendChild(mySVG); document.getElementById(chartDiv).appendChild(mySVG);
@ -332,7 +357,7 @@ function prepareSelectionForm()
return selectionProperties; return selectionProperties;
} }
function createChartElementConfig1Form(renderer) function createChartElementConfig1Form(renderer,elemID)
{ {
//first empty form: //first empty form:
var formChartElementConfig1=document.getElementById("ChartElementConfig1Div"); var formChartElementConfig1=document.getElementById("ChartElementConfig1Div");
@ -359,6 +384,11 @@ function createChartElementConfig1Form(renderer)
labelDatasource.appendChild(textnode); labelDatasource.appendChild(textnode);
labelDatasourceElem.appendChild(labelDatasource); labelDatasourceElem.appendChild(labelDatasource);
fieldDatasourceElem.appendChild(labelDatasourceElem); fieldDatasourceElem.appendChild(labelDatasourceElem);
const inpElemId = document.createElement("input");
inpElemId.name="chartElementID";
inpElemId.id="chartElementID";
inpElemId.type="hidden";
const selDatasourceElem = document.createElement("select"); const selDatasourceElem = document.createElement("select");
selDatasourceElem.name="chartElementDatasource"; selDatasourceElem.name="chartElementDatasource";
@ -371,6 +401,8 @@ function createChartElementConfig1Form(renderer)
}; };
fillSelectOptions(selDatasourceElem,rsTableMetaData,true); fillSelectOptions(selDatasourceElem,rsTableMetaData,true);
fieldDatasourceElem.appendChild(selDatasourceElem); fieldDatasourceElem.appendChild(selDatasourceElem);
fieldDatasourceElem.appendChild(inpElemId);
elementDatasourceDiv.appendChild(fieldDatasourceElem); elementDatasourceDiv.appendChild(fieldDatasourceElem);
formChartElementConfig1.appendChild(elementDatasourceDiv); formChartElementConfig1.appendChild(elementDatasourceDiv);
@ -459,7 +491,38 @@ function createChartElementsConfig2Form(renderer)
function saveChartElementConfig() function saveChartElementConfig()
{ {
alert("Feierabend"); 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);
/*var marksArray=new Array();
marksArray[elemID]=Plot.barX(rs_table0,
{
x: "gesamt",
y: "eintrag",
fill: "blue"
}
);
chartOptions["marks"].push(marksArray);*/
} }
function getPossibleVizTypes(renderer) function getPossibleVizTypes(renderer)
{ {
@ -987,7 +1050,8 @@ function renderChartPropertyField(commonChartProperty)
} }
selElem.onchange= function () { selElem.onchange= function () {
renderChart('chartDiv'); updateChartModel();
renderChart('chartDiv',myChartModel);
}; };
fillSelectOptions(selElem,commonChartProperty.getValueResultset(),commonChartProperty.isMandatory); fillSelectOptions(selElem,commonChartProperty.getValueResultset(),commonChartProperty.isMandatory);
inputElem.appendChild(selElem); inputElem.appendChild(selElem);
@ -1008,7 +1072,8 @@ function renderChartPropertyField(commonChartProperty)
textAreaElem.id=commonChartProperty.name; textAreaElem.id=commonChartProperty.name;
textAreaElem.value=commonChartProperty.defaultValue; textAreaElem.value=commonChartProperty.defaultValue;
textAreaElem.onchange= function () { textAreaElem.onchange= function () {
renderChart('chartDiv'); updateChartModel();
renderChart('chartDiv',myChartModel);
}; };
inputElem.appendChild(textAreaElem); inputElem.appendChild(textAreaElem);
inputParaElem.appendChild(inputElem); inputParaElem.appendChild(inputElem);
@ -1037,7 +1102,8 @@ function renderChartPropertyField(commonChartProperty)
rangeElem.id=commonChartProperty.name; rangeElem.id=commonChartProperty.name;
rangeElem.value=commonChartProperty.defaultValue; rangeElem.value=commonChartProperty.defaultValue;
rangeElem.onchange= function () { rangeElem.onchange= function () {
renderChart('chartDiv'); updateChartModel();
renderChart('chartDiv',myChartModel);
}; };
inputElem.appendChild(rangeElem); inputElem.appendChild(rangeElem);
inputParaElem.appendChild(inputElem); inputParaElem.appendChild(inputElem);
@ -1060,7 +1126,8 @@ function renderChartPropertyField(commonChartProperty)
inpElem.id=commonChartProperty.name; inpElem.id=commonChartProperty.name;
inpElem.value=commonChartProperty.defaultValue; inpElem.value=commonChartProperty.defaultValue;
inpElem.onchange= function () { inpElem.onchange= function () {
renderChart('chartDiv'); updateChartModel();
renderChart('chartDiv',myChartModel);
}; };
inputElem.appendChild(inpElem); inputElem.appendChild(inpElem);
inputParaElem.appendChild(inputElem); inputParaElem.appendChild(inputElem);
@ -1171,7 +1238,7 @@ for(var col=0;col < metadata.length;col++)
} }
tabElem.appendChild(rowElem); tabElem.appendChild(rowElem);
for(row=1;row<rowcount;row++) for(row=0;row<rowcount;row++)
{ {
if(data[row]) if(data[row])
{ {
@ -1252,6 +1319,53 @@ var myDiv=document.getElementById(chartDivElem);
myDiv.style.display="block"; myDiv.style.display="block";
} }
function renderChartElementWithPlot(chartElem)
{
var plotMark=new Object;
var chartType=chartElem.vizTypeUniquename;
/*
var selectionRsMetaData=[];
var selectionRs=[];
selectionRsMetaData=fillSelectionResultMetaData();
selectionRs=fillSelectionResult(selectionRsMetaData);
*/
switch (chartType)
{
case "sample":
makeSample();
break;
case "bar_x":
plotMark=renderBarXwithPlot(chartElem);
break;
case "bar_x_stacked":
makeBarXStacked(chartDivElem,selectionRs);
break;
case "bar_x_alt":
makeBarX(svg,data);
break;
case "bar_y":
makeBarY(chartDivElem,selectionRs);
break;
case "area_y":
makeAreaY(chartDivElem,selectionRs);
break;
case "dot":
makeDot(chartDivElem,selectionRs);
break;
case "line":
makeLine(chartDivElem,selectionRs);
break;
default:
alert("Please select a chart type");
break;
}
return plotMark;
}
function createChart(chartDivElem) function createChart(chartDivElem)
{ {
//OBSOLETE! //OBSOLETE!
@ -1524,7 +1638,33 @@ function makeBarX(chartDivElem,selectionRs) {
var svgPlot=Plot.plot(options); var svgPlot=Plot.plot(options);
document.getElementById(chartDivElem).appendChild(svgPlot); document.getElementById(chartDivElem).appendChild(svgPlot);
} }
function renderBarXwithPlot(chartElem) {
var barXPlot=new Object;
var categoryDim="";
var measureDim="";
var fillval="";
var myDatasourceRs=rs[chartElem.datasource];
for(var k=0;k<chartElem.elementTypeProperties.length;k++)
{
if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="viz_dimension1")
categoryDim=chartElem.elementTypeProperties[k].propertyValue;
if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="viz_measure1")
measureDim=chartElem.elementTypeProperties[k].propertyValue;
if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="fill")
fillval=chartElem.elementTypeProperties[k].propertyValue;
}
if(fillval=="")
fillval="blue";
barXPlot=Plot.barX(myDatasourceRs,
{
x: measureDim,
y: categoryDim,
fill: fillval
}
);
return barXPlot;
}
function makeBarXStacked(chartDivElem,selectionRs) { function makeBarXStacked(chartDivElem,selectionRs) {
var categoryDim1=document.getElementById("y_horizontal").value; var categoryDim1=document.getElementById("y_horizontal").value;
var categoryDim2=document.getElementById("stroke_bar").value; var categoryDim2=document.getElementById("stroke_bar").value;

29
superx/xml/viz_html_chart.xsl

@ -1347,6 +1347,7 @@ function tableMetaData(nr,value,name,isDefault)
var rsTableMetaData=new Array(); var rsTableMetaData=new Array();
var rsColumnMetaData=new Array(); var rsColumnMetaData=new Array();
var rs=new Array();
</xsl:text> </xsl:text>
@ -1380,7 +1381,9 @@ rsTableMetaData.push(new tableMetaData(
</xsl:choose> </xsl:choose>
<xsl:text> <xsl:text>
)); ));
rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]=new Array();
var myChartModel=new chartModel(1,"","",rsTableMetaData);
function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</xsl:text> function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</xsl:text>
<xsl:for-each select="sqlerg/complete_headers/header"> <xsl:for-each select="sqlerg/complete_headers/header">
@ -1405,16 +1408,17 @@ function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</x
</xsl:for-each><xsl:text> </xsl:for-each><xsl:text>
} }
var rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>= new Array(); rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]=new Array();
</xsl:text> </xsl:text>
<xsl:for-each select="sqlerg/complete_headers/header"> <xsl:for-each select="sqlerg/complete_headers/header">
<xsl:variable name="rownr"> <xsl:variable name="rownr">
<xsl:value-of select="position()"/> <xsl:value-of select="position()"/>
</xsl:variable> </xsl:variable>
<xsl:text> <xsl:text>
rsColumnMetaData.push(new dataRowMetaData('</xsl:text> rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRowMetaData('</xsl:text>
<xsl:value-of select="$tableId"/><xsl:text>',</xsl:text> <xsl:value-of select="$tableId"/><xsl:text>',</xsl:text>
<xsl:value-of select="$rownr"/> <xsl:value-of select="$rownr"/>
<xsl:text>,'</xsl:text> <xsl:text>,'</xsl:text>
@ -1440,7 +1444,7 @@ rsColumnMetaData.push(new dataRowMetaData('</xsl:text>
<xsl:value-of select="position()"/> <xsl:value-of select="position()"/>
</xsl:variable> </xsl:variable>
<xsl:text> <xsl:text>
rsColumnMetaData[</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/> rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>][</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
<xsl:text>; <xsl:text>;
</xsl:text> </xsl:text>
</xsl:for-each> </xsl:for-each>
@ -1448,7 +1452,8 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>]
</xsl:if> </xsl:if>
<!--now resultset--> <!--now resultset-->
<xsl:text> <xsl:text>
rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(</xsl:text><xsl:value-of select="$rownr"/> //rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]= new Array();
rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(</xsl:text><xsl:value-of select="$rownr"/>
<xsl:for-each select="col"> <xsl:for-each select="col">
<xsl:text>,</xsl:text> <xsl:text>,</xsl:text>
<xsl:choose> <xsl:choose>
@ -1473,6 +1478,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
</script> </script>
</xsl:template> </xsl:template>
<xsl:template name="diagrammdaten"> <xsl:template name="diagrammdaten">
<xsl:for-each select="ergebnis/ergebniselement"> <xsl:for-each select="ergebnis/ergebniselement">
<p class="title is-5"><xsl:value-of select="../maskenname" /></p> <p class="title is-5"><xsl:value-of select="../maskenname" /></p>
<xsl:call-template name="legende" /> <xsl:call-template name="legende" />
@ -1480,14 +1486,14 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
<xsl:call-template name="navigationsmenue" /> <xsl:call-template name="navigationsmenue" />
</xsl:if>--> </xsl:if>-->
<xsl:call-template name="buildVizData" > <xsl:call-template name="buildVizData" >
<xsl:with-param name="tableId" select="concat('table' ,@ordnr)" /> <xsl:with-param name="tableId" select="@ordnr" />
</xsl:call-template> </xsl:call-template>
</xsl:for-each> </xsl:for-each>
<span class="separator">&#160;</span> <span class="separator">&#160;</span>
<!--Aufruf/Anzeige Diagrammdaten--> <!--Aufruf/Anzeige Diagrammdaten-->
<xsl:for-each select="ergebnis/ergebniselement"> <xsl:for-each select="ergebnis/ergebniselement">
<xsl:variable name="tableId"><xsl:value-of select="concat('table' ,@ordnr)"/></xsl:variable> <xsl:variable name="tableId"><xsl:value-of select="@ordnr"/></xsl:variable>
<div class="field is-grouped"> <div class="field is-grouped">
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small"><strong><xsl:text>Daten-Tabelle </xsl:text><xsl:value-of select="../maskenname"/></strong></label> <label class="label is-required is-small"><strong><xsl:text>Daten-Tabelle </xsl:text><xsl:value-of select="../maskenname"/></strong></label>
@ -1507,8 +1513,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
<xsl:attribute name="onClick"> <xsl:attribute name="onClick">
<xsl:text>showDataTable('dataDivTable</xsl:text> <xsl:text>showDataTable('dataDivTable</xsl:text>
<xsl:value-of select="$tableId"/> <xsl:value-of select="$tableId"/>
<xsl:text>',rs_</xsl:text><xsl:value-of select="$tableId"/> <xsl:text>',rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>],rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>],10);</xsl:text>
<xsl:text>,rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>MetaData,10);</xsl:text>
</xsl:attribute> </xsl:attribute>
<span class="icon"> <span class="icon">
<img src="../images/icons/more.svg" title="Laden" /> <img src="../images/icons/more.svg" title="Laden" />
@ -1810,7 +1815,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
<p class="bd-notification is-primary"> <p class="bd-notification is-primary">
Diagramm Diagramm
</p> </p>
<p><span class="button is-link is-outlined is-small" onClick="renderChart('chartDiv');">Erzeugen</span></p> <p><span class="button is-link is-outlined is-small" onClick="updateChartModel();renderChart('chartDiv',myChartModel);">Erzeugen</span></p>
</div> </div>
<div class="column is-half"> <div class="column is-half">
<div class="field is-grouped"> <div class="field is-grouped">
@ -1821,7 +1826,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
<div class="field is-active"> <div class="field is-active">
<p class="control-new"> <p class="control-new">
<div class="select is-small is-fullwidth"> <div class="select is-small is-fullwidth">
<textarea class="maskinput" id="chartName" name="chartName" rows="3" cols="20" onChange="renderChart('chartDiv');"/> <textarea class="maskinput" id="chartName" name="chartName" rows="3" cols="20" onChange="updateChartModel();renderChart('chartDiv',myChartModel);"/>
</div> </div>
</p> </p>
</div> </div>
@ -1898,7 +1903,9 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
</div> </div>
<div id="ChartElementsDiv" style="display:none"> <div id="ChartElementsDiv" style="display:none">
<div id="ChartElementListDiv"> <div id="ChartElementListDiv">
<a onClick="createChartElementConfig1Form(document.getElementById('fldVizRenderer').value)">Neues Element</a> </div>
<div id="ChartElementListFooterDiv">
<a onClick="createChartElementConfig1Form(document.getElementById('fldVizRenderer').value,null)">Neues Element</a>
</div> </div>
<div id="ChartElementConfig1Div"> </div> <div id="ChartElementConfig1Div"> </div>
<div id="ChartElementConfig2Div"> </div> <div id="ChartElementConfig2Div"> </div>

Loading…
Cancel
Save