jQuery Graph from a PHP page

Question

Hi.
I'm looking for a jQuery Plugin to create a graph like that http://www.panic.com/blog/2010/03/the-panic-status-board/. To update the graph every x miliseconds from a PHP page and the numbers that are on the top. Is it possible? Do you know any plugin that does that?
Thanks!

Answer 1

My recommendation would be to look into gRahpael. It's a javascript graphics/graphing library. It isn't based on jquery, but it is very good library, and produces great graphs.

Answer 2

As a start, I'd say you should look into the basics - how to use ajax to update text on the page with jQuery. Look at the docs for getJSON() and go from there.

For that particular graph, I would suggest leaving out sophisticated graphing libraries. You could accomplish that with just a collection of divs. You could for instance have five floated divs, and then fix the height of the div, and then use a black border-top and a colored border-bottom to generate the bar graph. The javascript function could receive a number for each column and then apply the new border-bottom and border-top widths for each div.

<div id="ChartHolder">
 <div id="ChartOne" class="chartElement"><span class="current">0</span><span class="metaSep">/<span><span class="total">100</span></div>
</div>

The base css would look something like

.chartElement { float:left; border-bottom: 0 solid #dedede; border-top: 100px solid #000000; }
#ChartOne { border-bottom-color: #ffff00; }

Then, you could use something like PeriodicalUpdater to run a polling operation. (Or more traditional timeouts). This polling operation would update both the top and bottom border widths and the contents of #ChartOne .current and .total. The php script could return a json array of the id and an integer for the curent value.

edit: link to correct polling library.

Answer 3

use jpGraph . its php only