Present idea

User this class the PHP programer can plot data to image as solid bar or line or pie .

Bar chart Preview:

This chart show three bars with red, blue and green .

Line chart Preview:

This chart show three lines with red, blue and green .

Pie chart Preview:

This chart show eight arrays with different colors .

Require :
PHP 3 or PHP 4 and GD Libaray

Ideas of plot bar chart and line chart

1. we use a planar data array which keep the different data for each bar .
   The data array looks like this:
   data = array(
           array(1, 2, 3, 4, 5, 6,7,8,9,10),
           array(2, 4, 6, 8, 10, 12, 14,16,18),
           array(16, 14, 13, 12, 9,6,3)
           );
2. We can create a foundation class for draw bar chart and line chart.
   This class can receive the common parameters,
   something like point_x,point_y,x_label,y_label,color,x_axis_label,y_axis_label,font and so on.
   These parameters are the least conditions to draw the axis and count the x and y coordinate for the elements of each data in the data array automaticly.
3. User a array to keep the Allocate Standard Colors in the class but the programer can  use a function to change it .For example :
   $gd->change_color(2,0,0,255);
   so,he changed the NO. 2 default color which we allocated in the color array .
4. Suppose we named this class Graph_bar class in order to draw bar chart, then we can extend the Graph_line class to Graph_bar class's plot( )  function which is to draw the rectangles with defferent colors .Now ,we can get the line chart by using the same foundation class.

Ideas of plot pie chart

1. Because there are many different variables to the graph_bar and graph_line class ,something like ploting pie chart don't need axis and planar data array ,we use another class to do it.
2. In this class we need a single data array to draw the pie chart, a color array to keep the colors filling the area ,a message array to save the descriptions for each data array elements ,and also some labels,such as title.
3. Count the range of each area will auto be done in the class' function.what we need to do is to change the default allocate color array with the charge_color( ) function.

Description variables and functions to each class

Graph_bar class

1. Define Public variables, including:

