I recently decided to build a graphing engine for an open-source PHP framework I'm contributing to--I'm rapidly discovering that while no single part of graphing is challenging, there are a multitude of minor problems.
First off, there's no good way to build a graph in pure HTML with CSS, and even with Javascript. If you're trying to use these to generate graphs, I'm afraid you've been barking up the wrong tree altogether. HTML deals mostly with square and rectangular elements aligned perfectly along x and y axis--thus, there's really no good way to draw a circle for a pie chart or a line for a line graph. Though you might manage to build up something to display bar graphs or histograms in HTML and CSS, such a system would necessarily be fairly complex, and unfortunately subject to the whims of browser interpretation--positioning and alignment in Internet Explorer, especially, is a nasty problem. Your best bet is most likely to use PHP to generate an image containing the graph you want.
There are many PHP graphing libraries out there, both commercial and free. I'm surprised you haven't yet been able to find one that performs all these tasks! However, if you're interested in rolling your own solution, I can provide a few tips.
First off, you'll need to make sure your PHP server supports the GD image library ( [
us.php.net...] ). Most servers have PHP compiled with GD support, and there's plenty of information about installation if you're running your own server, so you shouldn't have much trouble there.
Next, you'll need to figure out how to draw the graphs. This is the interesting part: translating data numbers into pixels on the screen. You'll need to have a strong understanding of the Cartesian coordinate plane to do much, and a good grasp of mathematical concepts won't hurt anything either. A few techniques you'll find helpful:
1. Scale
Dealing with issues of scale is one of the first thing you should do. You'll need to determine how wide and tall your graph images should be rather quickly. Determining the scale of your data--that is, the range of values of your data--should be done next. This can be done by subtracting the minimum value of the data from the maximum ( $dataScale = $maxValue - $minValue; ).
2. Create scale multiplier(s) for your data
No matter what type of graph you're building, it's almost certainly a given that the data won't correspond perfectly with the area in which you're trying to represent it. For instance, you may have a scale of 1000, which you're trying to represent in a graph that has a height of 100 pixels. In this case, you'll need to multiply every data value by .1 (assuming all positive values). You can find this scale multiplier by dividing the scale by the pixel length of the axis in question. Scale multipliers can be used (in the case of pie charts) to calculate how many degrees or radians should be occupied by a pie chart segment, how high a bar should be in a bar graph, the position of a line segment in a line graph, the value at a given point in a graph, and many other things besides--it's a very useful tool.
3. Drawing axis (on graph types that use them)
Do this early on, and determine precisely how large they are (in pixels) based on your image size. Determine how many axis markers to draw on the graph, then use the length of each axis divided by the number of axis markers to determine the number of pixels between axis markers. Multiply the number of pixels between axis markers by the scale multiplier to determine the value that corresponds with that placement.
4. Drawing things
Keep in mind that you're effectively drawing on the lower right quadrant of a Cartesian plane. The point (0, 0) is at the upper left corner;(x, 0) is x pixels from the left of the image, and (0, y) is y pixels DOWN from the TOP of the image. This makes things a bit interesting, since your y-axis values are effectively inverted from what you'd normally think they should be.
Hope this helps!
