Using JpGraph

by cguyer
JpGraph can dynamically generate various types of graphs based on data you feed it from a database/array. This tutorial is just how I use it and how I got it working. As I deal with it more, I will try to include more information.
First off decide if JpGraph is what you want. visit their site http://www.aditus.nu/jpgraph/ There are 2 versions. 1.x for php 4 and 2.x for php 5. They will no longer be supporting v 1.x but it is the version I have successfully used and what this tutorial is currently based on.

  1. Download JpGraph
  2. Under your Cake install, create a folder in your apps/vendors directory called jpgraph.
  3. Upload the files in the JpGraph1.x/src folder to the folder you just created in your cake install

In your controller (mine: ReportsController)

set your layout: $this->layout='ajax';
which is a default layout for cake 1.2

query for your data. the format of the data has to be in an array.
array(1,2,3);
so if you do a query and the returned data looks like this
$data['Model'][['field'] you would have to do a loop or something and set $graphdata[]=$data['Model'][['field'];
then just set that for the view $this->set('graphdata',$graphdata);


In your View (mine: fullreport)
at the top you would add (mine being a pie chart)

<?php
vendor
'jpgraph/jpgraph' );
vendor'jpgraph/jpgraph_pie' ); //set this to your chart type
?>
Then just read the manual on what all you need to do to display the graph. Below is just some real code i used.


<?php
// Create the Pie Graph.
$graph = new PieGraph(1000,950,"auto");
$graph->SetShadow();
$graph ->legend->Pos0.25,0.8,"right" ,"bottom");
$graph->legend->SetFont(FF_VERDANA,FS_BOLD,12);
$graph->title->SetMargin (20); 

// Set A title for the plot
$graph->title->Set("Full Report");
$graph->title->SetFont(FF_VERDANA,FS_BOLD,24);
//students
$graph->subtitle->Set("(n=$total)");
$graph->subtitle->SetFont(FF_VERDANA,FS_BOLD,8);


// Create plots
$size=0.13;
$p1 = new PiePlot($data1);
$p1->SetLegends(array("1 - Not Yet","2","3 - Emerging","4","5 - Somewhat","6","7 - Completely","Blank (No Answer)"));
$p1->SetSize($size);
$p1->SetGuideLines(true,false);
$p1->SetGuideLinesAdjust(1.1,3);
$p1->SetCenter(0.25,0.32);
$p1->value->SetFont(FF_VERDANA);
$p1->title->Set("Positive Social Emotional Skills");
$p1->title->SetMargin(45);
$p1->SetSliceColors(array('red','orange','yellow','green','purple','blue','brown','black')); 


$p2 = new PiePlot($data2);
$p2->SetSize($size);
$p2->SetGuideLines(true,false);
$p2->SetGuideLinesAdjust(1.1,3);
$p2->SetCenter(0.65,0.32);
$p2->value->SetFont(FF_VERDANA);
$p2->title->Set("Acquisition and Use of Knowledge and Skills");
$p2->title->SetMargin(45);
$p2->SetSliceColors(array('red','orange','yellow','green','purple','blue','brown','black')); 


$p3 = new PiePlot($data3);
$p3->SetSize($size);
$p3->SetGuideLines(true,false);
$p3->SetGuideLinesAdjust(1.1,3);
$p3->SetCenter(0.25,0.75);
$p3->value->SetFont(FF_VERDANA);
$p3->title->Set("Use of Appropriate Behaviors to Meet Needs");
$p3->title->SetMargin(45);
$p3->SetSliceColors(array('red','orange','yellow','green','purple','blue','brown','black')); 



$graph->Add($p1);
$graph->Add($p2);
$graph->Add($p3);

$graph->Stroke();
?

Note that this view is purely for generating the image. You can not do any other echos or prints on this page or you will get an error and the image will not be generated.

If you want to use this image in a view. You have to use another view and actually call this view as an image source

So if this View was called ReportImage.
In another View called Report or whatever you would do this


<?php
   
echo "This is an image of my report":
   echo 
"<img src='/reports/reportimage'></img>";
?>
you could also pass a parameter in the img src as well if you wanted to pass say an id for a form that the image would be generated off of.

Well thats the best way I can explain it. I'm sure there may be better ways to do it but thats how I have it working. Ask questions and I will try to help.

Report

More on Tutorials

Tags

Advertising

Comments

  • johndoe posted on 06/15/11 03:10:09 AM
    Tried a lot of tutorial to use jpgraph with cake.
    The tutorial part is straightforward.
    I've created very simple way to use jpgraph, same as the other tutorial.
    Everything fine, the graph generated properly. But when it come to load model to create dynamic value, Jpgraph will generate error image, saying that it cannot be displayed because it contains errors.
    Take a look at their site, FAQ part said that the solution is to disable the output buffering. But I personally don't think this is permanent solution.

    I still cannot pinpoint the root of the cause.
  • CalamityJane posted on 06/23/10 02:24:56 PM
    Thanks for the tutorial. What I haven't figured out yet is how I get this image in my normal layout. With the ajax layout I get a white page with my image even when I call it from another function of my controller and give this function $this->layout='default';

    Any ideas or solutions anybody?

    Thank you Jane
  • rabiek posted on 05/17/10 09:01:03 AM
    Thanks for this tutorial,

    I created a view "line" with the example provided in JPGraph Manual :


    View Template:



    vendor('jpgraph/jpgraph');
    vendor('jpgraph/jpgraph_line' ); //set this to your chart type
    // Some data
    $ydata = array(11,3,8,12,5,1,9,13,5,7);

    // Create the graph. These two calls are always required
    $graph = new Graph(350,250);
    $graph->SetScale('textlin');
     
    // Create the linear plot
    $lineplot=new LinePlot($ydata);
    $lineplot->SetColor('blue');
     
    // Add the plot to the graph
    $graph->Add($lineplot);
     
    // Display the graph
    $graph->Stroke();




    as you mentioned if I call that view it will give me an error but when I did insert the

    View Template:

      echo "<img src='/reports/line'>";  in another view it would not display the image.
    is there away I can troubleshoot it..
    Debug mode doesn't give me any error and also Firebug as well.

    Am I doing something wrong here ?

    Thanks for help.
login to post a comment.