When you need to present data in a chart on a web page, it is often worthwhile to generate graphical charts. This method is covered later in Section 18.4, “Creating a Graph/Chart Library”; however, sometimes for a quick chart CSS can suffice. Listing 9.4.1 presents a function that creates a visual chart of data using CSS and XHTML only.
As written it accepts an array of values and plots them each in an area graph 1 pixel wide for each data point. It uses
div‘s, absolute positioning, and CSS heights to create this effect. It allows for the position of the page you want the chart to appear on to be designated and for a maximum height to be defined, which it will scale the values to.Listing 9.4.1 XHTML/CSS-Based Graphs
[ code listing ]
[ code listing ]
As currently written, this creates a chart whose width is dictated by the width of the array given it. You could add a width parameter and scale the results; however, if the data would be scaled down, you run into problems of needing to “lose” data to fit everything in. On the other hand, scaling it wider would be easier, because the bars would just stop being 1 pixel wide.
This function only generates the chart itself. It doesn’t also display any legends or keys for the chart. The function can be modified to also create these for you, or they could be created otherwise and placed next to the chart within the XHTML and CSS.
Note that each chart is a
div,and it is set to be position relative. This outer div must remain being either relative or absolute in its positioning; otherwise, the positioning commands inside it for the bars will not work.
This article is taken from the chapter titled, “Web Page Creation/XHTML/CSS”, which is excerpted from the new book, PHP 5 in Practice, authored by Eli White III and Jonathan Eisenhamer. Copyright 2007 by Sams Publishing. ISBN 0672328887. Reprinted with permission by Pearson Education; All rights reserved. A complete Table of Contents is available online.
