Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Recommendations for data rendering

Posted on 2012-03-16
20
Medium Priority
?
528 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 85
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 46

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 85
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
Get your Conversational Ransomware Defense e‑book

This e-book gives you an insight into the ransomware threat and reviews the fundamentals of top-notch ransomware preparedness and recovery. To help you protect yourself and your organization. The initial infection may be inevitable, so the best protection is to be fully prepared.

 
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 46

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 46

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 46

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
 
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 46

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 2000 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 46

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 46

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 46

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Microsoft Access is a place to store data within tables and represent this stored data using multiple database objects such as in form of macros, forms, reports, etc. After a MS Access database is created there is need to improve the performance and…
Microsoft Access has a limit of 255 columns in a single table; SQL Server allows tables with over 255 columns, but reading that data is not necessarily simple.  The final solution for this task involved creating a custom text parser and then reading…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

879 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