Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 703
  • Last Modified:

javascript simple horizontal bar graph

Hi,
I have a grid table with data.
I want to add a column that shows horizontal bar graphs as in the picture.
I don't want a large library (I am already using "FusionChartsFree" for graphs).
I supose it can be dont with a simple script.
ScreenShot-4776.jpg
0
VapiSoft
Asked:
VapiSoft
1 Solution
 
Gurvinder Pal SinghCommented:
something like this?
you can change the color if you want to:)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script>
		function showGraph()
		{
			var innerDiv = document.getElementById("div1").getElementsByTagName("div")[0];
			innerDiv.style.backgroundColor = "pink";
			innerDiv.style.backgroundColor = "pink";
			innerDiv.style.width = innerDiv.innerHTML + "px";
			innerDiv.innerHTML = innerDiv.innerHTML + "%"


			var innerDiv = document.getElementById("div2").getElementsByTagName("div")[0];
			innerDiv.style.backgroundColor = "pink";
			innerDiv.style.backgroundColor = "pink";
			innerDiv.style.width = innerDiv.innerHTML + "px";
			innerDiv.innerHTML = innerDiv.innerHTML + "%"


			var innerDiv = document.getElementById("div3").getElementsByTagName("div")[0];
			innerDiv.style.backgroundColor = "pink";
			innerDiv.style.backgroundColor = "pink";
			innerDiv.style.width = innerDiv.innerHTML + "px";
			innerDiv.innerHTML = innerDiv.innerHTML + "%"


			var innerDiv = document.getElementById("div4").getElementsByTagName("div")[0];
			innerDiv.style.backgroundColor = "pink";
			innerDiv.style.backgroundColor = "pink";
			innerDiv.style.width = innerDiv.innerHTML + "px";
			innerDiv.innerHTML = innerDiv.innerHTML + "%"



		}
	</script>
	<style>
		body div
		{
			width:100px;
			height:30px;
			background-color:#fff;
			border:1px solid black;
		}
		div div
		{
			border:1px none black;
			border-right:1px solid black;
			height:100%;
		}

	</style>
</HEAD>

<BODY onload="showGraph()">
	<div id="div1"><div>60</div></div>
	<div id="div2"><div>40</div></div>
	<div id="div3"><div>60</div></div>
	<div id="div4"><div>80</div></div>
</BODY>
</HTML>

Open in new window

0
 
VapiSoftAuthor Commented:
Exactly.
Thank you very much.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now