You may have seen web pages that include a horizontal bar graph showing responses to a questionaire or other numeric results without the use of a graphing tool. This article will demonstrate how to build such a graph using html and a dataset.
By: John Kilgo Date: July 28, 2003 Download The Code.
Printer Friendly Version
It really is not difficult to create a horizontal bar graph using an HTML table. All you need to do is compute a percentage of a total for each item and then set
We will do all the computations in a code behind file (bargraph.aspx.vb) Which means we must also build out. To Accomodate this we include on a ... in our .aspx file shown below. In our code behind file we will, at the end, set the InnerHtml property of the Div to produce all of the HTML for the .aspx page. The code for BarGraph.aspx is shown below without any further EXPLANATION.
<% @ Page language = "vb" autoeventwireup = "false" src = "bargraph.aspx.vb" inherits = "dotnetjohn.bargraph"%> bargraph </ title> <meta name =" generator "content =" Microsoft Visual Studio .NET 7.1> <meta name = "code_language" content = "Visual Basic .NET 7.1 "> <meta name = vs_defaultClientScript content =" JavaScript "> <meta name = vs_targetSchema content =" http://schemas.microsoft.com/intellisense/ie5 "> </ head> <body MS_POSITIONING =" GridLayout "> <form ID = "form1" method = "post" runat = "server"> </ form> <div id = "showtable" runat = "server"> ur table Appears here </ div> </ body> </ html> to make our graph a little more interesting we will color code the bars. We will (arbitrarily) set 125 as the maximum UnitsInStock for any product and base our percentage on it. in other words, if there 25 units in stock of a certain product, The Colored <TD> Will Have A Width of 20% (25/125) * 100. Any Product with a Percentage of Less Than 20% Will Be Colored R ED, Products with Percentages Between 20% and 80% Will Be Blue, and Products with a Percentage over 80% Will Be in Green.</p>
<p>..................... ..</p>
<p>Imports System.DataImports System.Data.SqlClientImports System.ConfigurationNamespace DotNetJohn Public Class BarGraph Inherits System.Web.UI.Page Private Sub Page_Load (ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Dim objConn As New SqlConnection (ConfigurationSettings.AppSettings ( "NorthwindConnection")) Dim strSql As String = "Select ProductName, UnitsInStock From Products Order By ProductName" Dim da As New SqlDataAdapter (strSql, objConn) Dim ds As New DataSet () da.Fill (ds, "Products") This next section Just Establishes Our HTML Table and Defines The Table HEADER.</p>
<p>DIM strHtml as string strntml = "<table width = '80% 'border =' 1 '>" strHtml & = "<TD>" strHtml & = "<TD> ProductName </ td> <td> percentage of 125 | Red <20% | Blue 20-80% | Green> 80% | "strHtml & =" </ td> <TD> UnitsSinstock </ TD> "strHtml & =" </ TR> "</p>
<p>This last section is where most of the work gets done to produce our bar graph. IntValue is the percentage of the total (125) that gets plotted in color. IntBlank is the right-most portion of the graph and is the difference between 100 and intValue. We then start the body of the table. The first <td> contains the product name. Within the the next <td> we have an embedded table containing intValue, color coded, and intBlank colorless. In that section of code we check The value of intValue. if IT red. if IT red. If IT GREATER THAN 80 We Color It Blue. we might want to do something like this to show what the red product s beings re-stocked and that the green items may be overstocked and we might want to hold a sale on these items. We then finish out the table with the actual UnitsInStock count (the actual count, not a percentage). Finally we set ShowTable's InnerHtml to The strHtml Variable That We since the code behind file . Remember That "ShowTable" WAS The ID We Gave the <div> Tag on the .aspx page. We can do this becault we include the runat = "server" attribute in the <div> tag on the .aspx page.</p>
<p>DIM DR AS DATAROW DIM INTVALUE, INTBLANK AS INTEGER for Each Dr in Ds.Tables ("Products"). Rows INTVALUE = 100 * (DR ("UnitsInstock") / 125) INTBLANK = 100 - INTVALUE STHTML & = "<TR> <TD Width = '30% '> & DR ("ProductName") & "</ td>" & _ "<td width = '60%> <Table Width =' 100%> <TR>" IF INTVALUE <20 THEN STRHTML & = "<TD Width =" & INTVALUE.TOSTRING & "% BGCOLOR = Red>" elseif intValue> 80 Then strHTML & = "<Td Width =" & INTVALUE.TOSTRING & "% BGCOLOR = Green> "Else strHtml & =" <Td Width = "& INTVALUE.TOSTRING &"% BGCOLOR = Blue> "Endiff" "Endiff" <TD Width = "&" & _ "< / TD> "& _" </ tr> </ table> </ td> "& _" <td width = 10%> "& DR (" UnitsInstock "). Tostring &" </ td> </ tr> "Next strHtml & =" </ table> "showtable.innerhtml = strHtml end Sub End Classend Namespacei Hope You Have Learned A New Techinque Yo U CAN PUT IN You Bag in Case You NEED CYCLING THROUGH A DATASET USING THE ROWS Collection. Best of Luck.</p>
<p>You May Run The Program Here.you May Download The Code Here.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-110048.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="110048" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.036</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'TZ_2Bj_2F3krriI0_2F4GMkaE6lmjr7N3xg5QedVjj_2F7m6Qskgwf_2FLOrrNWjwpkm5lLMh7rA28s9EC4L93_2BJricLz5Pg_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script> | 
