• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 531
  • Last Modified:

Recommendations for data rendering

I need to render some data and would like some recommendations on my options.  This will most likely be an Access/VBA applet or HTA/VBScript application.  There will be a primary set of data (4 values), a secondary set of data (3 values = difference between primary set values), and potentially one tertiary set of data (1 value = difference across any 'skipped' primary values).

Nothing skipped example:
1.1
1.2	.1
1.3	.1
1.4	.1

Open in new window


One value skipped example:
1.1
1.2 X	.1
1.3	.1	.2
1.4	.1

Open in new window


Two values skipped example:
1.1
1.2 X	.1
1.3 X	.1
1.4	.1	.3

Open in new window

0
aikimark
Asked:
aikimark
  • 10
  • 8
  • 2
1 Solution
 
Scott McDaniel (Microsoft Access MVP - EE MVE )Infotrakker SoftwareCommented:
I'm not sure what you're asking. Are you asking about the best way to do this, or which of those 3 examples is the "best", or ...
0
 
aikimarkAuthor Commented:
@LSM

This data will be displayed at the end of each business day  for five sites.  Each site will process multiple patients during the day.  Right now, I'm trying to make the quality control person's task as efficient and pleasant as possible.  My initial thought was that the second and third 'column' data values would be easier to understand if they were connected with lines, indicating to which first column values they pertain.  I was also going to add some color to draw the QC person's eyes to the exceptional patients.

I could go 'old school' and use VB drawing and printing statements, but thought that there might be better options to consider.
0
 
Scott McDaniel (Microsoft Access MVP - EE MVE )Infotrakker SoftwareCommented:
I see. To me, columnar data always seems more tidy and efficient, and people naturally understand it better. The more you can "stack" the relevant information on top of each other, the better it is for most to understand. So if Column 4 is the more important column, then be sure that Column4 is always in (basically) the same place.

Or perhaps reverse the ordering so that Column 4 is the first column, and the derivatives are to the right.

Shading helps, but I don't think that's really an option in this case.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
RobSampsonCommented:
If you're going the table format route, you can write HTML on the fly to present data in a standard HTML table.  I've written pleny of programs in VBScript that write the body of an HTA based on the data that needs presenting, so I could help you there.

Where is the data coming from in the first place though?  Is there something native to its environment that you could use?

While I haven't tried it yet, you should be able to build DHTML code into an HTA to have a decent presentation, something like this:
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

Or you could building collapsable branches like this:
http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm

Regards,

Rob.
0
 
aikimarkAuthor Commented:
I was thinking about something with lines and boxes.  (see below)

The problem is that that the default layout of tables is same line for cells in different columns.  I really want to offset the second column cells so that they are physically between the cells in the first column.
layout1.jpg
0
 
RobSampsonCommented:
OK, well in a table structure you could utilise the "merging" of cells to have the "offset" effect, in which you could have each real cell actualy consist of four merged cells, and the branches offset by two cells.

The lines between them could be an issue, but I'm yet to try anything in practice.

Where is the data coming from?  Is it structured?  Do we know how many columns there will be?

Rob.
0
 
aikimarkAuthor Commented:
@Rob

This is coming from a vendor database.  There is a set of four 'included' columns (boolean) and four sets of data values associated with items in the first set.  These represent spine segments that are scanned.  I do a decent job retrieving the relevant rows and iterating the columns in the recordset.  I can't replace the program code with SQL.  The second and (optional) third columns are strictly calculated values.

This question is about rendering a graphic representation of the data in a way that is easy to comprehend.
0
 
RobSampsonCommented:
I tried mocking up something using a table cell structure, but it hasn't worked.  It produces a far too complex mix of spanned cells.

I have found this, which may be more useful:

Dragable DHTML Flowchart
http://www.planet-source-code.com/vb/scripts/ShowCode.asp?lngWId=4&txtCodeId=8968

But actually, I also found this, which looks easier:
http://www.htmlforums.com/css/t-flowchart-using-css-85999.html

The code generates the following when placed in an HTA.

Flowchart example
That could be coded on the fly during the data gathering stage.

Regards,

Rob.
0
 
aikimarkAuthor Commented:
very interesting, Rob
0
 
RobSampsonCommented:
I haven't looked at it in depth, but tomorrow I'll see if I can play around with it and get the "double lines" between boxes.

Rob.
0
 
RobSampsonCommented:
I just saw something else that presented an idea that should be easier to implement.  We could use a normal table structure, but for the the lines, use a series of images that "join" the text boxes.

What are your thoughts on that for the structure that you've shown?

Rob.
0
 
aikimarkAuthor Commented:
The thing I was trying to accomplish (appearance wise) was to have the second column cells appear half way between the first column cells (vertically).
0
 
RobSampsonCommented:
Right, I had a play with the first link I posted to:
Dragable DHTML Flowchart
http://www.planet-source-code.com/vb/scripts/ShowCode.asp?lngWId=4&txtCodeId=8968

