Welcome to WebmasterWorld Guest from

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

PHP Graphing/etc Class(es)

4:31 pm on Apr 19, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Mar 19, 2009
posts: 165
votes: 0

Alright, some background:
I have a database on the server that contains a lot of different types of data, logs, etc. (insurance information --- nothing personal or client-specific, just corporate backend type stuff such as premium tables). The entire website system is driven by PHP on a basic UNIX/Linux setup with mySQL as the database. Almost everything utilized is developed in-house (with few exceptions).

My problem...
I am trying to build some (pretty basic) "report" type pages that will allow corporate-types to login to the website, click a link, and view a specific report [ie: no work or knowledge on their end required]. I have all the data, I know how to access the data, I know how to parse the data if I need to. I know (obviously) how to build a report of figures, data tables, etc (easy: PHP+mySQL+HTML, +whatever else is needed [CSS/JS/etc]). But how do I go about making graphs?

I've tried looking around for solutions that will allow me to provide my data to a PHP class that would output a graph. But the ones I've tested so far just haven't worked out. I would preferably need the ability to generate all types of graphs: bars, pies, histograms, etc etc. Even the ability to input a "y=x" type equation and have it graph the line would be useful (trends/regression analysis related; I won't necessarily need it to do the analysis, I can handle that and get the equation(s) [though if it could, cool]).

And am I even looking in the right place? Is the right approach to use PHP to build out "HTML-ish" output of a graph? Or are there solutions of providing data to Javascript and using some JS library/framework/script to do the graphing? [I haven't gotten to the point of exploring this, yet]

I'm just looking for some direction and thoughts from those of you who have tackled this topic before. Best approach; best practice; etc. As I've yet until now been in a situation of needing to build a graph dynamically via PHP.

8:55 pm on Apr 19, 2010 (gmt 0)

Full Member

5+ Year Member

joined:July 13, 2007
votes: 0

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!
11:26 pm on Apr 19, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Mar 19, 2009
votes: 0

Thank you very much! I will explore the PHP class you noted (Zack Bloom's graph class); it looks promising.

I did do some searching for scripts. Most of the "nice" ones I found that impressed the hell out of me in terms of features and looks all cost money (and I'm looking for free/open source). The free scripts I tried (via HotScripts/etc+) were either way too crappy visually, or were real nice looking, but lacking severely in features/abilities (some were just laughable jokes by amateurs). This one looks like a nice compromise.

And I would severely dislike going about creating my own library to handle graphing. The math or other factors isn't an issue for me; but this would be project in and of itself, one I just don't have the time for.

Thank you though!
6:16 am on Apr 20, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member dreamcatcher is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 30, 2003
votes: 0

There are a few flash options via Open Charts:

JQuery has some plugins for creating graphs, so try that and other js frameworks.

6:23 am on Apr 20, 2010 (gmt 0)

Moderator from GB 

WebmasterWorld Administrator brotherhood_of_lan is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 30, 2002
votes: 1

Jquery has some plugins

Flot [code.google.com] seems quite capable.

Another option is using the SVG format [en.wikipedia.org], which wikipedia uses extensively. Browser support seems to be a bit flaky (animations don't work on my version of FF), but for the most part it is supported.

The nice thing about using client side generated graphs is that you don't have to keep contacting the server to render changes in the graph. You could load all the data you need into a page and provide customisation with the graph to display variations of the data.
4:50 pm on Apr 20, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 27, 2003
votes: 0

pChart can create some really nice-looking graphs. Have you looked into it?

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members