Inside Technique : HTML Bar Charts : Client-Side Bar Chart

You have seen how we created bar charts on the server using VBScript and ASP. Now we show you a client-side version of the script. Below you should see a bar chart that we generated using our barChart object. The barChart object supports a number of methods and properties allowing you to quickly create different bar chart styles. For example:

The bar chart is created with our client-side BarChart object. The BarChart object exposes properties and methods that make it easy to create your own chart. These methods hide the complexities of generating the HTML. The sample bar chart created above has a number of custom settings - The bars are displayed to the left of the labels, the background is light blue, the bars are individually colored, a custom unit (widgets) is displayed, and the font is specified. All of these settings are defined using the following script that calls the properties and methods of the BarChart object.

<SCRIPT>
// Create an BarChart instance
var chart = new BarChart

// Add 4 values
chart.addValue("Test",100)
chart.addValue("Test2",50,"red")
chart.addValue("Test3",75,"green")
chart.addValue("Test4",11,"navy")

// Specify additional parameters

// Size of the bars
chart.barWidth=200
chart.barHeight=10

// Align bars to the left or right
chart.barHOrientation = "right"

// Set the caption and its alignment
chart.setCaption("Demo Bar Chart","Bottom")

// Where to display the labels
chart.formatLabel("right")

// Set the units
chart.unitLabel = "Widgets"

// Set the background color
chart.bgColor = "lightblue"

// Generate the HTML
document.write(chart.draw())
</SCRIPT>

In the client-side script, we do not use the transparent image. Instead, to create the bar we set the width of the cell directly. This difference is merely to demonstrate an alternative technique for rendering the bar. When we create charts on InsideDHTML, we use an image to control the rendering of the bar and generate our charts server-side as it will be more reliable across more browsers. For example, Netscape has issues with scripts within tables that generate new HTML. If you are running Netscape 3.x, you may see some random characters from the bar chart script being displayed above the actual chart.

BarChart Object Reference

Below is a complete reference for the BarChart object. You can find the script for the BarChart object on the next page.

barChart.addValue(label,value[,color])	Adds a new value to the bar chart. The first argument specifies the label, the second argument the value, and the third optional argument specifies a color for the bar.
barChart.setCaption(caption [, alignment [, fontName ]])	Sets the caption for bar chart. The first argument is the caption, the second optional argument sets the alignment to either the top or bottom of the chart, and the third optinoal argument is the font face used to render the caption.
barChart.formatLabel(orientation [,fontSize [,fontName]])	Defines how each label should be formatted. The orientation defines whether the label is rendered to the left or right side of the bar (default is "left"), and the optional fontSize and fontName arguments are used to format the label.
barChart.barWidth = integer	Defines the maximum width in pixels for the bar that represents 100%. The default is 200.
barChart.barHeight = integer	Defines the height in pixels for each bar. The default is 20.
barChart.unitLabel = string	Defines a unit label to be displayed with each value. The default is an empty string (no unit label).
barChart.barHOrientation = "left" | "center" | "right"	Defines whether each bar should be left, right, or centered aligned. The default is "left".
barChart.bgColor = color	Defines the background color for the bar chart. The default is an empty string causing the background to be transparent.
barChart.draw()	Returns the HTML for the bar chart.

Additional objects are exposed by the barChart object. For example, the addValue, setCaption, and formatLabel methods all return objects representing the set values. Also, there is a valueList object that contains an array of valueObjects representing all the values added using the addValue method. These objects are not necessary to create the bar chart but are of interest as you examine or modify the bar chart script. The complete script for the client-side bar chart is contained on the next page.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.