database value in a graphic display

[Icewolf]

Hi

I was wondering is there a away to show a values from a database into this? I am helping a friend with a database that he is manually doing a lot of updates. For him to do this right now he is just changing the code to display a different picture. I was thinking there has to be a way to display the values into a bar like this some home.

 

Thanks

Andy

 

[mentalist]

If you're not going the canvas way of drawing it, you could have a load of divs with each overlay, maybe do some compositing magic with masks, er, the second method will technically be as much work as the first yet will save on graphics, but if each of the discrete values also cast a light influencing stuff around it then your original method would be best...

 

 

* Edit in italics...

Edited October 26, 2013 by mentalist

[Icewolf]

Sorry this part is new to me. I have never really tried anything like this. I am not understanding what you are saying. I mean if we need to create something that is cool.

Here is the select statment I would want to use. I would be using the max_point and point_earn.

$sql = "SELECT
			cat_name,
			max_point,
			point_earn
		FROM rewards
		where member =  '" . mysql_real_escape_string($_SESSION['user_name']) . "'";

[mentalist]

Say the width equals 100%, 100 pixels, or whatever, personally I prefer 1 but...

 

So, 100 / max * earn gives you the number of green bars, width of completition, etc

 

Is that what you were after?

[Icewolf]

yes that would be what I am looking for

[Barand]

Here's an approximation (using GD library) of what you are trying to do. In practice, have a background image and plot bars over the top

<?php
$iwidth = 500;      // image width
$iheight = 120;     // image height
$x0 = 50;           // start point on x axis
$xmax = 450;        // max point on x axis
$vround = 5;        // round x values to nearest vround
$y0 = 30;           // minimum bar height
$barwid = 5;        // bar width
$slope = 8;        // bar slope degrees from vertical
$slopefactorX = sin(deg2rad($slope));
$slopefactorY = cos(deg2rad($slope));

$minval = -50;      // min chart value
$maxval = 150;      // max chart value

if (isset($_GET['value'])) {
    $value =  floor($_GET['value']/$vround) * $vround;
    if ($value < $minval) $value = $minval;
    if ($value > $maxval) $value = $maxval;
}
else $value = null;

function x($value, $minval, $vround, $x0, $barwid)
{
    $n = ($value - $minval)/$vround;     // nth bar position
    return $x0 + $n * 2 * $barwid;
}

function y($value, $y0, $iheight)
{
    if ($value < 0) $value = 0;
    $y = $y0 + pow($value, 2) / 500;
    return $iheight - $y;
}

function drawBar($im, $x, $y, $iheight, $slopefactorX, $slopefactorY, $barwid, $col)
{
    $offset = floor($y * $slopefactorX);
    $pts = array (
                $x, $iheight,
                $x + $offset, $y*$slopefactorY,
                $x + $offset + $barwid, $y*$slopefactorY,
                $x + $barwid, $iheight
            );
    imagefilledpolygon($im, $pts, 4, $col);
}

/******************
* create the image
*******************/
$im = imagecreatetruecolor($iwidth, $iheight);
$bgc = imagecolorallocate($im, 0x33, 0x33, 0x33);
imagefill($im, 0,0,$bgc);
$barbgc = imagecolorallocatealpha($im, 0xE0, 0xE0, 0xE0, 60);
$barcol = imagecolorallocate($im, 0x80, 0xFF, 0x80);
imageantialias($im, true);
/*****************
* bar backgrounds
******************/
for ($v=$minval; $v<=$maxval; $v+=$vround) {
    $x = x($v, $minval, $vround, $x0, $barwid);
    $y = y($v, $y0, $iheight);
    drawBar($im, $x, $y, $iheight, $slopefactorX, $slopefactorY, $barwid, $barbgc);
}
/*****************
* value bars
******************/
if (!is_null($value)) {
    for ($v=$minval; $v<=$value; $v+=$vround) {
        $x = x($v, $minval, $vround, $x0, $barwid);
        $y = y($v, $y0, $iheight);
        drawBar($im, $x, $y, $iheight, $slopefactorX, $slopefactorY, $barwid, $barcol);
    }
}
/*****************
* output image
******************/

header("content-type: image/png");
imagepng($im);
imagedestroy($im);
?>

Place in required place with HTML img tag, passing chart value in src querystring (-5 in the example below)

