Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

javascript simple horizontal bar graph

Posted on 2011-02-24
2
688 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

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

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

792 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