Creating Dynamic Graphs & Charts

[doubledee]

I would like to build an Online Survey Form where logged in Members can place a vote (e.g. Strong Disagree, Disagree, Indifferent, Agree, Strongly Agree) and then have a Histogram Chart which updates accordingly.

Is there a way to build *dynamic* Graphs & Charts using PHP without having to code everything from scratch?

(I'm sure you can buy proprietary software to do that, but that takes the fun out of building my own site. Plus I am broke!)

I'm hoping there is some open-source stuff out there, or maybe some built in PHP Functions that at least does the graph drawing/plotting portion.

Any suggestions?

Thanks,


Debbie

[Len Whistler]

One option is to use the html div tag with a fixed height and bg color then use php to set the width with info from the database. You can generate very nice bar charts with all sorts of colors that way.

PHP Code:

<?php
$width_1="200px";
$width_2="150px";
$width_3="423px";
$width_4="175px";
?>

<div style="width:<?php echo $width_1; ?>; height: 50px; background:#ff0000;"></div>
<div style="width:<?php echo $width_2; ?>; height: 50px; background:#00ff00;"></div>
<div style="width:<?php echo $width_3; ?>; height: 50px; background:#0000ff;"></div>
<div style="width:<?php echo $width_4; ?>; height: 50px; background:#0ffff0;"></div>

-------

[Inigoesdr]

I wouldn't use PHP to generate charts; it's slow and cumbersome to manipulate images. Use PHP/MySQL to store and retrieve the data and then use something like Highcharts, Fusion Charts, etc. to display it by passing the data you retrieve from the DB to your JavaScript code.

[DrDOS]

But I use php to make charts, and other kinds of images. I use it in conjunction with the .svg filetype which is a type of XML document. It's plenty fast for that.

http://www.w3schools.com/svg/svg_examples.asp

Here's plenty of good examples, but I don't include it in the html like this, I embed an actual .svg file which is generated on the server. Then I make a download.php which converts the .svg file, using Imagemagick convert, to a .png, so people could make up their own chart, for example, and download it. I've also graphed continuous mathematical functions on the fly, so to speak, where the parameters of the function
are uploaded via a form. It also does text, and if you upload an image to the server it can do text over image. It can even do Unicode text on the server, the only method I know that does it. So it's a powerful method and quite simple to learn.

[doubledee]

Originally Posted by Len Whistler

One option is to use the html div tag with a fixed height and bg color then use php to set the width with info from the database. You can generate very nice bar charts with all sorts of colors that way.

PHP Code:

<?php
$width_1="200px";
$width_2="150px";
$width_3="423px";
$width_4="175px";
?>

<div style="width:<?php echo $width_1; ?>; height: 50px; background:#ff0000;"></div>
<div style="width:<?php echo $width_2; ?>; height: 50px; background:#00ff00;"></div>
<div style="width:<?php echo $width_3; ?>; height: 50px; background:#0000ff;"></div>
<div style="width:<?php echo $width_4; ?>; height: 50px; background:#0ffff0;"></div>

-------

But the problem is that what you are describing is the easy part.

Creating the axes, scales, legends, etc would be a substantial amount of work if you did everything from scratch like you're saying!!!


Debbie

[doubledee]

Originally Posted by Inigoesdr

I wouldn't use PHP to generate charts; it's slow and cumbersome to manipulate images. Use PHP/MySQL to store and retrieve the data and then use something like Highcharts, Fusion Charts, etc. to display it by passing the data you retrieve from the DB to your JavaScript code.

Looks interesting, but I don't want to use JavaScript at this point, and more importantly, I don't want to use proprietary solutions.


Debbie

[DrDOS]

Originally Posted by doubledee

Looks interesting, but I don't want to use JavaScript at this point, and more importantly, I don't want to use proprietary solutions.
Debbie

Google has some chart making software which is completely free, but if you don't want something like that, you may be able to search on the web for some free code. Yes, there is some coding involved in such a thing, but it's not the kind of thing that someone is likely to sit down and code just for you, especially since they may not know exactly what you want.

[Len Whistler]

Originally Posted by doubledee

But the problem is that what you are describing is the easy part.

Creating the axes, scales, legends, etc would be a substantial amount of work if you did everything from scratch like you're saying!!!


Debbie

Coding from scratch is the fun part. I added some math to take care of the scales, CSS can take care of the legends and overall look of the graph. I have included an image of what the code below will output.

There is very little limitation in using PHP, MySQL, HTML, and CSS in your graph design.


Fully working PHP demo code

PHP Code:

<?php

// voting output from database
$strongly_disagree=12;
$disagree=7;
$indifferent=7;
$agree=17;
$strongly_agree=34;

$total_votes=77;
$highest_vote=34;

// php math for the graph scales, output is in percentage of highest vote
$Strongly_Disagree = round(($strongly_disagree / $highest_vote) * 100);
$Disagree = round(($disagree / $highest_vote) * 100);
$Indifferent = round(($indifferent / $highest_vote) * 100);
$Agree = round(($agree / $highest_vote) * 100);
$Strongly_Agree = round(($strongly_agree / $highest_vote) * 100);

// html output to webpage
echo "<h1>$total_votes Total Votes</h1>";
?>
<div style="width:600px">
<div style="width:<?php echo $Strongly_Disagree; ?>%; height: 50px; background:#ff0000;">
<?php echo $strongly_disagree; ?> Strongly Disagree</div>
<div style="width:<?php echo $Disagree; ?>%; height: 50px; background:#ff9000;">
<?php echo $disagree; ?> Disagree</div>
<div style="width:<?php echo $Indifferent; ?>%; height: 50px; background:#fff000;">
<?php echo $indifferent; ?> Indifferent</div>
<div style="width:<?php echo $Agree; ?>%; height: 50px; background:#00ff00;">
<?php echo $agree; ?> Agree</div>
<div style="width:<?php echo $Strongly_Agree; ?>%; height: 50px; background:#009900;">
<?php echo $strongly_agree; ?> Strongly Agree</div>
</div>