<img src="chart.php?value=-5" />

[NoResponse]

Hey guys I'm also interested in this topic as well and was wondering if there is a value to show all the gray bars in a 'null' state. I see the -50 value shows one green bar, but what if you wanted to show no green just the gray bars themself, is there a special value for that?

[Barand]

With the code I posted the absence of a value should give all grey bars

<img src="chart.php" />

I've done a Mk.2 version which produces the attached images but Icewolf appears uninterested

[NoResponse]

Cool thanks. I'll take a look at it with the attached image. Thanks for the speedy response!

[Icewolf]

Thanks barand the person that is noresponse person is the guy i am helping. I sent him the code to see if that was what he wanted.

[Barand]

For the sake of thread completion, and anyone else interested, here is the Version 2 code which cleans up the maths in the slope of the bars and uses a background image (attached).

<?php
$x0 = 50;           // start point on x axis
$y0 = 25;           // minimum bar height
$ybase = 7;         // ht of bars from bottom of image 
$numbars = 40;      // number of bars
$barwid = 3;        // bar width
$barspace = 6;      // bar spacing
$slope = 30;        // bar slope degrees from vertical

$minval = -50;      // min chart value
$maxval = 150;      // max chart value

$vround = floor(($maxval-$minval)/$numbars);        // round x values to nearest vround
$slopefactorX = sin(deg2rad($slope));
$slopefactorY = cos(deg2rad($slope));

if (isset($_GET['value'])) {
    $value =  floor($_GET['value']/$vround) * $vround;
    if ($value < $minval) $value = $minval;
    if ($value > $maxval) $value = $maxval;
}
else $value = null;

function x($value, $minval, $vround, $x0, $barwid, $barspace)
{
    $n = ($value - $minval)/$vround;     // nth bar position
    return $x0 + $n * ($barspace + $barwid);
}

function y($value, $minval, $vround, $y0, $iheight)
{
    $n = ($value - $minval)/$vround;     // nth bar position
    $y = $y0 + pow($n, 2.2) / 50;
    return $y;
}

function drawBar($im, $x, $y, $iheight, $slopefactorX, $slopefactorY, $barwid, $ybase, $col)
{
    $offset = floor(($y) * $slopefactorX);
    $pts = array (
                $x, $iheight-$ybase,
                $x + $offset, $iheight-$ybase-floor($y*$slopefactorY),
                $x + $offset + $barwid, $iheight-$ybase-floor($y*$slopefactorY),
                $x + $barwid, $iheight-$ybase
            );
    imagefilledpolygon($im, $pts, 4, $col);
}

/******************
* create the image
*******************/
$im = imagecreatefrompng('icewolf2.png');
$iwidth = imagesx($im);      // image width
$iheight = imagesy($im);     // image height
$barbgc = imagecolorallocatealpha($im, 0x75, 0x75, 0x75, 60);
$barcol = imagecolorallocate($im, 0xB3, 0xFA, 0x1A);

/*****************
* bar backgrounds
******************/
for ($v=$minval; $v<=$maxval; $v+=$vround) {
    $x = x($v, $minval, $vround, $x0, $barwid, $barspace);
    $y = y($v, $minval, $vround, $y0, $iheight);
    drawBar($im, $x, $y, $iheight, $slopefactorX, $slopefactorY, $barwid, $ybase, $barbgc);
}
/*****************
* value bars
******************/
if (!is_null($value)) {
    for ($v=$minval; $v<=$value; $v+=$vround) {
        $x = x($v, $minval, $vround, $x0, $barwid, $barspace);
        $y = y($v, $minval, $vround, $y0, $iheight);
        drawBar($im, $x, $y, $iheight, $slopefactorX, $slopefactorY, $barwid, $ybase, $barcol);
    }
}
/*****************
* output image
******************/

header("content-type: image/png");
imagepng($im);
imagedestroy($im);
?>

[NoResponse]

I must say as a graphic designer I'm really intrigued by this coding to generate graphics. I played around with the script you originally wrote up investigating that very thing (the background). I was able to come accross a line that eliminated the background all together... imagecolortransparent($im, $black); which gave me the opportunity to use css to place a background image behind it. For some reason thought I could not place anything over the chart even using z-index or with the background transparent. Just gonna play around with it some more, well thanks again for all your help.