Help on doing filled lined graph

newbie_01

Hi all,

Does anyone have an example of a PHP script that can do filled line graph?

Basically, for example, if I want to graph network traffic on a weekly basis and by the hour, my Y-axis will be network traffic 0 -100 and my X-axis will be the the hours of the day 0 - 23 in 30-minute interval and I want to plot the data as filled line graph.

The graph will obviously be overlapping each other, so I need to be able to click on Monday and the Monday graph data will be highlighted, if I click on Tuesday, the Tuesday graph data will be highlighted and so on.

Any suggestion will be very much appreciated. Thanks in advance.

bpat1434

Really this is somewhat simple. Assuming you've got data for 7 days of the week and every 30 minutes, all you need to do is some simple math to figure out where the start and end points will be.

You'll make a graphic that is say 720 pixels wide (making each bar 10px wide + 5 pixels between each bar) and is 1000 pixels high (10px for each point).

Now all you need to do is figure out the starting and ending points of each block.

The first starting point will be 0,0 since we'll start in the bottom left corner.

Assuming that from 00:00 to 00:30 is "block 1", you can state that the each subsequent block will be 15 (block number - 1). So the next would be 15 (2 - 1) = 15 (1) = 15. The 4th block would be 15 (4 - 1) = 15 * (3) = 45. So you know the starting coordinates for each block.

To find the ending coordinate, you just take the starting x, add 10, and then multiply the traffic by 10 to get the last point. So if block 1 has 80 for a network traffic, it's ending point would be 10,80. Block 2, which we'll say has a 62 for network traffic, would end at (15 (2 - 1))+(10),(62010) = 15,620.

Once you figure out how to get two corners of the block, then all you need to do is use [man]gd[/man] functions to draw a new filled rectangle from point A to point B.

Alternatively, you could use nothing but pure CSS to do this as well. It's a little trickier, but it can be done.

newbie_01

HI,

Thanks for your response.

Am probably "attacking" this graph'ing that am trying to do from a wrong direction. I've managed to sample out some graphing options like pGraph and using gd commands for the bar graphs.

I am hoping that I can make a graph that is sort of similar to a map. Say for example, I have a picture of the world map on the page, and I got the legends of the seven (7) continent on the right hand side of the page. If I click on Asia, it will highlight portions of the map that are part of Asia, if I click on South America, it will highlight the portion of the map that is part of South America and so on and so forth.

Another good example is if I have pie chart of sales from JANUARY - JUNE and each portion of the pie chart corresponds to each month and I have the legends, JAN, FEB, MAR, APR, MAY JUN, on the left side of the page, if I click on JAN, it will highlight the JAN portion/percentage of the pie chart, if I click on FEB, it will highlight FEB and so on.

At the moment, am thinking, for example, for the pie chart, I will have seven (7) different codes, one for each month and one for all the months. So if the user click on JAN, I will load the page that highlight the pie chart portion for JAN and the rest of the chart greyed out, if I click on FEB, the page that highlight the pie chart portion for FEB will be loaded and the rest of the chart greyed out, am I doing this correctly? If not, any suggestions?

Or if you could point me to some site that has an example on the functionality that am looking for, it will be very much appreciated. It does not have to do with graphing stuff, just something similar to what am trying to achieve.