3D Bar Chart

Create any number of Vertical or Horizontal 3D Bar Charts
Size and colors may be customised for each application
with specified title, line and bar text.

The Script includes application notes and the functional code.
Click the text area to toggle the height.

// Create any number of Vertical or Horizontal 3D Bar Charts
// Size and colors may be customised for each application
// with specified title, line and bar text.

// ***** Application Notes

// ***** The HTML Code
//
// A <DIV> elements must be specified each set of bar charts.
// This <DIV> must be assigned a unique ID name.
// The style position must be 'position:relative;' or 'position:absolute'
// and the size will dictate the overall chart size and scaling.
// e.g.
//  <div id="TstV" style="position:relative;width:500px;height:300px;border:solid black 0px;" ></div>
//  <br>
//  <div id="TstH" style="position:relative;width:500px;height:300px;border:solid black 0px;" ></div>
//

// ***** Defining the Chart Background and Bars
//
// The Chart Background and Bars are defined in dimensioned arrays
//
// Examples:
var VBarAry=[];
// field 0 is an array defining chart background features.
//  sub array field 0 = 3D Depth.                            (digits)
//            field 1 = 3D background color.                 (string)
//            field 2 = main background color.               (string)
//            field 3 = line color.                          (string)
//            field 4 = Title class name.                    (string)
//            field 5 = Title text.                          (string)
//            field 6 = line text class name.                (string)
//            field 7 = an array of the text for each line.  (an array of strings)
//
VBarAry[0]=[15,'#CCFFFF','#00FFCC','gray','titletxtV','3D Vertical Bar Chart','linetxtV',['1','2','3','4','5','6','7','8','9','10']];
// subsequent fields are arrays defining each bar
//  sub array field 0 = the horizontal position.             (digits)
//            field 1 = the bar width.                       (digits)
//            field 2 = the bar height as % of chart height. (string nn% or digits)
//            field 3 = foreground color.                    (string)
//            field 4 = background color.                    (string)
//            field 5 = the bar text class name.             (string)
//            field 6 = the bar text.                        (string)
VBarAry[1]=[30,40,'90%','gray','silver','bartxtV','T e x t 1 90 %'];
VBarAry[2]=[100,55,'40%','#66FFFF','#CCFFFF','bartxtV','T e x t 2 40 %'];
VBarAry[3]=[185,40,'75%','#CC00FF','#FFCCFF','bartxtV','T e x t 3 75 %'];

var HBarAry=[];
// field 0 is an array defining chart background features.
//  sub array field 0 = 3D Depth.                            (digits)
//            field 1 = 3D background color.                 (string)
//            field 2 = main background color.               (string)
//            field 3 = line color.                          (string)
//            field 4 = Title class name.                    (string)
//            field 5 = Title text.                          (string)
//            field 6 = line text class name.                (string)
//            field 7 = an array of the text for each line.  (an array of strings)
//
HBarAry[0]=[30,'#CCFFFF','#00FFCC','gray','titletxtH','3D Horizontal Bar Chart','linetxtH',['1','2','3','4','5','6','7','8','9','10']];
// subsequent fields are arrays defining each bar
//  sub array field 0 = the vertical position.               (digits)
//            field 1 = the bar height.                      (digits)
//            field 2 = the bar width as % of chart height.  (string nn% or digits)
//            field 3 = foreground color.                    (string)
//            field 4 = background color.                    (string)
//            field 5 = the bar text class name.             (string)
//            field 6 = the bar text.                        (string)
HBarAry[1]=[225,40,'90%','gray','silver','bartxtH','Text 1 - 90%'];
HBarAry[2]=[155,25,'40%','#66FFFF','#CCFFFF','bartxtH','Text 2 - 40%'];
HBarAry[3]=[70,40,'75%','#CC00FF','#FFCCFF','bartxtH','Text 3 - 75%'];

// ***** Text
//
// Each Chart may have text elements for the title, each line and each bar
// The text appearance and positioning is specified by class rules.
// e.g.
//  .titletxtV { left:60px;top:5px;width:200px;border:solid black 0px;text-align:center;font-size:18px; }
//  .linetxtV { left:-50px;top:0px;width:40px;border:solid black 1px;text-align:center;font-size:12px; }
//  .bartxtV { left:0px;top:-100px;width:10px;border:solid black 0px;text-align:center;font-size:11px; }
//  .titletxtH { left:60px;top:5px;width:200px;border:solid black 0px;text-align:center;font-size:18px; }
//  .linetxtH { left:0px;top:5px;width:40px;border:solid black 0px;text-align:center;font-size:12px; }
//  .bartxtH { left:20px;top:0px;width:100px;border:solid black 0px;text-align:center;font-size:12px; }
//

// ***** Text Alignment
//
// The position of text elements is forced to absolute
// and the alignment is dictated by the class rule and application.
//
// ** Title
// The title is positioned in the chart as specified by the class rule
//
// ** Line Text
//  Vertical Bar Chart:
//   vertically positioned to the line, horizontally to the left of the chart and offset by the class rule left and top.
//  Horizontal Bar Chart:
//   horizontally positioned to the line, vertically to the bottom of the chart and offset by the class rule left and top.
//
// ** Bar Text
//  Vertical Bar Chart:
//   horizontally centered on the bar, vertically to the bottom of the bar and offset by the class rule left and top.
//  Horizontal Bar Chart:
//   vertically centered on the bar, horizontally to the left of the bar and offset by the class rule left and top.

// ***** Initialising the Script
//
// Each set of bar charts would normally be initialised from a <BODY> or window onload event
// e.g.
//  <body onload="zxcBarChart('V','TstV',VBarAry);zxcHBarChart('H','TstH',HBarAry);" >
// where:
// parameter 0 = 'H' = horizontal, 'V' = 'vertical application.   (string)
// parameter 1 = the unique ID name of the parent <DIV>.          (string)
// parameter 2 = the array name defining the chart requirements.  (array)
//

// ***** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These characters are easily changed to characters of choice using global find and replace.

// The functional code(about 7.25K including both vertical and horizontal functions) is best as an external JavaScript

// Tested with IE6 and Mozilla FireFox

// ***** Functional Code NO NEED to Change

function zxcBarChart(zxcmd,zxcid,zxcary){
 var zxcp=document.getElementById(zxcid);
 var zxcclone=zxcStyle('DIV',{position:'absolute',overflow:'hidden',zIndex:'0',width:'1px',height:'1px',backgroundColor:zxcary[0][3]});
 zxcp.appendChild(zxcclone);
 var zxcpw=zxcp.offsetWidth;
 var zxcph=zxcp.offsetHeight;
 var zxcdepth=zxcary[0][0];
 var zxclines=zxcary[0][7].length+1;
 var zxcpitch=((zxcmd=='V')?zxcph:zxcpw-zxcdepth)/zxclines
 zxcBGColors(zxcp,zxcary,zxcdepth,zxcpw,zxcph,zxcclone);
 zxcLines(zxcmd,zxcp,zxcary,zxcdepth,zxcpw,zxcph,zxclines,zxcpitch,zxcclone)
 zxcBars(zxcmd,zxcp,zxcary,zxcdepth,zxcpw,zxcph,zxclines,zxcpitch,zxcclone);
}

//-->
</script>