viz/superx/xml/js/d3/viz_functions.js

/* d3 Code */

function d3dataRow(nr,name,value ) 
    {
this.nr=nr;
this.name=name;
this.value=value;

}

function fillSelectFields()
{
fillSelectOptions("viz_category_dim",false);
fillSelectOptions("viz_measure_dim",true);


return true;
}

function fillSelectOptions(fldSelectId,typeMeasureWanted)
{
var optionCounter=0;
var myCombo=document.getElementById(fldSelectId);
while (myCombo.firstChild) {
    myCombo.removeChild(myCombo.firstChild);
}
for(var j=0;j < rsMetaData.length;j++)
{
if(rsMetaData[j].colcaption.trim() !="" &&
(typeMeasureWanted==false || rsMetaData[j].coltype == 4 || rsMetaData[j].coltype == 3)

)
{
	var o=new Option(rsMetaData[j].colcaption,rsMetaData[j].nr,null,null);
	myCombo.options[optionCounter]=o;
	optionCounter++;
}
}
}
function createChart()
{
	
chartType=document.getElementById("viz_chart_type").value;

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=[];

//TODO: filld3ArrayofObjects
var colcount=rsMetaData.length;
var rowcount=rs.length;
var colnrOfCategorydimName=document.getElementById("viz_category_dim").value;
var colnrOfMeasure=document.getElementById("viz_measure_dim").value;
var maxLenName=0;
var maxValue=0;
for(j=1;j<rowcount;j++)
{
	console.log(rs.length+"-"+j+"-"+colnrOfCategorydimName);
	if(rs[j][colnrOfCategorydimName]) //only if Name is not empty:
	{
	data.push(new d3dataRow(j,rs[j][colnrOfCategorydimName],rs[j][colnrOfMeasure]));
	//identify max String length to compute x axis size
	if(rs[j][colnrOfCategorydimName].length >maxLenName)
		maxLenName=rs[j][colnrOfCategorydimName].length;
	//the same for values:
	if(rs[j][colnrOfMeasure] >maxValue)
		maxValue=rs[j][colnrOfMeasure];
	}
	
}

//alert(maxValue);

//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]);
var y = d3.scaleBand().domain(data.map(d => d.nr)).range([0, barHeight * data.length]);

var svg = d3.select("#chartDiv").append("svg")
      .attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth)
      .attr("height", y.range()[1])
      .attr("font-family", "sans-serif")
      .attr("font-size", fontSize)
      .attr("text-anchor", "start")
      .attr("id", "chartSVG")
      

;
		
const bar = svg.selectAll("g")
    .data(data)
    .join("g")
    .attr("transform", d => `translate(${maxLenNamePx},${y(d.nr)})`)
	  ;

  bar.append("rect")
      .attr("fill", "steelblue")
      .on("mouseover",function(){
	d3.select(this).attr("fill", "red");
	})
      .on("mouseout",function(){
	d3.select(this).attr("fill", "steelblue");
	})
      .transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
      .attr("width", d => x(d.value)) //x)
      .attr("height", y.bandwidth() - 1)
	
;
//value label:
  bar.append("text")
      .attr("fill", "white")
      .attr("x", d => x(d.value)/2)
      .attr("y", (y.bandwidth() - 1) / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor","middle")
      .text(d => d.value);
//label:
        bar.append("text")
      .attr("fill", "black")
      .attr("x", 0)
      .attr("y", (y.bandwidth() - 1) / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor","end")
      .text(d => d.name);
      
 
}
else {
	//line chart:


// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 1224 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;
    
var y = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([height, 0 ]);
var x = d3.scaleBand().domain(data.map(d => d.name)).range([0, width]);
var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom) //y.range()[1])
      .attr("font-family", "sans-serif")
      .attr("font-size", "10")
      .attr("text-anchor", "end")
      
;

svg.append("g")
//.attr("transform","translate(" + margin.left + "," + margin.top + ")")
      .attr("transform", "translate(0," + height + ")")
      .attr("class", "x axis")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return +d.value; })])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));

    // 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) })
        )

}

}

function showSrcCode()
{
	//alert(mydiv);
var mySvg=document.getElementById("chartSVG");
	// Extract the data as SVG text string
	var svg_xml = (new XMLSerializer).serializeToString(mySvg);
//alert(svg_xml);
document.getElementById("chartSrc").innerHTML=svg_xml;
document.getElementById("chartSrcFields").style.visibility="visible";
/*
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(ergtabelle);
    selection.removeAllRanges();
    selection.addRange(range);

      document.execCommand('copy');
      selection.removeAllRanges();

    alert("Angezeigte Tabelle wurde in die Zwischenablage kopiert.");
    */
}

function copySrcCode(mydiv)
{
var ergtabelle=document.getElementById(mydiv);
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(ergtabelle);
    selection.removeAllRanges();
    selection.addRange(range);

      document.execCommand('copy');
      selection.removeAllRanges();
}