phpGrid, phpChart Integration

 

Run Demo

phpGrid phpChart Integration

It’s easy to combine both phpGrid and phpChart into a seamless integrated, interactive, and completely web-based ad-hoc content and report management tool.

 

Setup

Before start, You must acquire both phpGrid and phpChart. You can download both for free.

It’s important to install phpGrid and phpChart in separate folder. Below is the folder structure used in our example. phpGrid and phpChart each resides in separate folder inside phpGrid_phpChart folder under web root folder htdocs. This is RECOMMENDED folder hierarchy.

htdocs
+-- phpGrid_phpChart
|   |-- phpGrid
|   |   +-- conf.php
|   |-- phpChart
|   |   +-- conf.php
|   +-- phpgrid_phpchart_integration.php
 

Once folder structure is ready. Set up phpGrid SERVER_ROOT value and phpChart SCRIPTPATH value in each of their respective conf.php file.

phpGrid conf.php

1
define('SERVER_ROOT', '/phpGrid_phpChart/phpGrid');

phpChart conf.php

1
define('SCRIPTPATH','/phpGrid_phpChart/phpChart/');
 

Programming

Now, we can move on to the actual integration. First all, include both conf.php files on top of the script.

1
2
require_once("phpGrid/conf.php");
require_once("phpChart/conf.php");

Then, create the chart with phpChart. Here in this example we have two charts. The first chart has a single series of data. The second one has two series and renders bar chart instead of the default line chart. All the phpChart methods and properties documents are available on phpChart.net. Pass “null” as the series data if you don’t want to have any initial data in the chart.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// first phpChart with one series
$pc = new C_PhpChartX(array(array(null)), 'Graph');
$pc->set_axes(array(
        'xaxis'=> array('label'=>'Buy Price'),
        'yaxis'=> array('label'=>'$')
    ));
$pc->draw(800,500);

// second phpChart with two series
$pc2 = new C_PhpChartX(array(array(null), array(null)), 'Graph2');
$pc2->set_axes(array(
        'xaxis'=> array(
            'label'=>'Buy Price/MSRP (by Product Code)'),
        'yaxis'=> array('label'=>'$')
    ));
$pc2->set_animate(true);
$pc2->set_legend(array('show'=>true,'location'=>'nw'));
$pc2->draw(800,500);

Finally the last part is to code the datagrid. In our example, we use “products” database table. The most important part of the datagrid is the custom event handler “jqGridLoadComplete” in which the phpGrid, phpChart integration happens. Here, values in both “buyPrice” and “MSRP” columns are retrieved and stored in d1 and d2 as array. You can replace those columns with columns with your own choice in your table. GraphData1 and GraphData2 are used to store the series of data that later will be used to plot our charts created earlier.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$dg = new C_DataGrid("SELECT * FROM products", "productCode", "products");
$dg->enable_edit('FORM');
$onGridLoadComplete = <<<ONGRIDLOADCOMPLETE
function(status, rowid)
{
    var GraphData1 = [];
    var GraphData2 = [];

    d1 = $('#products').jqGrid('getCol', 'buyPrice', false);
    d2 = $('#products').jqGrid('getCol', 'MSRP', false);
    npoints = d1.length;
    for(var i=0; i < npoints; i++){
        GraphData1[i] = [i+1, parseInt(d1[i])];
    }
    _Graph.series[0].data = GraphData1;
    _Graph.replot({resetAxes:true});

    for(var i=0; i < npoints; i++){
        GraphData1[i] = [i+1, parseInt(d1[i])];
        GraphData2[i] = [i+1, parseInt(d2[i])];
    }
    _Graph2.series[0].data = GraphData1;
    _Graph2.series[1].data = GraphData2;
    _Graph2.replot({resetAxes:true});
}
ONGRIDLOADCOMPLETE
;
$dg->add_event("jqGridLoadComplete", $onGridLoadComplete);
$dg->set_col_property('MSRP', array('classes'=>'msrp_bg'));   // change column background color
$dg->set_col_property('buyPrice', array('classes'=>'buyprice_bg'));  // change column background color
$dg->enable_search(true);
$dg->display();

To easily recognize the data source, we set the datagrid column background color to match the series color in phpChart using CSS class

1
2
.msrp_bg { background-color: #4BB2C5 !important; }
.buyprice_bg {  background-color: #F8C05B !important; }
 

The COMPLETE example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<?php
require_once("phpGrid/conf.php");
require_once("phpChart/conf.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>phpGrid phpChart Integration Example</title>
</head>
<body>
<STYLE>
.msrp_bg {
    background-color: #4BB2C5 !important;
}
.buyprice_bg {
    background-color: #F8C05B !important;
}
</STYLE>

<p>Try do a quick search or do a sort. Observe the graph updates in real-time.</p>

<table><tr><td>
<?php
// first phpChart with one series
$pc = new C_PhpChartX(array(array(null)), 'Graph');
$pc->set_axes(array(
        'xaxis'=> array('label'=>'Buy Price'),
        'yaxis'=> array('label'=>'$')
    ));
$pc->draw(600,300);
?>
</td>
<td>
<?php
// second phpChart with two series
$pc2 = new C_PhpChartX(array(array(null), array(null)), 'Graph2');
$pc2->set_axes(array(
        'xaxis'=> array(
            'label'=>'Buy Price/MSRP (by Product Code)'),
        'yaxis'=> array('label'=>'$')
    ));
$pc2->set_animate(true);
$pc2->set_legend(array('show'=>true,'location'=>'nw'));
$pc2->draw(600,300);
?>
</td></tr></table>

<?php
$dg = new C_DataGrid("SELECT * FROM products", "productCode", "products");
$dg->enable_edit('FORM');

$onGridLoadComplete = <<<ONGRIDLOADCOMPLETE
function(status, rowid)
{
    var GraphData1 = [];
    var GraphData2 = [];

    d1 = $('#products').jqGrid('getCol', 'buyPrice', false);
    d2 = $('#products').jqGrid('getCol', 'MSRP', false);
    npoints = d1.length;
    for(var i=0; i < npoints; i++){
        GraphData1[i] = [i+1, parseInt(d1[i])];
    }
    _Graph.series[0].data = GraphData1;
    _Graph.replot({resetAxes:true});

    for(var i=0; i < npoints; i++){
            GraphData1[i] = [i+1, parseInt(d1[i])];
            GraphData2[i] = [i+1, parseInt(d2[i])];
    }
    _Graph2.series[0].data = GraphData1;
    _Graph2.series[1].data = GraphData2;
    _Graph2.replot({resetAxes:true});
}
ONGRIDLOADCOMPLETE
;

$dg->add_event("jqGridLoadComplete", $onGridLoadComplete);
$dg->set_col_property('MSRP', array('classes'=>'msrp_bg'));
$dg->set_col_property('buyPrice', array('classes'=>'buyprice_bg'));
$dg->enable_search(true);
$dg->display();
?>
</body>
</html>

That’s it! Do a quick search or sort. Observe the graph updating in real-time.

Give it a try! | Download Integration Example File

Technical Notes

  • The Javascript used in the custom event handler in phpGrid is the bread and butter of integration.
  • Set array to null for initial graph.
  • On initial plot creation you can pass series of data in a 1-D array. jqPlot internally converts it to a 2-D array. However, this doesn’t happen on .replot().
  • If the page throws an error
    1
    Notice: Constant DEBUG already defined in /phpGrid/conf.php on line 2

    This is because both phpChart and phpGrid have DEBUG constant, you need to comment out of them in conf.php

    1
    // define('DEBUG', true);

No related content found.

Tags: , ,