and converted it to a fixed flowchart, and it works very nicely.  Here's the output it produced:
Sample Fixed Boxes
Here's the code behind that:
<head>
<title>Sample Fixed Flowchart</title>
<HTA:APPLICATION 
     APPLICATIONNAME="Sample Fixed Flowchart"
     BORDER="thin"
     SCROLL="no"
     SINGLEINSTANCE="yes"
     WINDOWSTATE="normal"
>
</head>

<STYLE>
v\:* {behavior:url(#default#VML);}
}

.Box
{
	border:outset thin navy;
	position:absolute;
	text-align:center;
	width:100px;
	height:100px;
	color:maroon;
}

</STYLE>

<script language="VBScript">

Sub Window_onLoad
	intWidth = 700
	intHeight = 500
	Me.ResizeTo intWidth, intHeight
    Me.MoveTo ((Screen.Width / 2) - (intWidth / 2)),((Screen.Height / 2) - (intHeight / 2))
End Sub

</script>

<SCRIPT LANGUAGE=javascript>
var sDragItem = "";
var iClickOffsetX = 0;
var iClickOffsetY = 0;

function OnLoad(){
	DrawConnections();
}

function Box(id){
	var e = document.getElementById(id);
	if (e == null) return;
	
    var x = 0
    var y = 0;
    for(var p=e; p&&p.tagName!='BODY'; p=p.offsetParent){
      x += p.offsetLeft;
      y += p.offsetTop;
    }

	var w = e.offsetWidth;
	var h = e.offsetHeight;
	this.w = w;
	this.h = h;
    this.x = x;
    this.y = y;
	
	//clock wise scheme
	//1_2
	//4_3

	//1) top-left
    this.x1 = x;
    this.y1 = y;
    
    //1_2) top-left to top-right midpoint
    this.x1_2 = x+(w/2);
    this.y1_2 = y;
    
    //2) top-right
    this.x2 = x+w;
    this.y2 = y;
    
	//2_3) top-right - bottom-right midpoint
    this.x2_3 = x+w;
    this.y2_3 = y+(h/2);
    
	//3) bottom-right
    this.x3 = x+w;
    this.y3 = y+h;
    
    //3_4) bottom-right to bottom-left midpoint
    this.x3_4 = x+(w/2);
    this.y3_4 = y+h;
    
    //4) bottom-left
    this.x4 = x;
    this.y4 = y+h;
    
    //4_1) bottom-left to top-left midpoint
    this.x4_1 = x;
    this.y4_1 = y+(h/2);
    
}

function Connect(id,sId1,sId2){
	//debugger;
	
	var oBox1 = new Box(sId1);
	var oBox2 = new Box(sId2);
	var iHandle = 10;
	
	if (oBox1.x1 > oBox2.x2){
		//box 1 is right of box 2
		DrawLine("",oBox1.x4_1,oBox1.y4_1,oBox1.x4_1-iHandle,oBox1.y4_1);
		DrawLine("",oBox2.x2_3,oBox2.y2_3,oBox2.x2_3+iHandle,oBox2.y2_3);
		DrawLine(id,oBox1.x4_1-iHandle,oBox1.y4_1,oBox2.x2_3+iHandle,oBox2.y2_3);		
	}else if (oBox1.x2 < oBox2.x1){
		//box 1 is left of box 2
		DrawLine("",oBox1.x2_3,oBox1.y2_3,oBox1.x2_3+iHandle,oBox1.y2_3);
		DrawLine("",oBox2.x4_1,oBox2.y4_1,oBox2.x4_1-iHandle,oBox2.y4_1);
		DrawLine(id,oBox1.x2_3+iHandle,oBox1.y2_3,oBox2.x4_1-iHandle,oBox2.y4_1);
		
	}else if (oBox1.y1 > oBox2.y3){
		//box 1 is at the bottom of box 2
		DrawLine("",oBox1.x1_2,oBox1.y1_2,oBox1.x1_2,oBox1.y1_2-iHandle);
		DrawLine("",oBox2.x3_4,oBox2.y3_4,oBox2.x3_4,oBox2.y3_4+iHandle);
		DrawLine(id,oBox1.x1_2,oBox1.y1_2-iHandle,oBox2.x3_4,oBox2.y3_4+iHandle);
		
	}else if (oBox1.y3 < oBox2.y1){
		//box 1 is at the top of box 2
		DrawLine("",oBox1.x3_4,oBox1.y3_4,oBox1.x3_4,oBox1.y3_4+iHandle);
		DrawLine("",oBox2.x1_2,oBox2.y1_2,oBox2.x1_2,oBox2.y1_2-iHandle);
		DrawLine(id,oBox1.x3_4,oBox1.y3_4+iHandle,oBox2.x1_2,oBox2.y1_2-iHandle);
	}else{
		//alert("condition not met")
	}

}

function DrawLine(id,x1,y1,x2,y2){
	var f=document.createElement('v:line');
	if (id!=""){
		var sScript = '';
	}else{
		var sScript = '';
	}
	
	var namespaces = document.namespaces;
	if(namespaces) {
		namespaces.add("v", null, null);
	}
	
	var f=document.createElement('<v:line ' + sScript + '>');
	var s=document.createElement('v:stroke');
	s.endcap="Round";
	f.appendChild(s);
	f.id="line" + id;
	f.strokecolor = "gray";
	f.fillcolor="red";
	f.strokeweight = '3px';
	f.style.position = 'absolute';
	f.zIndex = 1;
	f.from = x1+","+y1;
	f.to = x2+","+y2;
	idOutput.appendChild(f);	
}

function DrawOval(x,y){
	var w=document.createElement('v:oval');
	w.style.position = 'absolute';
	w.zIndex = 1;
	w.fillcolor="white";
	w.strokecolor="green";
	w.strokeweight = 2;
	w.style.width = 6;
	w.style.height = 6;
	w.style.left = x-(6/2);
	w.style.top = y-(6/2);
	idOutput.appendChild(w);
}

function DrawConnections(){
	idOutput.innerHTML = "";
	
	var oConnections = new Array();
	oConnections[0] = Array(1,"Test1","Test4")
	oConnections[1] = Array(2,"Test2","Test4")
	oConnections[2] = Array(3,"Test2","Test5")
	oConnections[3] = Array(4,"Test3","Test5")

	for (var i=0;i<oConnections.length;i++){
		Connect(oConnections[i][0],oConnections[i][1],oConnections[i][2]);
	} 

}
</SCRIPT>

<BODY onload="OnLoad()">

<div id=idOutput style="position:absolute; top:0px; left:0px;"></div>

<div id=Test1 unselectable="on" style="top:50px;left:50px;" class=Box>
	Box 1
</div>

<div id=Test2 unselectable="on" style="top:200px;left:50px;" class=Box>
	Box 2
</div>

<div id=Test3 unselectable="on" style="top:350px;left:50px;" class=Box>
	Box 3
</div>

<div id=Test4 unselectable="on" style="top:125px;left:250px;" class=Box>
	Box 4
</div>

<div id=Test5 unselectable="on" style="top:275px;left:250px;" class=Box>
	Box 5
</div>

</BODY>
</html>

Open in new window



Basically, this is the size of the form:
      intWidth = 700
      intHeight = 500

This is the size of the boxes:
      width:100px;
      height:100px;

The absolute positioning of the boxes is given by the
style="top:50px;left:50px;"

within each DIV, and the text in the box is also within those DIV tags.

Finally, the lines between the boxes are defined by
      var oConnections = new Array();
      oConnections[0] = Array(1,"Test1","Test4")
      oConnections[1] = Array(2,"Test2","Test4")
      oConnections[2] = Array(3,"Test2","Test5")
      oConnections[3] = Array(4,"Test3","Test5")

So, all in all, that's pretty straightforward in terms of generating that code dynamically, as there isn't much to change.

I hope that helps.

Regards,

Rob.
0
 
aikimarkAuthor Commented:
wonderful.  Since VML is deprecated, do you know of an SVG implementation?
0
 
RobSampsonCommented:
VML still runs in IE9, but I'll have a crack at converting it to SVG for you.

Rob.
0
 
RobSampsonCommented:
Hi, I have IE8, and can't get SVG to work in it.  I just found out that IE8 or less did not provide native SVG support.  You will therefore only be able to use SVG if you run IE9 or greater.  If you *do* run that exclusively, I could install IE9 and convert it....

I was using the VML to SVG Migration Guide here to try it:
http://www.microsoft.com/download/en/details.aspx?id=5224

Regards,

Rob.
0
 
RobSampsonCommented:
I just tried the sample at the bottom of that document in a HTA with IE9, and this line caused an error:
mySvg = document.createElementNS(svgNS,"svg");

which is the same I got on IE8.  I don't know enough about javascript, or SVG, but I can't find anything about alternatives for IE.

Regards,

Rob.
0
 
aikimarkAuthor Commented:
@Rob

I've use Chrome and have IE7.  I think this client uses IE8.  According to the Microsoft forums, SVG support was supposed to have been included with IE8.  I'm disappointed that it wasn't.

I think I'll just render something simple (and sub-optimal) until the browsers catch up or HTML5 replaces SVG (rumored).

Your VML comment is the closest to achieving what I want to show the user, so I'll accept that as the solution.  Thanks.
0
 
aikimarkAuthor Commented:
What I was looking for.  Thanks.
0
 
RobSampsonCommented:
No problem. Thanks for the grade.  If you need help transferring your data into the raw code, let me know.

Regards,

Rob.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 10
  • 8
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now