[CLOSED] Divergent bar chart

Hi Everyone,

I need to create a divergent bar chart in webfocus(like the one in the url). Is it available in webfocus? has some one worked on this before? Any input would be appreciated, thank you in advance.
Divergent Bar chart
Regards
BI Dev

This message has been edited. Last edited by: FP Mod Chuck,

Webfocus 8105/8202
Windows
All Outputs

Posts: 106 | Registered: June 26, 2018

Mike Williams

Silver Member

posted

Hide Post

There is a D3 Diverging Stacked Bar Chart, http://bl.ocks.org/wpoely86/e285b8e4c7b84710e463 so you could possibly leverage that into your solution.

Here's an example of using D3 w/WF from GavinL
http://forums.informationbuild...677093986#9677093986

WF Version 8105

Posts: 45 | Registered: October 07, 2015

Ignored post by Mike Williams posted

Show Post

Tony A

Expert

posted

Hide Post

I created one that was demoed as part of a D3 charting presentation for Summit 2017 in the UK. I didn't get to present it at the US Summit though.

Anyway, the code is as below. It is supplied "as is" so it's up to you to make it work with your data. Sorry, but I have a day job!

-DEFAULTH &Source = 'NHS'
TABLE FILE LIKERT_DATA
  SUM COMPUTE CNTR/I3 = LAST CNTR + 1; NOPRINT
	  COMPUTE N/I11 = StrongDisagree + Disagree + Neither + Agree + StrongAgree; NOPRINT
      COMPUTE MYJSON/A300 = IF CNTR EQ 1 THEN '{"Question":"' || Question
	                                       || '","1":' || LJUST(6,FPRINT(StrongAgree,'I6','A6'),'A6')
	                                       || ',"2":' || LJUST(6,FPRINT(Agree,'I6','A6'),'A6')
	                                       || ',"3":' || LJUST(6,FPRINT(Neither,'I6','A6'),'A6')
	                                       || ',"4":' || LJUST(6,FPRINT(Disagree,'I6','A6'),'A6')
	                                       || ',"5":' || LJUST(6,FPRINT(StrongDisagree,'I6','A6'),'A6')
	                                       || ',"N":' || LJUST(11,FPRINT(N,'I11','A11'),'A11') || '}'
                                        ELSE ',{"Question":"' || Question
	                                       || '","1":' || LJUST(6,FPRINT(StrongAgree,'I6','A6'),'A6')
	                                       || ',"2":' || LJUST(6,FPRINT(Agree,'I6','A6'),'A6')
	                                       || ',"3":' || LJUST(6,FPRINT(Neither,'I6','A6'),'A6')
	                                       || ',"4":' || LJUST(6,FPRINT(Disagree,'I6','A6'),'A6')
	                                       || ',"5":' || LJUST(6,FPRINT(StrongDisagree,'I6','A6'),'A6')
	                                       || ',"N":' || LJUST(11,FPRINT(N,'I11','A11'),'A11') || '}';
   BY Q_Num NOPRINT
   BY Question NOPRINT
WHERE Source EQ '&Source'
ON TABLE SET BYDISPLAY ON
ON TABLE SET ASNAMES ON
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE SAVE AS LIKERT
END
-RUN

-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Diverging Stacked Bar Chart with D3.js</title>
<style>
body {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.shape {
  fill: #eee;
-*  stroke: #f00;
}
</style>

-*<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/approot/d3/d3.v3.min.js" charset="utf-8"></script>
-*<script src="http://d3plus.org/js/d3plus.js"></script>
<script src="/approot/d3/d3plus.js"></script>

<body style="overflow: hidden;">

<div id="figure" style="margin-bottom: 50px;"></div>

<script>

-*    var data = [{"Question":"Question 1","1":24,"2":294,"3":594,"4":1927,"5":376,"N":3215}
-*               ,{"Question":"Question 2","1":2,"2":2,"3":0,"4":7,"5":0,"N":11}
-*               ,{"Question":"Question 3","1":2,"2":0,"3":2,"4":4,"5":2,"N":10}
-*               ,{"Question":"Question 4","1":0,"2":2,"3":1,"4":7,"5":6,"N":16}
-*               ,{"Question":"Question 5","1":0,"2":1,"3":3,"4":16,"5":4,"N":24}
-*               ,{"Question":"Question 6","1":1,"2":1,"3":2,"4":9,"5":3,"N":16}
-*               ,{"Question":"Question 7","1":0,"2":0,"3":1,"4":4,"5":0,"N":5}
-*               ,{"Question":"Question 8","1":0,"2":0,"3":0,"4":0,"5":2,"N":2}];
  var data = [!IBI.FIL.LIKERT;];

function build_chart() {

  d3.select("#figure").text(""); // Empty the contents of the SVG ready to rebuild

var margin = {top: 80, right: 80, bottom: 50, left: 125},
-*    width = 800 - margin.left - margin.right,
-*    height = 500 - margin.top - margin.bottom;
    width = window.innerWidth - margin.left - margin.right;
    height = window.innerHeight - margin.top - margin.bottom;

var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], .3);

