Solved

javascript simple horizontal bar graph

Posted on 2011-02-24
2
686 Views
Last Modified: 2012-05-11
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
Comment
Question by:VapiSoft
2 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 34976838
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
 

Author Closing Comment

by:VapiSoft
ID: 34976887
Exactly.
Thank you very much.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

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