HTML Vertical Bar Chart

Re: width of bars [modified]

2:25 8 May '07

That is IE Default Setting that disables the printing of Background Colors of HTML Objects. To changes that in IE 6, go to "Tools" Menu of IE -> Select "Internet Options..." -> Select "Advanced" Tab
Now scroll down to "Printing" Section and ensure that checkbox for "Print Background Color and Images" is checked. We must have the equivalent for them in other good browsers.

If you want to force that with Script add the following code in the HTML part of the landing page:

<script language="vbscript">
			on error resume next
			'Change IE Print Settings to Print Background Color and Images
			Set WSHShell = CreateObject("WScript.Shell")
			WSHShell.RegWrite "HKCU\Software\Microsoft\Internet Explorer\Main\Print_Background", "yes"
			Set WSHShell = Nothing
		</script>

Hope it helps.

Thanks
NS

width of bars

scorpioyas

3:09 24 Apr '07

hey v.nice work
dear can you tell me how to reduce the width of bars?
i am retreving the values from database which is usually like 6 to 8 digits values,,,,
the single bar graph logic is working fine,,
but my graph width is increasing when i am having double bar chart.

tdwd = parseInt((chartwidth-(HorX.length))/HorX.length);

for single bar it is ok i can change width of bar if i add value in tdwd,,,but it's not happening for triple bar,,,it's taking width how much the text length is....

can you help me in this??
thank you.
regards..

Neeraj Saluja

3:14 24 Apr '07

Hi,

For the quick fix I can suggest you alternate way. Rather that displaying the X-Axis text in Horixontal way, we can display the text in

vertical way

To do this we need to change two lines of code and they are ( line numbers with reference to demo) :
1. Line Number 118
Old : Content += "<td align=center><font face=arial size='-2' color=white>" + HorX[i] + "</font></td>";
New : Content += "<td align=left style='writing-mode:tb-rl;'><font face=arial <b>size='-1'</b> color=white>" + HorX[i] + "</font></td>";

2. Line Number 129
Old : newWin1 = open('','chart1',"width=" + (chartwidth + 40) + ",height=300,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");
New : newWin1 = open('','chart1',"width=" + (chartwidth + 40) + ",height=350,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");

Note : Changes highlighted in bold. In Second line change the only thing that we are changing is height, so keep the height as per the need.

Hope it helps.
Thanks
NS

modified on Thursday, March 27, 2008 1:00 AM

HTML Horizontal Bar Chart

triple bar chart or tetra(4 lines)

2:40 9 Apr '07

On the similar lines, I have posted another article for genarating Horizozntal Bar Chart. Click here[^] for accessing the same. Thanks,NS
Sign In·View Thread·PermaLink	2.00/5 (1 vote)

scorpioyas

2:19 9 Apr '07

hi nice work can you tell me will this work for triple bar chart or tetra bar chart... thank you.
Sign In·View Thread·PermaLink

Re: triple bar chart or tetra(4 lines)

2:35 9 Apr '07

Thanks. You can have more bars by modifying this code from the Demo.

if (nSeriesCount == 2)
{
Content+= "<table cellpadding=0 cellspacing=0 border=0 width=" + (tdwd*2/3) + "><tr><td align=center valign=bottom width=50%>"

      if (document.getElementById("chkvaluepoint").checked == true)
            Content+= "<font face=arial size='-2'>" + VerY[i] + "</font>"

   Content+= "<div style='background-color:blue; height:" + h + "px; writing-mode:tb-rl;'></div>"
   Content+= "</td><td align=center valign=bottom width=50%>"
   if (document.getElementById("chkvaluepoint").checked == true)
            Content+= "<font face=arial size='-2'>" + VerY2[i] + "</font>"
     Content+= "<div style='background-color:green; height:" + h2 + "px; '></div>"
     Content+= "</td></tr></table>"
}
else
{     if (document.getElementById("chkvaluepoint").checked == true)
              Content+= "<font face=arial size='-2'>" + VerY[i] + "</font>"
            Content+= "<br><div style='writing-mode:tb-rl; background-color:blue; width:" + (tdwd-5) + "; height:" + h + ";' />"
}

Whats happening here is that if nSeriesCount is Zero, then add a Table with a Single having two TDs. Each TD contains the DIV with appropriate heights h ( Corresponding to Series 1 ) and h2 ( Representing Series 2). Here you can add as many series you want.

Hope it helps.

Thanks,NS

HTML Vertical Bar Chart

23:46 7 Nov '06

Hi Neerja, I am new to javascript.Whati would like to ask is instead of entering values for the x-axis and y-axis in those fields,is it possible to send 2 arrays -1 for labels and another for y-values to the funcion GenerateChart? can u pls help me with the syntax
Sign In·View Thread·PermaLink	1.00/5 (1 vote)

23:59 7 Nov '06

Yes you can use the array of values for X axis and Y axis.

