Solved

Recommendations for data rendering

Posted on 2012-03-16
20
519 Views
Last Modified: 2012-03-28
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
Comment
Question by:aikimark
  • 10
  • 8
  • 2
20 Comments
 
LVL 84
ID: 37732619
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
 
LVL 45

Author Comment

by:aikimark
ID: 37732760
@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
 
LVL 84
ID: 37734488
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
 
LVL 65

Expert Comment

by:RobSampson
ID: 37735597
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
 
LVL 45

Author Comment

by:aikimark
ID: 37736049
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
 
LVL 65

Expert Comment

by:RobSampson
ID: 37736114
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
 
LVL 45

Author Comment

by:aikimark
ID: 37736306
@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
 
LVL 65

Expert Comment

by:RobSampson
ID: 37745875
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
 
LVL 45

Author Comment

by:aikimark
ID: 37746808
very interesting, Rob
0
 
LVL 65

Expert Comment

by:RobSampson
ID: 37750235
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 65

Expert Comment

by:RobSampson
ID: 37764442
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
 
LVL 45

Author Comment

by:aikimark
ID: 37768018
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
 
LVL 65

Accepted Solution

by:
RobSampson earned 500 total points
ID: 37769404
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
 
LVL 45

Author Comment

by:aikimark
ID: 37770967
wonderful.  Since VML is deprecated, do you know of an SVG implementation?
0
 
LVL 65

Expert Comment

by:RobSampson
ID: 37774409
VML still runs in IE9, but I'll have a crack at converting it to SVG for you.

Rob.
0
 
LVL 65

Expert Comment

by:RobSampson
ID: 37775103
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
 
LVL 65

Expert Comment

by:RobSampson
ID: 37775993
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
 
LVL 45

Author Comment

by:aikimark
ID: 37776164
@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
 
LVL 45

Author Closing Comment

by:aikimark
ID: 37776167
What I was looking for.  Thanks.
0
 
LVL 65

Expert Comment

by:RobSampson
ID: 37779444
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Using Microsoft Access, learn some simple rules for how to construct tables in a relational database. Split up all multi-value fields into single values: Split up fields that belong to other things into separate tables: Make sure that all record…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now