homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

PHP Graphing/etc Class(es)

5+ Year Member

Msg#: 4118196 posted 4:31 pm on Apr 19, 2010 (gmt 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.




5+ Year Member

Msg#: 4118196 posted 8:55 pm on Apr 19, 2010 (gmt 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!


5+ Year Member

Msg#: 4118196 posted 11:26 pm on Apr 19, 2010 (gmt 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!


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

Msg#: 4118196 posted 6:16 am on Apr 20, 2010 (gmt 0)

There are a few flash options via Open Charts:

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


brotherhood of LAN

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

Msg#: 4118196 posted 6:23 am on Apr 20, 2010 (gmt 0)

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.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 4118196 posted 4:50 pm on Apr 20, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved