|
|
@ -8,51 +8,189 @@ this.value=value; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function fillSelectFields() |
|
|
|
function chartPropertyValue(nr,name,value,isDefault )
|
|
|
|
{ |
|
|
|
{ |
|
|
|
fillSelectOptions("viz_category_dim",false); |
|
|
|
this.nr=nr; |
|
|
|
fillSelectOptions("viz_measure_dim",true); |
|
|
|
this.name=name; |
|
|
|
|
|
|
|
this.value=value; |
|
|
|
|
|
|
|
this.isDefault=isDefault; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function chartProperty(name,caption,isDynamic,isMeasure,isOptional,staticValues,defaultValue)
|
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
this.name=name; |
|
|
|
|
|
|
|
this.caption=caption; |
|
|
|
|
|
|
|
this.isDynamic=isDynamic; |
|
|
|
|
|
|
|
this.isMeasure=isMeasure; |
|
|
|
|
|
|
|
this.staticValues=staticValues; |
|
|
|
|
|
|
|
this.isOptional=isOptional; |
|
|
|
|
|
|
|
this.defaultValue=defaultValue; |
|
|
|
|
|
|
|
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 chartPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colcaption,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 chartPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault); |
|
|
|
|
|
|
|
valueOptions[k]=o; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return valueOptions; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function prepareChartProperties(chartType) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
var chartProperties=[]; |
|
|
|
|
|
|
|
switch (chartType) { |
|
|
|
|
|
|
|
case "bar_x": |
|
|
|
|
|
|
|
chartProperties=prepareBarXForm(); |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
case "line": |
|
|
|
|
|
|
|
chartProperties=prepareLineForm(); |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
default: |
|
|
|
|
|
|
|
return false; |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
renderForm("chartProperties",chartProperties,commonChartProperties); |
|
|
|
|
|
|
|
|
|
|
|
return true; |
|
|
|
return true; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function fillSelectOptions(fldSelectId,typeMeasureWanted) |
|
|
|
function prepareBarXForm() |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
var chartProperties=[]; |
|
|
|
|
|
|
|
var propertyCounter=0; |
|
|
|
|
|
|
|
var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,false,null,null); |
|
|
|
|
|
|
|
chartProperties[0]=myProp; |
|
|
|
|
|
|
|
var myProp= new chartProperty("viz_measure_dim","Maß",true,true,false,null,null); |
|
|
|
|
|
|
|
chartProperties[1]=myProp; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return chartProperties; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function prepareLineForm() |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
var chartProperties=[]; |
|
|
|
|
|
|
|
var propertyCounter=0; |
|
|
|
|
|
|
|
var myProp= new chartProperty("viz_category_dim","X-Achse",true,false,false,null,null); |
|
|
|
|
|
|
|
chartProperties[0]=myProp; |
|
|
|
|
|
|
|
var myProp= new chartProperty("viz_measure_dim","Y-Achse",true,true,false,null,null); |
|
|
|
|
|
|
|
chartProperties[1]=myProp; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return chartProperties; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function renderForm(formDiv,chartProperties,myCommonChartProperties) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
//first empty form:
|
|
|
|
|
|
|
|
var myForm=document.getElementById(formDiv); |
|
|
|
|
|
|
|
while (myForm.firstChild) { |
|
|
|
|
|
|
|
myForm.removeChild(myForm.firstChild); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
//now fill it:
|
|
|
|
|
|
|
|
const tabElem = document.createElement("table"); |
|
|
|
|
|
|
|
myForm.appendChild(tabElem); |
|
|
|
|
|
|
|
for(var k=0;k < chartProperties.length;k++) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
const rowElem = document.createElement("tr"); |
|
|
|
|
|
|
|
const tdCap = document.createElement("td"); |
|
|
|
|
|
|
|
const textnode = document.createTextNode(chartProperties[k].caption); |
|
|
|
|
|
|
|
tdCap.appendChild(textnode); |
|
|
|
|
|
|
|
const tdSelElem = document.createElement("td"); |
|
|
|
|
|
|
|
const selElem = document.createElement("select"); |
|
|
|
|
|
|
|
selElem.name=chartProperties[k].name; |
|
|
|
|
|
|
|
selElem.id=chartProperties[k].name; |
|
|
|
|
|
|
|
fillSelectOptions(selElem,chartProperties[k].getValueResultset()); |
|
|
|
|
|
|
|
tdSelElem.appendChild(selElem); |
|
|
|
|
|
|
|
rowElem.appendChild(tdCap); |
|
|
|
|
|
|
|
rowElem.appendChild(tdSelElem); |
|
|
|
|
|
|
|
//here values, and then:
|
|
|
|
|
|
|
|
tabElem.appendChild( rowElem); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/* |
|
|
|
|
|
|
|
const rowElem = document.createElement("tr"); |
|
|
|
|
|
|
|
const tdCap = document.createElement("td"); |
|
|
|
|
|
|
|
const textnode = document.createTextNode("Breite"); |
|
|
|
|
|
|
|
tdCap.appendChild(textnode); |
|
|
|
|
|
|
|
const tdInpElem = document.createElement("td"); |
|
|
|
|
|
|
|
const inpElem = document.createElement("input"); |
|
|
|
|
|
|
|
inpElem.id="viz_width"; |
|
|
|
|
|
|
|
inpElem.name="viz_width"; |
|
|
|
|
|
|
|
inpElem.type="text"; |
|
|
|
|
|
|
|
inpElem.value="800"; |
|
|
|
|
|
|
|
tdInpElem.appendChild(inpElem); |
|
|
|
|
|
|
|
rowElem.appendChild(tdCap); |
|
|
|
|
|
|
|
rowElem.appendChild(tdInpElem); |
|
|
|
|
|
|
|
tabElem.appendChild(rowElem); |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
myForm.appendChild(tabElem); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//TODO: myCommonChartProperties auf separatem TAB
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function fillSelectOptions(myCombo,chartPropertyValues) |
|
|
|
{ |
|
|
|
{ |
|
|
|
var optionCounter=0; |
|
|
|
var optionCounter=0; |
|
|
|
var myCombo=document.getElementById(fldSelectId); |
|
|
|
var selectedOption=null; |
|
|
|
while (myCombo.firstChild) { |
|
|
|
while (myCombo.firstChild) { |
|
|
|
myCombo.removeChild(myCombo.firstChild); |
|
|
|
myCombo.removeChild(myCombo.firstChild); |
|
|
|
} |
|
|
|
} |
|
|
|
for(var j=0;j < rsMetaData.length;j++) |
|
|
|
for(var j=0;j < chartPropertyValues.length;j++) |
|
|
|
{ |
|
|
|
{ |
|
|
|
if(rsMetaData[j].colcaption.trim() !="" && |
|
|
|
if(chartPropertyValues[j].isDefault) |
|
|
|
(typeMeasureWanted==false || rsMetaData[j].coltype == 4 || rsMetaData[j].coltype == 3) |
|
|
|
selectedOption=j; |
|
|
|
|
|
|
|
|
|
|
|
) |
|
|
|
var o=new Option(chartPropertyValues[j].name,chartPropertyValues[j].nr,null,null); |
|
|
|
{ |
|
|
|
|
|
|
|
var o=new Option(rsMetaData[j].colcaption,rsMetaData[j].nr,null,null); |
|
|
|
|
|
|
|
myCombo.options[optionCounter]=o; |
|
|
|
myCombo.options[optionCounter]=o; |
|
|
|
optionCounter++; |
|
|
|
optionCounter++; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if(selectedOption!=null) |
|
|
|
|
|
|
|
myCombo.selectedIndex=selectedOption; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function createChart() |
|
|
|
/* alt:*/ |
|
|
|
|
|
|
|
function fillSelectFields() |
|
|
|
{ |
|
|
|
{ |
|
|
|
|
|
|
|
fillSelectOptions("viz_category_dim",false); |
|
|
|
|
|
|
|
fillSelectOptions("viz_measure_dim",true); |
|
|
|
|
|
|
|
|
|
|
|
chartType=document.getElementById("viz_chart_type").value; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(document.getElementById("viz_category_dim").value=="" ||
|
|
|
|
return true; |
|
|
|
document.getElementById("viz_measure_dim").value=="" ) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
alert("Bitte wählen Sie eine Kategorie und ein Maß"); |
|
|
|
|
|
|
|
return false; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function prepareData() |
|
|
|
|
|
|
|
{ |
|
|
|
var data=[]; |
|
|
|
var data=[]; |
|
|
|
|
|
|
|
|
|
|
|
//TODO: filld3ArrayofObjects
|
|
|
|
//TODO: filld3ArrayofObjects
|
|
|
|
var colcount=rsMetaData.length; |
|
|
|
|
|
|
|
var rowcount=rs.length; |
|
|
|
var rowcount=rs.length; |
|
|
|
var colnrOfCategorydimName=document.getElementById("viz_category_dim").value; |
|
|
|
var colnrOfCategorydimName=document.getElementById("viz_category_dim").value; |
|
|
|
var colnrOfMeasure=document.getElementById("viz_measure_dim").value; |
|
|
|
var colnrOfMeasure=document.getElementById("viz_measure_dim").value; |
|
|
@ -73,46 +211,70 @@ for(j=1;j<rowcount;j++) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return data; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//alert(maxValue);
|
|
|
|
function createChart() |
|
|
|
|
|
|
|
|
|
|
|
//var barLabel = function(d) { return d.name; };
|
|
|
|
|
|
|
|
//var barValue = function(d) { return parseInt(d.value); };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var valueLabelWidth = 20;
|
|
|
|
|
|
|
|
var barHeight = 18;
|
|
|
|
|
|
|
|
var barLabelWidth = 500;
|
|
|
|
|
|
|
|
var barLabelPadding = 10;
|
|
|
|
|
|
|
|
var gridLabelHeight = 18;
|
|
|
|
|
|
|
|
var gridChartOffset = 3;
|
|
|
|
|
|
|
|
var maxBarWidth = maxValue; |
|
|
|
|
|
|
|
var fontSize=10; |
|
|
|
|
|
|
|
var maxLenNamePx=maxLenName*fontSize; |
|
|
|
|
|
|
|
//alert(maxLenNamePx);
|
|
|
|
|
|
|
|
//var width=420;
|
|
|
|
|
|
|
|
//var height=1420;
|
|
|
|
|
|
|
|
document.getElementById("chartDiv").innerHTML=""; //reset canvas
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var chartWidth=document.getElementById("viz_width").value; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(chartType=="bar") |
|
|
|
|
|
|
|
{ |
|
|
|
{ |
|
|
|
var x = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([0, chartWidth]); |
|
|
|
chartType=document.getElementById("viz_chart_type").value; |
|
|
|
var y = d3.scaleBand().domain(data.map(d => d.nr)).range([0, barHeight * data.length]); |
|
|
|
/* |
|
|
|
|
|
|
|
if(document.getElementById("viz_category_dim").value=="" ||
|
|
|
|
|
|
|
|
document.getElementById("viz_measure_dim").value=="" ) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
alert("Bitte wählen Sie eine Kategorie und ein Maß"); |
|
|
|
|
|
|
|
return false; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
var data=[]; |
|
|
|
|
|
|
|
data=prepareData(); |
|
|
|
|
|
|
|
|
|
|
|
var svg = d3.select("#chartDiv").append("svg") |
|
|
|
var valueLabelWidth = getCommonChartProperty("valueLabelWidth");
|
|
|
|
|
|
|
|
var fontFamily=getCommonChartProperty("fontFamily");
|
|
|
|
|
|
|
|
var gridLabelHeight = getCommonChartProperty("gridLabelHeight");
|
|
|
|
|
|
|
|
var gridChartOffset = getCommonChartProperty("gridChartOffset"); |
|
|
|
|
|
|
|
var chartWidth=getCommonChartProperty("chartWidth"); |
|
|
|
|
|
|
|
var fontSize=getCommonChartProperty("fontSize"); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.getElementById("chartDiv").innerHTML=""; //reset canvas
|
|
|
|
|
|
|
|
var svg = d3.select("#chartDiv").append("svg") |
|
|
|
.attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth)
|
|
|
|
.attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth)
|
|
|
|
.attr("height", y.range()[1]) |
|
|
|
//.attr("height", y.range()[1])
|
|
|
|
.attr("font-family", "sans-serif") |
|
|
|
.attr("font-family", fontFamily) |
|
|
|
.attr("font-size", fontSize) |
|
|
|
.attr("font-size", fontSize) |
|
|
|
.attr("text-anchor", "start") |
|
|
|
.attr("text-anchor", "start") |
|
|
|
.attr("id", "chartSVG") |
|
|
|
.attr("id", "chartSVG") |
|
|
|
|
|
|
|
; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
switch (chartType) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
case "bar_x": |
|
|
|
|
|
|
|
makeBarX(svg,data); |
|
|
|
|
|
|
|
//makeBarY(svg,data);
|
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
case "line": |
|
|
|
|
|
|
|
makeLine(svg,data); |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
default: |
|
|
|
|
|
|
|
alert("Please select a chart type"); |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const bar = svg.selectAll("g") |
|
|
|
function makeBarX(svg,data) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
var barHeight = 18;
|
|
|
|
|
|
|
|
var barLabelWidth = 500;
|
|
|
|
|
|
|
|
var barLabelPadding = 10;
|
|
|
|
|
|
|
|
var maxBarWidth = maxValue; |
|
|
|
|
|
|
|
var fontSize=getCommonChartProperty("fontSize"); |
|
|
|
|
|
|
|
var chartWidth=getCommonChartProperty("chartWidth"); |
|
|
|
|
|
|
|
var maxValue=d3.max(data, d => d.value); |
|
|
|
|
|
|
|
var maxLenName=d3.max(data, d => d.name.length); |
|
|
|
|
|
|
|
var maxLenNamePx=maxLenName*fontSize; |
|
|
|
|
|
|
|
var x = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).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) |
|
|
|
.data(data) |
|
|
|
.join("g") |
|
|
|
.join("g") |
|
|
|
.attr("transform", d => `translate(${maxLenNamePx},${y(d.nr)})`) |
|
|
|
.attr("transform", d => `translate(${maxLenNamePx},${y(d.nr)})`) |
|
|
@ -132,8 +294,8 @@ const bar = svg.selectAll("g") |
|
|
|
.attr("width", d => x(d.value)) //x)
|
|
|
|
.attr("width", d => x(d.value)) //x)
|
|
|
|
.attr("height", y.bandwidth() - 1) |
|
|
|
.attr("height", y.bandwidth() - 1) |
|
|
|
|
|
|
|
|
|
|
|
; |
|
|
|
; |
|
|
|
//value label:
|
|
|
|
//value label:
|
|
|
|
bar.append("text") |
|
|
|
bar.append("text") |
|
|
|
.attr("fill", "white") |
|
|
|
.attr("fill", "white") |
|
|
|
.attr("x", d => x(d.value)/2) |
|
|
|
.attr("x", d => x(d.value)/2) |
|
|
@ -141,7 +303,7 @@ const bar = svg.selectAll("g") |
|
|
|
.attr("dy", "0.35em") |
|
|
|
.attr("dy", "0.35em") |
|
|
|
.attr("text-anchor","middle") |
|
|
|
.attr("text-anchor","middle") |
|
|
|
.text(d => d.value); |
|
|
|
.text(d => d.value); |
|
|
|
//label:
|
|
|
|
//label:
|
|
|
|
bar.append("text") |
|
|
|
bar.append("text") |
|
|
|
.attr("fill", "black") |
|
|
|
.attr("fill", "black") |
|
|
|
.attr("x", 0) |
|
|
|
.attr("x", 0) |
|
|
@ -149,57 +311,97 @@ const bar = svg.selectAll("g") |
|
|
|
.attr("dy", "0.35em") |
|
|
|
.attr("dy", "0.35em") |
|
|
|
.attr("text-anchor","end") |
|
|
|
.attr("text-anchor","end") |
|
|
|
.text(d => d.name); |
|
|
|
.text(d => d.name); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function makeLine(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", |
|
|
|
|
|
|
|
type:"point" |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// set y axis options
|
|
|
|
|
|
|
|
y: { |
|
|
|
|
|
|
|
grid:true |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
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)); |
|
|
|
} |
|
|
|
} |
|
|
|
else { |
|
|
|
|
|
|
|
//line chart:
|
|
|
|
function makeBarY(svg,data) { |
|
|
|
|
|
|
|
var options = { |
|
|
|
|
|
|
|
marginBottom:100, |
|
|
|
// set the dimensions and margins of the graph
|
|
|
|
x: { |
|
|
|
var margin = {top: 10, right: 30, bottom: 30, left: 60}, |
|
|
|
tickRotate: -45, |
|
|
|
width = 1224 - margin.left - margin.right, |
|
|
|
ticks: 5, |
|
|
|
height = 600 - margin.top - margin.bottom; |
|
|
|
tickSize: 5, |
|
|
|
|
|
|
|
line: true, |
|
|
|
var y = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([height, 0 ]); |
|
|
|
tickPadding: 10, |
|
|
|
var x = d3.scaleBand().domain(data.map(d => d.name)).range([0, width]); |
|
|
|
labelAnchor: "left", |
|
|
|
var svg = d3.select("#chart").append("svg") |
|
|
|
labelOffset: 0, |
|
|
|
.attr("width", width + margin.left + margin.right) |
|
|
|
nice: true, |
|
|
|
.attr("height", height + margin.top + margin.bottom) //y.range()[1])
|
|
|
|
label: "My label" |
|
|
|
.attr("font-family", "sans-serif") |
|
|
|
|
|
|
|
.attr("font-size", "10") |
|
|
|
}, |
|
|
|
.attr("text-anchor", "end") |
|
|
|
// set y axis options
|
|
|
|
|
|
|
|
y: { |
|
|
|
; |
|
|
|
grid:true |
|
|
|
|
|
|
|
}, |
|
|
|
svg.append("g") |
|
|
|
sort: "nr", |
|
|
|
//.attr("transform","translate(" + margin.left + "," + margin.top + ")")
|
|
|
|
// define the marks we will use, dots and a line
|
|
|
|
.attr("transform", "translate(0," + height + ")") |
|
|
|
marks: [ |
|
|
|
.attr("class", "x axis") |
|
|
|
//Plot.barY(data, Plot.groupX({x: "name", y: "value" }))
|
|
|
|
.call(d3.axisBottom(x)); |
|
|
|
Plot.barY( |
|
|
|
|
|
|
|
data, |
|
|
|
// Add Y axis
|
|
|
|
Plot.groupX( |
|
|
|
var y = d3.scaleLinear() |
|
|
|
{ y: "sum" },
|
|
|
|
.domain([0, d3.max(data, function(d) { return +d.value; })]) |
|
|
|
{
|
|
|
|
.range([ height, 0 ]); |
|
|
|
x: "name",
|
|
|
|
svg.append("g") |
|
|
|
y: "value",
|
|
|
|
.call(d3.axisLeft(y)); |
|
|
|
sort: {x:"nr"},
|
|
|
|
|
|
|
|
filter: null
|
|
|
|
// Add the line
|
|
|
|
} |
|
|
|
svg.append("path") |
|
|
|
|
|
|
|
.datum(data) |
|
|
|
|
|
|
|
.attr("fill", "none") |
|
|
|
|
|
|
|
.attr("stroke", "steelblue") |
|
|
|
|
|
|
|
.attr("stroke-width", 1.5) |
|
|
|
|
|
|
|
.attr("d", d3.line() |
|
|
|
|
|
|
|
.x(function(d) { return x(d.name) }) |
|
|
|
|
|
|
|
.y(function(d) { return y(d.value) }) |
|
|
|
|
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
//Plot.dot(data, {x: "nr", y: "value",sort: { x: "nr" } })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.getElementById("chartDiv").appendChild(Plot.plot(options)); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getCommonChartProperty(name) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
var propertyValue=""; |
|
|
|
|
|
|
|
for (var i=0;i<commonChartProperties.length;i++) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
if(commonChartProperties[i].name==name) |
|
|
|
|
|
|
|
propertyValue=commonChartProperties[i].defaultValue; //TODO aus formular übersteuern
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return propertyValue; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function showSrcCode() |
|
|
|
function showSrcCode() |
|
|
|
{ |
|
|
|
{ |
|
|
|
//alert(mydiv);
|
|
|
|
//alert(mydiv);
|
|
|
@ -235,3 +437,37 @@ var ergtabelle=document.getElementById(mydiv); |
|
|
|
document.execCommand('copy'); |
|
|
|
document.execCommand('copy'); |
|
|
|
selection.removeAllRanges(); |
|
|
|
selection.removeAllRanges(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function makeHisto() { |
|
|
|
|
|
|
|
d3.csv( "/superx/xml/js/d3/dense.csv" ).then( function( data ) {
|
|
|
|
|
|
|
|
var histo = d3.histogram().value( d=>+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) ); |
|
|
|
|
|
|
|
} ); |
|
|
|
|
|
|
|
} |
|
|
|