Note in the function GenerateChart(nSeriesType, nSeriesCount),
HorX = new Array();
VerY = new Array();

And later in the same function
vmax = 0;
for(i = 0; i < 24; i++){
if (document.f1.numvalue1[i].value != '' && parseInt(document.f1.numvalue1[i].value) >= 0){
HorX[j] = document.f1.label[i].value;
VerY[j] = document.f1.numvalue1[i].value;
VerY2[j] = document.f1.numvalue2[i].value; if (parseInt(VerY[j]) > vmax){
vmax = parseInt(VerY[j]);
}
if (parseInt(VerY2[j]) > vmax){
vmax = parseInt(VerY2[j]);
}
j++;
}
}

So at the end the values provided by the user in "Label" is stored in HorX array and is used for X Axis and values provided for "Series 1" are strored in VerY array and is used for Y Axis.

Try modifying this function as per your need. If you get some errors on modifying the function, post your code in this forum and we will debug it together.

Thanks,NS

21:58 8 Nov '06

I am sending in the procedure i created using your code.Your example works fine.
Now i have created 3 arrays and hardcoded values into it.How can i now pass values of these arrays -v_HorX1,v_VerY1,v_VerY2 to HorX,VerY,VerY2 in your Generate Chart Function.Please HELP

CREATE OR REPLACE PROCEDURE PMG_TEST_GRAPHS_SP AS

TYPE v_HorX IS TABLE of varchar2(50) INDEX BY BINARY_INTEGER;
TYPE v_VerY IS TABLE of number(17,3) INDEX BY BINARY_INTEGER;

v_HorX1 v_HorX;
v_VerY1 v_VerY;
v_VerY2 v_VerY;

BEGIN
/*
*/

--=======================================================================
--for eg: now i am just hardcoding values to the three arrays
--=======================================================================

for i in 0..24 loop
v_HorX1(i) :='Past';
v_VerY1(i) :=100;
v_VerY2(i) :=200;
end loop;
HTP.BR;

--====================================================================

HTP.P('<html>');

