How do we begin?

    The first step would be to download the JPGraph include files. This can be found at ( all the contents to a folder and put it in a safe place. We will refer these libraries whenever needed.

What can I do with JPgraph

    • Flexible scales, supports text-lin, text-log, lin-lin, lin-log, log-lin and log-log and integer scales.
    • Supports both PNG, GIF and JPG graphic formats. Note that the available formats are dependent on the specific PHP installation where the library is used.
    • Supports caching of generated graphs to lessen burden of a HTTP server.
    • Intelligent autoscaling which gravitates towards esthetical values, i.e. multiples of 2:s and 5:s
    • Supports background images with different formatting options
    • Supports color and brightness adjustments of images directly in PHP.
    • User specified grace for autoscaling
    • Supports, line-plots, filled line-plots, accumulated line-plots, bar plots, accumulated bar plots, grouped bar plots, error plots, line error plots, scatter plots, gantt-charts, radar plots, 2D and 3D pie charts.
    • Supports unlimited number of plots in
      each(array arr)

      Return the currently pointed key..value pair in the passed array, and advance the pointer to the next element’, CAPTION, ‘each’);”>each graph, makes it easy to compose complex graph which consists of several plot types

    • User specified position of axis
    • Supports color gradient fill in seven styles
    • Supports automatic legend generation
    • Supports both vertical and horizontal grids
    • Supports anti-alising of lines
    • Supports rotation of linear graphs
    • More then 400 named colors
      You need not worry about this. JPGraph come with an excellent manual, which will help you in learning them, better. But remember “Practice makes you perfect” so you need to put in some of your energy to learn them. There are around 87 Classes and 814 Methods. (Don’t ask me how much I remember)
      I am trying to show you some basic graph creation using JPGraph. I would be using MySQL database functions and show you how to draw graphs using the retrieved value from database. I am sure this will help you in getting a good start.
      Ok folks here is the table structure I would be using in my examples.
      CREATE TABLE `students` (`Name` varchar(50) default NULL, `Marks` int(11) default NULL);
      Sample Data in the table.

      Name Archie Andrew Hulk Jay
      Marks 90 67 67 98
      • SetScale(‘textint’);
      • SetScale(‘loglog’);
      • SetScale(‘linlog’);
    • The second function which we have used $graph->SetScale(“textint”); this function helps in specifying the scale for x and y axis. When I mean scale its the measurement that I would go for. In the example you might see my “x” axis having the text labels and my “y” axis having integer values. This the possible values that you can give “textint” means that x axis will have a “text” type scale and y axis will have “int” scale. Similarly
      log(float number, [float base])

      Returns the natural logarithm of the number, or the base log if base is specified’, CAPTION, ‘log’);”>log specifies logarithmic scale and lin specifies linear scale.

      This function $graph->img->SetMargin(50,30,50,50); sets the margin for the graph. The typical parameters it takes are Left Margin, Right Margin, Top Margin and Bottom Margin. You might wonder why I have used the “$graph->img” in-between. Well that’s the sub-class to which I set the property.
      Another very interesting set of functions which helps you to add an Image to the background. You adjust various parameters of the image and make them the way you want it to look.$graph->AdjBackgroundImage(0.4,0.7,-1);.This parameter adjust the intensity of the image which will be displayed in the background. The parameters it takes are brightness, contrast and saturation. The maximum and minimum value that you can set if -1 to 1.
      Now this is the function, which add the image to the background.$graph->SetBackgroundImage(“linux_pez.png”,BGIMG_FILLFRAME); The first parameter is the image path. The second parameter is the Image style and the third parameter is the image format.
      The third parameter, which is the image type, the default value is “auto” meaning that you need not specify the type. Image format allowed “jpeg”, “gif” and “png”.
      This function $graph->SetShadow(); will set the shadow for the graph that is displayed.
      You must have seen me collecting values form my table and collect it in tow different arrays. The len [] is an array, which contains the names of the students. I will be using this value to set the X-axis.$graph->xaxis->SetTickLabels($leg);. Here” xaxis” is a sub class which conatins the method SeTickLabels. The parameter it takes is array. Once I set, my graph will have the student’s names in the x-axis.
      This function $bplot = new BarPlot($data); creates a new bar chart and plots it on the graph. The parameter it takes is an array. In this sample code I pass the students marks, which I collect in an array.
      Now we will see some functions, which will help us to change the properties of the bar chart displayed.
      To change the position of the values displayed on the bar chart we can use this function $bplot->value->SetAngle(45); this will tilt the values by 45 degree. To differentiate the positive and negative values we can use this function $bplot->value->SetColor(“black”,”navy”); this will show my positive values in black color and the negative values in navy color.
      We have opened a graph and also plotted the values using the bar chart. Now we have two more functions, which would complete them and help us showing the output. This function $graph->Add($bplot); would make the bar displayed within the graph. I pass the bar chart object as a parameter. The second function $graph->Stroke(); generates the image and sends it back to browser. Now you can also save this in a
      file(string filename [, int flags[, resource context]])

      Read entire file into an array’, CAPTION, ‘file’);”>file by giving the filename as an argument to the function. By default the images are shown in the browser.

      Now we see some functions, which can help my graph look better. The first one we are going to see will be to change the bar chart look. Try to comment the SetFillColor function and use this $bplot->SetFillGradient(“blue”,”yellow”,GRAD_MIDVER);
      • GRAD_VER, Vertical gradient
      • GRAD_HOR, Horizontal gradient
      • GRAD_MIDHOR, From the center and out, horizontal
      • GRAD_MIDVER, From the center and out, vertical
      • GRAD_WIDE_MIDVER, From the center and out, vertical. Wide mid section.
      • GRAD_WIDE_MIDHOR, From the center and out, horizontal. Wide mid section.
      • GRAD_CENTER, From the center and beaming out
      • GRAD_LEFT_REFLECTION, Simulates a reflection on the left side
      • GRAD_RIGHT_REFLECTION, Simulates a reflection on the right side
        You might also wonder is there a way to display the graph horizontally. This function does this for you $graph->$graph->Set90AndMargin(50,40,0,20);
        This function rotates the graph to 90 degrees and set the margins. The parameters it takes are left margin, right margin and top margin and bottom margin.
    • Impressed with the new look? Well that’s all about JPGraph!! The function takes in three parameters the start color,
      end(array array_arg)

      Advances array argument’s internal pointer to the last element and return it’, CAPTION, ‘end’);”>end color and gradient type. The different gradient styles we can use are.


  • Here are some of the features available in JPGraph (Courtesy:

    I see lot of classes how am going to remember them?

    What will this tutorial deal with

    Some History!

    Get set Go………….

    PHP Example: (!)

    include ("c:/jpgraph-1.12.2/src/jpgraph.php");   
    include (

    $db mysql_connect("localhost""root","") or die(mysql_error());

    mysql_select_db("test",$db) or die(mysql_error());

    $sql mysql_query("SELECT * FROM students") die(mysql_error());

    while($row mysql_fetch_array($sql))
    $data[] = $row[1];
    $leg[] = $row[0];

    $graph = new Graph(250,150,"auto");
    $graph->AdjBackgroundImage(0.4,0.7,-1); //setting BG type
    $graph->SetBackgroundImage("linux_pez.png",BGIMG_FILLFRAME); //adding image


    $bplot = new BarPlot($data);
    $bplot->SetFillColor("lightgreen"); // Fill color

    $graph->Stroke(); ?>


    Drawing A Graph

    Drawing the Bar Chart

    Closing the Graph

    Playing around



9 Responses to “JPGRAPH PART 1”

  1. Mohmed Says:

    Thank you for the great tutorial. I managed to create a gantt chart that pulls data from mysql database, but I am having hard time to hide the out-of-range activities in the displayed gantt. For more info, you can check this thread on jpgraph forum.

    Do you have any idea how can I fix this? Is there any way to force hiding activities from the generated gantt?

  2. sanja Says:


  3. Bongo Says:

    AWESOME!!! tutorial mate, please post more

  4. diet trends Says:

    Hello! I could have sworn I’ve been to this site before but after going through many of the posts I realized it’s new to me.
    Anyways, I’m certainly happy I came across it and I’ll be bookmarking it and checking back regularly!

  5. omkar Says:

    Hi there!

    Thanks a lot! I was just wondering how to put the graph in the centre of the page?? Help will be much appreciated 🙂


  6. ljigem Says:

    Hi can you please help me in plotting a graph from jpgraph and value selected from multi drop down. Please any one can help me. email me at

  7. ljigem Says:

    Hey Thank you for this tutorial. it was awesome but ma problem is how to plot group bar graph with jpgraph. please help.. mail me at Thank you in advance.

  8. Felicitas Says:

    Hey there! I know this is kind of off topic but I was wondering if you knew where I could find a captcha plugin
    for my comment form? I’m using the same blog platform as
    yours and I’m having problems finding one? Thanks a lot!

  9. therapist cobham Says:

    I can’t have enough of it.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: