?
Solved

Display graphic instead of number in a table cell

Posted on 2012-08-22
6
Medium Priority
?
532 Views
Last Modified: 2012-08-23
I have an ASP page that I have that uses an excel file to pull data from and I display the data on the page in a table. in the table i show number of quartly alarms as a long decimal which I would like to have as a percent but more over i need to not show the number but instead show a picture. for example if the number is 20 or greater i want to show the green.jpg if the number in the particular cell is 10 to 20 I want to show yellow.jpg and if the number is less than 10 then show red.jpg. I have copies the code belwo I currently use to make the table and populate it with the data from the excel file.

' create a recordset named rs with colums for Campus with columns for Campus, TotalAlarms, TargetAlarms and notes.  
'The recordset should be grouped by the Campus or CampusID and sumed on sum(totalAlarms), Min(TargetAlarms) and Min(notes).  
'Or if you are just uploading an excel sheet, you can have the columns already set.
dim circle_image
	sql = "SELECT * FROM tblData ;"
	
			set RS = server.createobject("adodb.recordset")
			RS.open sql,Conn,adOpenForwardOnly,adLockReadOnly
	'Response.Write sql

%>
			   <strong>Alarms Per Hour
</strong>
<table width="300" border="1" cellspacing="0" cellpadding="3">
  <tr>
    <td>Plant</td>
    <td>Alarms Q1</td>
    <td>Alarms Q2</td>
    <td>Alarms Q3</td>
    <td>Alarms Q4</td>
    <td>Comments</td>
    <td>Status</td>
    
  </tr>
  
  <%
  if not rs.bof or not rs.eof then
  do until rs.eof
  %>
    <tr>
     <td><%=rs.fields(0)%>&nbsp;</td>
    <td><%=rs.fields(1)%>&nbsp;</td>
    <td><%=rs.fields(2)%>&nbsp;</td>
    <td><%=rs.fields(3)%>&nbsp;</td>
    <td><%=rs.fields(4)%>&nbsp;</td>
    <td><%=rs.fields(10)%>&nbsp;</td>    
    
    
    <%
    Quarter=rs.fields(11)
    if Quarter =1 then
	totAlarms=rs.fields(1)
	else if Quarter =2 then
	totAlarms=rs.fields(2)
	else if Quarter =3 then
	totAlarms=rs.fields(3)
	else if Quarter =4 then
	totAlarms=rs.fields(4)

	end if
	end if
	end if
	end if
	
	alarmTarget=rs.fields(5)
	'alarmPercent=cdbl(totAlarms)/cdbl(alarmTarget)
	if totAlarms<>"" then
	if alarmTarget<>"" then
	if cdbl(totAlarms) <> 0 then
    if cdbl(alarmTarget) <> 0 then
    
            alarmPercent=cdbl(totAlarms)/cdbl(alarmTarget)
          if alarmPercent >.2 then
            circle_image="dotgreen.gif"
        elseif alarmPercent >0  and alarmPercent <=.2 then
            circle_image= "dotyellow.gif"
        else
            circle_image="dotred.gif"
       end if
    
   else
  alarmPercent="N/A"
end if
end if 
end if 
end if 
	%>
    
    <td><img  src="images/<%=circle_image%>" width="32" height="32"></td></tr>
   
  <%
  rs.movenext
  loop
 
  
  rs.close
  
  end if
  
  %>  

Open in new window

0
Comment
Question by:jlcannon
  • 3
  • 3
6 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38322238
What problem are you having because at first glance it looks good.   I saw where you have a slight table problem and adjusted it with notes.

<%
' create a recordset named rs with colums for Campus with columns for Campus, TotalAlarms, TargetAlarms and notes.  
'The recordset should be grouped by the Campus or CampusID and sumed on sum(totalAlarms), Min(TargetAlarms) and Min(notes).  
'Or if you are just uploading an excel sheet, you can have the columns already set.
dim circle_image
	sql = "SELECT * FROM tblData ;"
	
			set RS = server.createobject("adodb.recordset")
			RS.open sql,Conn,adOpenForwardOnly,adLockReadOnly
	'Response.Write sql

%>
			   <strong>Alarms Per Hour
</strong>
<table width="300" border="1" cellspacing="0" cellpadding="3">
  <tr>
    <td>Plant</td>
    <td>Alarms Q1</td>
    <td>Alarms Q2</td>
    <td>Alarms Q3</td>
    <td>Alarms Q4</td>
    <td>Comments</td>
    <td>Status</td>
    
  </tr>
  
  <%
  if not rs.bof or not rs.eof then
  do until rs.eof
  %>
    <tr>
     <td><%=rs.fields(0)%>&nbsp;</td>
    <td><%=rs.fields(1)%>&nbsp;</td>
    <td><%=rs.fields(2)%>&nbsp;</td>
    <td><%=rs.fields(3)%>&nbsp;</td>
    <td><%=rs.fields(4)%>&nbsp;</td>
    <td><%=rs.fields(10)%>&nbsp;</td>    
    
    
    <%
    Quarter=rs.fields(11)
    if Quarter =1 then
	totAlarms=rs.fields(1)
	else if Quarter =2 then
	totAlarms=rs.fields(2)
	else if Quarter =3 then
	totAlarms=rs.fields(3)
	else if Quarter =4 then
	totAlarms=rs.fields(4)

	end if
	end if
	end if
	end if
	
	alarmTarget=rs.fields(5)
	'alarmPercent=cdbl(totAlarms)/cdbl(alarmTarget)
	if totAlarms<>"" then
	if alarmTarget<>"" then
	if cdbl(totAlarms) <> 0 then
    if cdbl(alarmTarget) <> 0 then
    
            alarmPercent=cdbl(totAlarms)/cdbl(alarmTarget)
          if alarmPercent >.2 then
            circle_image="dotgreen.gif"
        elseif alarmPercent >0  and alarmPercent <=.2 then
            circle_image= "dotyellow.gif"
        else
            circle_image="dotred.gif"
       end if
    
   else
  alarmPercent="N/A"
end if
end if 
end if 
end if 
	%>
    
    <td><img  src="images/<%=circle_image%>" width="32" height="32"></td><!-- moved tr after loop-->
   
  <%
  rs.movenext
  loop
 %>
 </tr>
 </table><!-- closed table-->
  <%
  rs.close
  
  end if
  
  %>  

Open in new window

0
 

Author Comment

by:jlcannon
ID: 38322521
well The current code was doing exactly what the 1st thought was and that was to show the numbers in the cells and at the end of the row show the colored jpg for the current quarter. but now I want to change it so that instead of showing the numbers for each quarter I want to take those numbers and based on what they are show the colored jpg where the number is at currently in the code as it site now. so lets say for alarms Q1 the number is 8 instead of showing the 8 I want to show the red.jpg. thats what I want to do.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38322583
I looks like the very last column of your table has the below code where variable, circle_image is your image name.
 
  <td><img  src="images/<%=circle_image%>" width="32" height="32"></td><!-- moved tr after loop-->

Open in new window

Then I see above that you have code to set the variable, circle_image.
if cdbl(alarmTarget) <> 0 then
    
            alarmPercent=cdbl(totAlarms)/cdbl(alarmTarget)
          if alarmPercent >.2 then
            circle_image="dotgreen.gif"
        elseif alarmPercent >0  and alarmPercent <=.2 then
            circle_image= "dotyellow.gif"
        else
            circle_image="dotred.gif"
       end if
    
   else
  alarmPercent="N/A"

Open in new window

Is the image not showing up?  Try putting in a static image in place of the variable to test that the image is there.  Also, maybe upload a black dot and start the code with circle_image="dotblack.gif".  Place that just above the code, "if cdbl(alarmTarget) <> 0 then"
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:jlcannon
ID: 38322593
I am sorry if I am confusing this. What i posted is working fine. it lists all the numbers in a table for each quarter then at the end there is the column where I put the colored jpg image. and all that is working great. but what I want to do is make it so the colored image is not out at the end in its own column, I want ot put it in the cells where I am putting the numbers now.
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 38322697
That makes more sense.  I don't know what your field names actually are so I made them up.  Replace with the real thing.  Basically, I created a function where you pass 2 variables.  The total and goal.

Also, make up a clear gif or another color so it can be displayed if error or nothing matches.

<%
' create a recordset named rs with colums for Campus with columns for Campus, TotalAlarms, TargetAlarms and notes.  
'The recordset should be grouped by the Campus or CampusID and sumed on sum(totalAlarms), Min(TargetAlarms) and Min(notes).  
'Or if you are just uploading an excel sheet, you can have the columns already set.
dim circle_image
	sql = "SELECT * FROM tblData ;"
	
			set RS = server.createobject("adodb.recordset")
			RS.open sql,Conn,adOpenForwardOnly,adLockReadOnly
	'Response.Write sql

%>
			   <strong>Alarms Per Hour
</strong>
<table width="300" border="1" cellspacing="0" cellpadding="3">
  <tr>
    <td>Plant</td>
    <td>Alarms Q1</td>
    <td>Alarms Q2</td>
    <td>Alarms Q3</td>
    <td>Alarms Q4</td>
    <td>Comments</td>
    <td>Status</td>
    
  </tr>
  
  <%
  if not rs.bof or not rs.eof then
  do until rs.eof
  %>
    <tr>
     <td><%=rs.fields(0)%>&nbsp;</td>
    <td><img  src="images/<%=getDot(rs.fields("q1Alarms"),rs.fields("q1Target"))%>" width="32" height="32">&nbsp;</td>
     <td><img  src="images/<%=getDot(rs.fields("q2Alarms"),rs.fields("q2Target"))%>" width="32" height="32">&nbsp;</td>
    <td><img  src="images/<%=getDot(rs.fields("q3Alarms"),rs.fields("q3Target"))%>" width="32" height="32">&nbsp;</td>
    <td><img  src="images/<%=getDot(rs.fields("q4Alarms"),rs.fields("q4Target"))%>" width="32" height="32">&nbsp;</td>
    <td><%=rs.fields(10)%>&nbsp;</td>    
    
    
    <%
    Quarter=rs.fields(11)
    if Quarter =1 then
	totAlarms=rs.fields(1)
	else if Quarter =2 then
	totAlarms=rs.fields(2)
	else if Quarter =3 then
	totAlarms=rs.fields(3)
	else if Quarter =4 then
	totAlarms=rs.fields(4)

	end if
	end if
	end if
	end if
	
	alarmTarget=rs.fields(5)
	'alarmPercent=cdbl(totAlarms)/cdbl(alarmTarget)
	
	%>
    
    <td><img  src="images/<%=circle_image%>" width="32" height="32"></td><!-- moved tr after loop-->
   
  <%
  rs.movenext
  loop
 %>
 </tr>
 </table><!-- closed table-->
  <%
  rs.close
  
  end if
  
function getDot(totAlarms, alarmTarget )
	circle_image="dotclear.gif"
  	if totAlarms<>"" then
		if alarmTarget<>"" then
			if cdbl(totAlarms) <> 0 then
    			if cdbl(alarmTarget) <> 0 then
    
            		alarmPercent=cdbl(totAlarms)/cdbl(alarmTarget)
          			if alarmPercent >.2 then
            			circle_image="dotgreen.gif"
        				elseif alarmPercent >0  and alarmPercent <=.2 then
            			circle_image= "dotyellow.gif"
        			else
            		circle_image="dotred.gif"
       				end if    
  'alarmPercent="N/A"
				end if
			end if 
		end if 
	end if 
getDot=circle_image
end function
  
  %>  

Open in new window

0
 

Author Closing Comment

by:jlcannon
ID: 38324670
that is perfect. Thank you.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

864 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