Browse Source

barY Test #3

makro_datasrc
Daniel Quathamer 3 years ago
parent
commit
372d3d4b6c
  1. 86
      superx/xml/js/d3/viz_functions.js
  2. 8
      superx/xml/viz_html_chart.xsl

86
superx/xml/js/d3/viz_functions.js vendored

@ -26,14 +26,14 @@ this.isDefault=isDefault;
} }
function chartProperty(name,caption,isDynamic,isMeasure,isOptional,staticValues,defaultValue,optionalFunction) function chartProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction)
{ {
this.name=name; this.name=name;
this.caption=caption; this.caption=caption;
this.isDynamic=isDynamic; this.isDynamic=isDynamic;
this.isMeasure=isMeasure; this.isMeasure=isMeasure;
this.staticValues=staticValues; this.staticValues=staticValues;
this.isOptional=isOptional; this.isMandatory=isMandatory;
this.defaultValue=defaultValue; this.defaultValue=defaultValue;
this.optionalFunction=optionalFunction; this.optionalFunction=optionalFunction;
this.getValueResultset = function () { this.getValueResultset = function () {
@ -83,8 +83,8 @@ function prepareChartProperties(chartType)
case "bar_x": case "bar_x":
chartProperties=prepareBarXForm(); chartProperties=prepareBarXForm();
break; break;
case "rect_y": case "bar_y":
chartProperties=prepareRectYForm(); chartProperties=prepareBarYForm();
break; break;
case "line": case "line":
chartProperties=prepareLineForm(); chartProperties=prepareLineForm();
@ -102,22 +102,24 @@ function prepareBarXForm()
{ {
var chartProperties=[]; var chartProperties=[];
var propertyCounter=0; var propertyCounter=0;
var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,false,null,null,true); var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,true,null,null,true);
chartProperties[0]=myProp; chartProperties[0]=myProp;
var myProp= new chartProperty("viz_measure_dim","Maß",true,true,false,null,null,true); var myProp= new chartProperty("viz_measure_dim","Maß",true,true,false,true,null,true);
chartProperties[1]=myProp; chartProperties[1]=myProp;
return chartProperties; return chartProperties;
} }
function prepareRectYForm() function prepareBarYForm()
{ {
var chartProperties=[]; var chartProperties=[];
var propertyCounter=0; var propertyCounter=0;
var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,false,null,null,true); var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,true,null,null,true);
chartProperties[0]=myProp; chartProperties[0]=myProp;
var myProp= new chartProperty("viz_measure_dim","Maß",true,true,false,null,null,true); var myProp= new chartProperty("viz_series_dim","Serien-Dimension",true,false,false,null,null,true);
chartProperties[1]=myProp; chartProperties[1]=myProp;
var myProp= new chartProperty("viz_measure_dim","Maß",true,true,true,null,null,true);
chartProperties[2]=myProp;
return chartProperties; return chartProperties;
} }
@ -126,9 +128,9 @@ function prepareLineForm()
{ {
var chartProperties=[]; var chartProperties=[];
var propertyCounter=0; var propertyCounter=0;
var myProp= new chartProperty("viz_category_dim","X-Achse",true,false,false,null,null,true); var myProp= new chartProperty("viz_category_dim","X-Achse",true,false,true,null,null,true);
chartProperties[0]=myProp; chartProperties[0]=myProp;
var myProp= new chartProperty("viz_measure_dim","Y-Achse",true,true,false,null,null,true); var myProp= new chartProperty("viz_measure_dim","Y-Achse",true,true,true,null,null,true);
chartProperties[1]=myProp; chartProperties[1]=myProp;
return chartProperties; return chartProperties;
@ -154,7 +156,7 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties,dimFunctions
const selElem = document.createElement("select"); const selElem = document.createElement("select");
selElem.name=chartProperties[k].name; selElem.name=chartProperties[k].name;
selElem.id=chartProperties[k].name; selElem.id=chartProperties[k].name;
fillSelectOptions(selElem,chartProperties[k].getValueResultset(),true); fillSelectOptions(selElem,chartProperties[k].getValueResultset(),chartProperties[k].isMandatory);
tdSelElem.appendChild(selElem); tdSelElem.appendChild(selElem);
if(chartProperties[k].optionalFunction) if(chartProperties[k].optionalFunction)
{ {
@ -340,8 +342,8 @@ switch (chartType)
case "bar_x": case "bar_x":
makeBarX(svg,data); makeBarX(svg,data);
break; break;
case "rect_y": case "bar_y":
makeRectY(svg,data); makeBarY(svg,data);
break; break;
case "line": case "line":
@ -447,7 +449,7 @@ var options = {
document.getElementById("chartDiv").appendChild(Plot.plot(options)); document.getElementById("chartDiv").appendChild(Plot.plot(options));
} }
function makeRectY(svg,data) { function makeBarY(svg,data) {
var xLabel=rsMetaData[document.getElementById("viz_category_dim").value-1].colcaption; var xLabel=rsMetaData[document.getElementById("viz_category_dim").value-1].colcaption;
var yLabel=rsMetaData[document.getElementById("viz_measure_dim").value-1].colcaption; var yLabel=rsMetaData[document.getElementById("viz_measure_dim").value-1].colcaption;
var fontSize=getCommonChartProperty("fontSize"); var fontSize=getCommonChartProperty("fontSize");
@ -466,63 +468,25 @@ var options = {
grid:true, grid:true,
label: yLabel label: yLabel
}, },
sort: "nr",
marks: [
Plot.barY(data,{
x: "name",
y: "value"
})
]
}
document.getElementById("chartDiv").appendChild(Plot.plot(options));
}
function makeBarY(svg,data) {
var options = {
marginBottom:100,
x: {
tickRotate: -45,
ticks: 5,
tickSize: 5,
line: true,
tickPadding: 10,
labelAnchor: "left",
labelOffset: 0,
nice: true,
label: "My label"
},
// set y axis options
y: {
grid:true
},
sort: "nr",
// define the marks we will use, dots and a line
marks: [ marks: [
//Plot.barY(data, Plot.groupX({x: "name", y: "value" })) Plot.barY(data,
Plot.barY(
data,
Plot.groupX( Plot.groupX(
{ y: "sum" }, {y: "sum"},
{ {
x: "name", x: "name",
y: "value", y: "value"
sort: {x:"nr"},
filter: null
} }
) )
) )
] ]
//Plot.dot(data, {x: "nr", y: "value",sort: { x: "nr" } }) }
};
document.getElementById("chartDiv").appendChild(Plot.plot(options)); document.getElementById("chartDiv").appendChild(Plot.plot(options));
} }
function getCommonChartProperty(name) function getCommonChartProperty(name)
{ {
var propertyValue=""; var propertyValue="";

8
superx/xml/viz_html_chart.xsl

@ -115,8 +115,8 @@ padding:3px;
<!-- start Javascript--> <!-- start Javascript-->
<xsl:template name="tableJavascript_viz"> <xsl:template name="tableJavascript_viz">
<script language="Javascript" type="text/javascript" src="/superx/xml/js/d3/d3.min.js" /> <script language="Javascript" type="text/javascript" src="/superx/xml/js/viz/d3.min.js" />
<script language="Javascript" type="text/javascript" src="/superx/xml/js/d3/plot.js" /> <script language="Javascript" type="text/javascript" src="/superx/xml/js/viz/plot.js" />
<script><xsl:text> <script><xsl:text>
//document.body.append(Plot.plot(options)); //document.body.append(Plot.plot(options));
@ -155,7 +155,7 @@ commonChartProperties.push(newCommonChartProperty);
</xsl:text> </xsl:text>
</script> </script>
<script language="Javascript" type="text/javascript" src="/superx/xml/js/d3/viz_functions.js" /> <script language="Javascript" type="text/javascript" src="/superx/xml/js/viz/viz_functions.js" />
</xsl:template> </xsl:template>
@ -1171,7 +1171,7 @@ rs[</xsl:text><xsl:value-of select="$rownr"/><xsl:text>][</xsl:text><xsl:value-o
<td><select class="maskinputPflicht" id="viz_chart_type" NAME="viz_chart_type" tabindex="200" onChange="prepareChartProperties(this.value)" > <td><select class="maskinputPflicht" id="viz_chart_type" NAME="viz_chart_type" tabindex="200" onChange="prepareChartProperties(this.value)" >
<option class="maskinput" value="">Bitte wählen</option> <option class="maskinput" value="">Bitte wählen</option>
<option class="maskinput" value="bar_x">Balkendiagramm horizontal (einfach)</option> <option class="maskinput" value="bar_x">Balkendiagramm horizontal (einfach)</option>
<option class="maskinput" value="rect_y">Balkendiagramm vertikal (einfach)</option> <option class="maskinput" value="bar_y">Balkendiagramm vertikal (einfach)</option>
<option class="maskinput" value="line">Liniendiagramm vertikal (einfach)</option> <option class="maskinput" value="line">Liniendiagramm vertikal (einfach)</option>
</select> </select>
</td> </td>

Loading…
Cancel
Save