HTP.P('<HEAD>');
HTP.P('<TITLE>Client-Side Vertical Bar Charts</TITLE>');
HTP.P('<script>
var Content;
var vmax;
var chartwidth=800;
var tdwd;

function GenerateChart(nSeriesType, nSeriesCount){
ms = 0;
nc = 0;
if (navigator.appName == "Netscape") nc = 1
if (navigator.appName.indexOf("Microsoft") != -1) ms = 1
HorX = new Array();
VerY = new Array();
VerY2 = new Array();
var j = 0;
vmax = 0;
for(i = 0; i < 24; i++){
if (document.f1.numvalue1[i].value != '' '' && parseInt(document.f1.numvalue1[i].value) >= 0){
HorX[j] = document.f1.label[i].value;
VerY[j] = document.f1.numvalue1[i].value;
VerY2[j] = document.f1.numvalue2[i].value;
if (parseInt(VerY[j]) > vmax){
vmax = parseInt(VerY[j]);
}
if (parseInt(VerY2[j]) > vmax){
vmax = parseInt(VerY2[j]);
}
j++;
}
}

if ( nSeriesType==1 && nSeriesCount ==2 )
chartwidth = (HorX.length * 45);
else
chartwidth = (HorX.length * 33);

if (chartwidth>900)
chartwidth = 900;

if (j == 0)
alert ("No data found.");
else {

tdwd = parseInt((chartwidth-(HorX.length*4))/HorX.length);

Content = "<html><head><title>Column Chart</title></head><body bgcolor=white text=black>";
Content += "";
Content += "";

for (var i = 0; i < HorX.length; i++){
h = parseInt(VerY[i] / (vmax / 200));
h2 = parseInt(VerY2[i] / (vmax / 200));

Content+="";
}

Content += "";
for (i=0; i < HorX.length; i++){
Content += "";
}
Content += "

"
if (nSeriesCount == 2)
{
Content+= "

Content+= "" + VerY[i] + ""
Content+= "

"
Content+= "

Content+= "" + VerY2[i] + ""
Content+= "

"
Content+= "

"
}
else
{
Content+= VerY[i] + "

"
}

Content+="

"
Content+="" + HorX[i] + "

</body></html>";

if (document.getElementById("optShowInSameWindow").checked == true)
document.getElementById("dvChart").innerHTML = Content;
else
{

newWin1 = open('' '',''chart1'',"width=" + (chartwidth + 30) + ",height=320,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");
newWin1.document.write(Content);
newWin1.document.close();
newWin1.focus();
}
}
}

function autofill(){

arrMonths = new Array("Jan 06", "Feb 06", "Mar 06", "Apr 06", "May 06", "Jun 06", "Jul 06", "Aug 06", "Sep 06", "Oct 06", "Nov 06", "Dec 06", "Jan 07", "Feb 07", "Mar 07", "Apr 07", "May 07", "Jun 07", "Jul 07", "Aug 07", "Sep 07", "Oct 07", "Nov 07", "Dec 07");
for (i = 0; i < 24; i++){
document.f1.label[i].value = arrMonths[i];
document.f1.numvalue1[i].value = parseInt(Math.random() * 500);
document.f1.numvalue2[i].value = parseInt(Math.random() * 500);
}
}
</script>');

htp.p('</HEAD>');

htp.p('<body>
<form name="f1">

Autofill with random data
Single Bar chart
Double Bar Chart

<input type="checkbox" name="chkvaluepoint" id="chkvaluepoint" checked>
<label for="chkvaluepoint">
Show values on line</label>
<input type="checkbox" name="chkseparators" id="chkseparators" checked>
<label for="chkseparators">
Line separators</label>
<input type="radio" id="optShowInSameWindow" name="opt">
<label for="optShowInSameWindow">Show Chart in Same Window</label>
<input type="radio" id="optShowInNewWindow" name="opt" checked>

<label for="optShowInNewWindow">Show Chart in New Window</label>

</form>
</body>');

htp.p('</html>');

END;
/

0:17 9 Nov '06

I understand that you want to get the values from database and use it to display the graph. Using just HTML/Javascript it would be tough to connect to database to get the values from database. If you use ASP.NET or java like web development tools, then it would be quite easy for you. Which technology (.NET, java etc) do you want to use? Thanks,NS
Sign In·View Thread·PermaLink

0:20 9 Nov '06

Is it not possible to use pl/sql.Because i am using only PL/SQL and have no experience whatsoever in java or .NET
Sign In·View Thread·PermaLink

0:45 9 Nov '06

Which database ( MY SQL, MS SQL Server, Oracle, MS Access etc ) are you using? And for the front end if you could use any server side scripting language like ASP, ASP.NET, JSP etc then it would be very easy. See the link, it can help to understand how to fetch the data from PL/SQL Stored procs. : http://www.w3schools.com/ado/[^ Just with HTML/Javasript, it is not possible directly. Thanks,NS
Sign In·View Thread·PermaLink

Re: HTML Vertical Bar Chart [modified]

23:02 12 Nov '06

and another 12 rows are in this format

can u explain why out of the 24 rows,12 rows are in this format		<input type="text" size="4" name="label" >	<input type="text" size="4" name="label" ID="Text7">
Sign In·View Thread·PermaLink

23:23 12 Nov '06

You can ignore the ID="Text7 part. Actually when I started, I developed the solution with just 12 boxes using notepad. Later using Microsft Visual Studio IDE, I extended the demo from 12 textboxes to 24 textboxes. and MS IDE created the ID tags automatically.

I am using just the name and not the ID of the HTML Objects, so you can ignore the Id of them.

-- modified at 7:52 Monday 13th November, 2006

Thanks,NS

23:26 12 Nov '06

but if i remove that part from the code i am getting an error as document.f1.numvalue1[] ..is null or not an object. Can you imagine y i am getting such an error. An btw,Thanx for giving me immediate replies,because i am under a lot of pressure to complete this!
Sign In·View Thread·PermaLink

23:53 12 Nov '06

Hey thanx,my graph works now.Instead of passing arrays to the javascript function i assigned the values to the form variables and its working now
Sign In·View Thread·PermaLink

23:58 12 Nov '06

Great !!! Thanks,NS
Sign In·View Thread·PermaLink

0:34 14 Nov '06

The functionality to display the Y Axis scale has been added to the Graph and uploaded in thie article. Thanks,NS
Sign In·View Thread·PermaLink	5.00/5 (1 vote)

Shaheena.kareem

3:50 22 Nov '06

can you please tell me how to modify the code so that the single bar is aligned at the center of the div.for eg - if my x-axis name is long,then the label is aligned to the center but the bar is aligned to the left.please help
Sign In·View Thread·PermaLink	2.00/5 (1 vote)

22:00 22 Nov '06

";
New : Content += "";

2. Line Number 129
Old : newWin1 = open('','chart1',"width=" + (chartwidth + 40) + ",height=300,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");
New : newWin1 = open('','chart1',"width=" + (chartwidth + 40) + ",height=350,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");

Note : Changes highlighted in bold. In Second line change the only thing that we are changing is height, so keep the height as per the need.

Thanks,NS

Hi, It seems to be a bug to me. I think it would take some time to fix this issue completely. But for the quick fix I can suggest you alternate way. Rather that displaying the X-Axis text in Horixontal way, we can display the text in vertical way To do this we need to change two lines of code and they are ( line numbers with reference to demo) : 1. Line Number 118 Old : Content += "		<font face=arial size='-2' color=white>" + HorX[i] + "</font>	align=left style='writing-mode:tb-rl;'><font face=arial size='-1' color=white>" + HorX[i] + "
Sign In·View Thread·PermaLink	5.00/5 (1 vote)