var x = d3.scale.linear()
    .rangeRound([0, width]);

var color = d3.scale.ordinal()
    .range(["#c7001e", "#f6a580", "#cccccc", "#92c6db", "#086fad"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select("#figure").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("id", "d3-plot")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  color.domain(["Strongly disagree", "Disagree", "Neither agree nor disagree", "Agree", "Strongly agree"]);

  data.forEach(function(d) {
    // calc percentages
    d["Strongly disagree"] = +d[1]*100/d.N;
    d["Disagree"] = +d[2]*100/d.N;
    d["Neither agree nor disagree"] = +d[3]*100/d.N;
    d["Agree"] = +d[4]*100/d.N;
    d["Strongly agree"] = +d[5]*100/d.N;
    var x0 = -1*(d["Neither agree nor disagree"]/2+d["Disagree"]+d["Strongly disagree"]);
    var idx = 0;
    d.boxes = color.domain().map(function(name) { return {name: name, x0: x0, x1: x0 += +d[name], N: +d.N, n: +d[idx += 1]}; });
  });

  var min_val = d3.min(data, function(d) {
          return d.boxes["0"].x0;
          });

  var max_val = d3.max(data, function(d) {
          return d.boxes["4"].x1;
          });

  x.domain([min_val, max_val]).nice();
  y.domain(data.map(function(d) { return d.Question; }));

  svg.append("g")
      .attr("class", "x axis")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

// add an ID attribute to y axis label text
  var counter = 0;
  var text4tick = svg.selectAll(".y text")
      .attr("class", "wrap")
      .attr("id", "rectWrap")
	  .append(function(d) {
              var xyz = createTitle(d);
			  var txtParent = d3.select(this.parentNode).select("text");
			  counter += 1;
			  txtParent.text("Question " + counter);
			  txtParent.attr("font-size", "20px");
	          return xyz;
		   })
  ;

  var vakken = svg.selectAll(".question")
      .data(data)
    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(0," + y(d.Question) + ")"; });

  var bars = vakken.selectAll("rect")
      .data(function(d) { return d.boxes; })
    .enter().append("g").attr("class", "subbar");

  bars.append("rect")
      .attr("height", y.rangeBand())
      .attr("x", function(d) { return x(d.x0); })
      .attr("width", function(d) { return x(d.x1) - x(d.x0); })
      .style("fill", function(d) { return color(d.name); });

  bars.append("text")
      .attr("x", function(d) { return x(d.x0); })
      .attr("y", y.rangeBand()/2)
      .attr("dy", "0.5em")
      .attr("dx", "0.5em")
      .style("font" ,"11px sans-serif")
      .style("text-anchor", "begin")
      .text(function(d) { return d.n !== 0 && (d.x1-d.x0)>3 ? d.n : "" });

  vakken.insert("rect",":first-child")
      .attr("height", y.rangeBand())
      .attr("x", "1")
      .attr("width", width)
      .attr("fill-opacity", "0.3")
      .style("fill", "#f9f9f9")
      .attr("class", function(d,index) { return index%2==0 ? "even" : "uneven"; });

  var startp = svg.append("g").attr("class", "legendbox").attr("id", "mylegendbox");
  // this is not nice, we should calculate the bounding box and use that
  var legend_tabs = [0, 120, 200, 375, 450];
  var legend = startp.selectAll(".legend")
      .data(color.domain().slice())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(" + legend_tabs[i] + ",-45)"; });

  legend.append("rect")
      .attr("x", 0)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", 22)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "begin")
      .style("font" ,"10px sans-serif")
      .text(function(d) { return d; });

// Axis lines
  d3.selectAll(".axis path")
      .style("fill", "none")
      .style("stroke", "#000")
      .style("shape-rendering", "crispEdges")

// Mark the zero line
  svg.append("g")
      .attr("class", "y axis")
  .append("line")
      .attr("x1", x(0))
      .attr("x2", x(0))
      .attr("y2", height);

  d3.selectAll(".axis line")
      .style("fill", "none")
      .style("stroke", "#000")
      .style("shape-rendering", "crispEdges")

  var movesize = width/2 - startp.node().getBBox().width/2;
  d3.selectAll(".legendbox").attr("transform", "translate(" + movesize  + ",0)");

} // end of build_chart function

function createTitle(text) {
  var svgText = document.createElementNS("http://www.w3.org/2000/svg", "title");
  var textNode = document.createTextNode(text);
	  svgText.appendChild(textNode);
  return svgText;
} // end of createTitle function

// This will create a number of tspan objects within a text object from the supplied text.
function wrapText(text) {
  var words = text.split(" ");
  var line = "";
  var svgText = document.createElementNS("http://www.w3.org/2000/svg", "text");

  for (var n=0; n<words.length; n++) {
    var testLine = line + words[n] + " ";
	if (testLine.length > 60) {
	  var textTSpan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
	  var textNode = document.createTextNode(line);
	  textTSpan.appendChild(textNode);
	  svgText.appendChild(textTSpan);

	  line = words[n] + " ";
	} else {
	  line = testLine;
	}
  }

  var textTSpan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
  textTSpan.style.class = "title";
  var textNode = document.createTextNode(line);
  textTSpan.appendChild(textNode);
  svgText.appendChild(textTSpan);

  return svgText;
}

d3.select(window).on("resize", build_chart);

</script>

</body>
</html>
-HTMLFORM END

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10

Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004

Ignored post by Tony A posted

Show Post

BI Dev

Platinum Member

posted

Hide Post

Thank you Mike.

quote:
Originally posted by Mike Williams:
There is a D3 Diverging Stacked Bar Chart, http://bl.ocks.org/wpoely86/e285b8e4c7b84710e463 so you could possibly leverage that into your solution.

Here's an example of using D3 w/WF from GavinL
http://forums.informationbuild...677093986#9677093986

Webfocus 8105/8202
Windows
All Outputs

Posts: 106 | Registered: June 26, 2018

Ignored post by BI Dev posted

Show Post

BI Dev

Platinum Member

posted

Hide Post

Tony A,

Thanks for your input, I will try to recreate it on my end.

BI Dev

Webfocus 8105/8202
Windows
All Outputs

Posts: 106 | Registered: June 26, 2018

Ignored post by BI Dev posted

Show Post

Tony A

Expert

posted

Hide Post

To give you an idea on what my LIKERTT_DATA looks like, here's a dynamic sample.

FILEDEF LIKERT_DATA DISK LIKERT_DATA.CSV
-RUN

EX -LINES * EDAPUT MASTER,LIKERT_DATA,CV,MEM
FILE=LIKERT_DATA,SUFFIX=COM
SEGNAME=SEG1
FIELD=Source,   ,A10   ,A10   ,$
FIELD=Q_Num,    ,I3    ,I3   ,$
FIELD=Question, ,A50   ,A50  ,$
FIELD=StrongDisagree, ,I11 ,I11 ,$
FIELD=Disagree, ,I11 ,I11 ,$
FIELD=Neither, ,I11 ,I11 ,$
FIELD=Agree, ,I11 ,I11 ,$
FIELD=StrongAgree, ,I11 ,I11 ,$
EDAPUT*
-RUN

-WRITE LIKERT_DATA NHS,1,Question 1,20,12,32,12,22,$
-WRITE LIKERT_DATA NHS,2,Question 2,2,2,2,2,2,$
-WRITE LIKERT_DATA NHS,3,Question 3,5,6,2,8,2,$
-WRITE LIKERT_DATA NHS,4,Question 4,2,6,2,9,2,$
-WRITE LIKERT_DATA NHS,5,Question 5,2,2,2,2,2,$
-WRITE LIKERT_DATA NHS,6,Question 6,2,2,2,2,2,$
-WRITE LIKERT_DATA NHS,7,Question 7,2,2,2,2,2,$
-WRITE LIKERT_DATA NHS,8,Question 8,2,2,2,2,2,$
-WRITE LIKERT_DATA NHS,9,Question 9,2,2,2,2,2,$
-WRITE LIKERT_DATA NHS,10,Question 10,2,2,2,2,2,$
-RUN

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10

Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004

Ignored post by Tony A posted

Show Post

Please Wait. Your request is being processed...

Read-Only Topic

Focal Point

Focal Point Forums

WebFOCUS/FOCUS Forum on Focal Point

[CLOSED] Divergent bar chart

Focal Point | Privacy Statement | Terms of Service