Hullo,

I have hit a snag when I got to the point where I draw a bar graph.
I want to have a bar graph based on the database records, but I have no idea on how to do it.
I tried searching online, but to no avail. I only found a code that is static; the one below;

<?php
    # ------- The graph values in the form of associative array
    $sql="SELECT * FROM marks WHERE school_id='14'";
    $result=mysql_query($sql);
    $row = mysql_fetch_array($result);

    $subject = $row['subject_name'];
    $mark = $row['subject_score'];

    $values=array($subject => $mark);

    $img_width=450;
    $img_height=300; 
    $margins=20;


    # ---- Find the size of graph by substracting the size of borders
    $graph_width=$img_width - $margins * 2;
    $graph_height=$img_height - $margins * 2; 
    $img=imagecreate($img_width,$img_height);


    $bar_width=20;
    $total_bars=count($values);
    $gap= ($graph_width- $total_bars * $bar_width ) / ($total_bars +1);


    # -------  Define Colors ----------------
    $bar_color=imagecolorallocate($img,0,64,128);
    $background_color=imagecolorallocate($img,240,240,255);
    $border_color=imagecolorallocate($img,200,200,200);
    $line_color=imagecolorallocate($img,220,220,220);

    # ------ Create the border around the graph ------

    imagefilledrectangle($img,1,1,$img_width-2,$img_height-2,$border_color);
    imagefilledrectangle($img,$margins,$margins,$img_width-1-$margins,$img_height-1-$margins,$background_color);


    # ------- Max value is required to adjust the scale -------
    $max_value=max($values);
    $ratio= $graph_height/$max_value;


    # -------- Create scale and draw horizontal lines  --------
    $horizontal_lines=20;
    $horizontal_gap=$graph_height/$horizontal_lines;

    for($i=1;$i<=$horizontal_lines;$i++){
        $y=$img_height - $margins - $horizontal_gap * $i ;
        imageline($img,$margins,$y,$img_width-$margins,$y,$line_color);
        $v=intval($horizontal_gap * $i /$ratio);
        imagestring($img,0,5,$y-5,$v,$bar_color);

    }


    # ----------- Draw the bars here ------
    for($i=0;$i< $total_bars; $i++){ 
        # ------ Extract key and value pair from the current pointer position
        list($key,$value)=each($values); 
        $x1= $margins + $gap + $i * ($gap+$bar_width) ;
        $x2= $x1 + $bar_width; 
        $y1=$margins +$graph_height- intval($value * $ratio) ;
        $y2=$img_height-$margins;
        imagestring($img,0,$x1+3,$y1-10,$value,$bar_color);
        imagestring($img,0,$x1+3,$img_height-15,$key,$bar_color);       
        imagefilledrectangle($img,$x1,$y1,$x2,$y2,$bar_color);
    }
    header("Content-type:image/png");
    imagepng($img);

?>

Only problem is that this only returns one subject on the graph.

Member Avatar

diafol

There are loads of javascript/jQuery ones out there. You could pass the DB data to them as json

you could try highcharts, it is very easy to set it up.

any links to the "javascripts"?? or "highcharts"??

Member Avatar

diafol

highcharts.com - Google not working? :)

Another one is jQplot, open source and free for commercial use. I quite liked it.

Simple and effective bar chart can also be accomplished just by using tables or divs and a bit of css. I have done it once in a small project and it looked quite cute.