• filename : Filename image is saved as
• width : Image's width
• height : Image's height
• x_axis_label : Text labels describing the x axis
• y_axis_label : Text labels describing the y axis
• data : The array of integers data to be plotted
• data_lables : Text labels on the x axis corresponding to each element in $data
• y_lables : Text labels on the y axis describing the range of the data
• font : Default font to use when printing
• background_color : Default background colors
• border_color : Default border colors
• graph_color : Default graph colors (May it's a array)
• x_dashed_line : show or not show x level dashed line
• y_dashed_line : show or not show y level dashed line

2. Functions

• graph_bar($width,$height) :
  • Create a imgeg with the size of $width and $height
  • Allocate Standard Colors
  • Something else can do when create a new object
• change_color($num,$red,$green,$blue) :
  • change the NO. $num standard colors to color ($red,$green,$blue)
• init() :
  • Draw axis, background,lalbes
• prep() :
  • Modify the array data before draw
• plot() :
  • Draw rectangle bars to different place
• close() :
  • Save image file and free memory

Graph_line class

Graphite_line Class is just extend plot() function in Graphite_bar class

Graph_round class

1. Define Public variables, including:

• filename : Filename image is saved as
• width : Image's width
• height : Image's height
• x_centre : The x coordinate for the centre of a circle
• y_centre : The y coordinate of the centre of a circle
• data : The array of integers data to be plotted
• data_lables : Text description corresponding to each element in $data
• diameter: The diameter of a circle
• font : Default font to use when printing
• background_color : Default background colors
• border_color : Default border colors
• data_color : Color corresponding to each element in $data
• title_label : Image title description
• title_font : Image title font
• title_color : Image title color

2. Functions

• graph_round($width,$height) :
  • Create a imgeg with the size of $width and $height 
  • Allocate Standard Colors
  • something else can do first
• change_color($num,$red,$green,$blue) :
  • change the NO. $num standard colors to color ($red,$green,$blue)
• init() : Draw everything
• close() : Save image file and free memory

Present time schedule

2 / 6 - 3 / 6

• Presend idea of the class

5 / 6 - 8 / 6

• Mondy, try to draw each chart with simple code
• Thuesday, put the snippet code together
• Wednesday, improve the code
• Thursday, test the class and improve the document

Present specification

Code Structure

class graph { 

Public variables 

/* filename image is saved as */
var $filename = "graph.gif";

/* Defaule Size of the gif */
var $width = 600;
var $height = 300;

/*Top margin for write title and the legend*/
var $top_margin=50;

/* Text labels describing the x and y axis */
var $x_axis_label = "x_axis";
var $y_axis_label = "y_axis";

/* Image title description */
var $title_label="Macro Graph Analysis";

/* The array of data to be plotted $data_x is only for draw line chart*/
var $data = array();
var $data_x = array(); 

/* Text labels on the x axis corresponding to each element in $data */
var $x_labels= array();

/* Text labels on the y axis describing the range of the data */
var $y_labels = array();

/* legend array for the graph */
var $legend = array();

/* Default font to use when ploted*/
var $font_title = 5;
var $font = 3;

/*Allocate Default colors */
var $title_color = 0;
var $background_color = 0;
var $border_color = 0;
var $graph_color = array();

/* Default not show dashed line*/
var $x_dashed_line = 0;
var $y_dashed_line = 0;

/* Default not show the detail for each element in the graph*/
var $show_x_detail = 0;
var $show_y_detail = 0;

/* The diameter of a circle */
var $diameter=150;

/* The (x,y) coordinate for the centre of a circle */
var $x_centre=120;
var $y_centre=160

Private variables (only in thought)

/* image handle */
var $image;

/* The virtual range within that the data is displayed on the graph */
var $y_range_pos;
var $y_range_neg;

/* cooridnate the x axis is graphed */
var $x_axis;

/* Width and Height in pixels of the plotting area */
var $plotarea_width;
var $plotarea_height;

/*Average space from one grid to another on the x axis*/
var $average_space;

/* Array of Plotted data  in (x,y) format */
var $plotted_data = array();

/* Text labels on the x axis corresponding to each element in $data */
var $x_labels_default= array();

Functions

/*
 * Structure function
 */
function graph($width=600, $height=300)
{
    /* Create image handle */ 

    /* Allocate Standard Colors */ 

}

/*
 * Change the default allocate color function
 */
function change_color($num,$red,$green,$blue)
{ 

        $this->graph_color[$num] = 
            ImageColorAllocate($this->image,$red,$green,$blue); 

                       .........

}

/*
 * Defacto Data class constructor
 */
function init($y_grid=8)
{     
    /* Draw Background */
    /* Draw y axis label */ 
    /* Draw title label */ 
    /* Draw x axis label */ 
    /* Draw plot borders */ 
    /* Draw x axis*/ 
    /* Draw x labels, y labels,if present */  

}

/*
 * Plot data to plotted_data 
 */
function prep()
{ 
    /* If x_labels spresent get spacing from x_labels */ 
    /* If data present get spacing from data */ 
    /* if data_entry off the top of the chart, clip it */ 
    /* if data_entry off the bottom of the chart, clip it */ 
    /* Write plotting data to plotted_data variable */ 
}

/*
 * Plot data to image as solid bars
 */
function plot($bar_width = 10)
{ 
    /* Plot each bar with different colors */
    /* write the description for each bar */ 

}

/*
 * Save file and free memory
 */
function close()
{
    imagegif($this->image, $this->filename);
    imagedestroy($this->image);
} 

/*
 * Put functions together 
 * $y_grid is the grids you want to separate the y axis
 * $bar_width is the width for each edrectangle
 */
function draw($y_grid=8,$bar_width =10){
    $this->init($y_grid);
    $this->prep();
    $this->plot($bar_width);
    $this->close();
}
}  //----close the graph class

class graph_line extends graph

{
function prep()
{ 
    /* If $data_x is NULL ,Default allocate the increase data to it*/ 
    /* Check the $data_x*/ 
    /* Get each value of $data_x array*/ 
    /* Write plotting data to plotted_data variable */ 
}

function plot($bar_width = 10)
{ 
    /* Plot each line with different colors */
    /* write the description for each line*/ 
    /* Whether to show detail of each dot on the line chart*/
}

}  //----close the graph_line class

Implement specification


Perform code review

Examples for
how to use this class:

Plot Bar Chart



    

Plot Line Chart

<?
include ("graph.inc");
$test = new graph_line(600,300);
$fileName="1.gif";
$test->filename = "$fileName";
$test->font=3;
$test->show_y_detail=0;
$test->show_x_detail=0;
$test->x_dashed_line=1;
$test->y_dashed_line=1;
$test->y_axis_label = "Macro Graph Test";
$test->x_axis_label = "OverTime of the Week";
$test->data = array(
        array(1, 2, 3, 4, 35, 6,7,8,9,10),
        array(2, 4, 6, 8, 10, 12, 14,16,18),
        array(16, 14, 13, 12, 9,6,3)
        );

$test->data_x = array(
        array(2, 12, 23, 42, 46,57,58,65,67,78),
        array(4, 9, 12, 19, 24, 32, 38,46,58),
        array(3, 12, 23, 32, 49,56,63)
        );
$test->x_labels=array(Jan,Feb,Mar,May,Apr,Jun,Jul,Aug,Sep,Oct);

$test->change_color(bg,230,230,230);
$test->change_color(1,0,0,0);
$test->change_color(2,0,0,255);
$test->draw();
echo "<img src=$fileName><br>"; 
?>     

Plot Dot Chart

<?
include ("graph.inc");
$fileName="macro001.gif"; 
$array=array(3,2,8,3,6,5,11,2); 
$array_label=array(Jan,Feb,Mar,May,Apr,Jun,Jul,Aug); 
$title="Timesheet Graph Analysis"; 
 
$gd = new graph_dot(400,300); 
$gd->filename = "$fileName"; 
$gd->data=$array; 
$gd->x_label=$array_label; 
$gd->show_y_detail=1;
$gd->title_label="$title"; 
$gd->change_color(bd,255,255,255);
$gd->change_color(tt,0,0,0);
$gd->change_color(bg,240,240,250);
$gd->draw(); 
echo "<img src=$fileName><br>";
?>     

Conduct tests

http://10.10.80.80/~macro/graph/graph_class.php

Written by Macro Zeng

2000-06-08