Choose your database:
MS SQL Server
SQL Anywhere

Subscribe to our news:
David Lantz: "Thank you, this is by far the simplest, and most friendly utility for building db record system I have ever used. I wish I could get my systems guys at the office to purchase this for our company would be so very helpful and speed up a lot of work. I for one have used it for everything from a simple inventory record of my house, to a members record for my church just little pet projects and a test bed to test my own db builds and theories before having to hand code at the office..... it is a lot of fun to work with".
Dave Lantz: "I have to say that I simple love this product and its ease of use. I know that I have only tapped into about 20% of what it can do. In my business I come into a lot of contact with developers and I tell them all, that if they need an easy way to connect, report or work their databases they MUST check out your products".


Add your opinion

SQL Maestro Group / Resources / Latest resources / How to add a chart to a webpage created with PHP Generator?

How to add a chart to a webpage created with PHP Generator?

Last modified: May 14, 2013

Prev Next
UPDATE: Starting from the version 16.3 PHP Generator provides direct support for charts based on the Google Chart Library, so you might want to read this article only if you really need to incorporate a different chart library into your application. Otherwise study the examples from our Feature Demo and take a look at the appropriate video lesson.


The article illustrates how to add charts to pages produced by PHP Generator with the help of popular chart libraries.


Charts provide a perfect way to visualize data. You can easily add a chart to a webpage created with PHP Generator using its built-in feature named custom templates and any of available JavaScript chart libraries like freeware Google Chart or commercial tools such as HighChart and FusionCharts.


The main ideas of webpage appearance customization were described in the previous article. According to them we have to follow these steps:

  • create a new template;
  • instruct PHP Generator to use this template for a certain webpage;
  • add code that renders the chart to the template.

You can find a live example of a page with a chart in our demo application.

In the examples below we will create various charts based on the following result set returned by a query.

The 'Sales By Country' webpage.Picture 1. The 'Sales By Country' webpage.

Example 1

As the first example we take as a goal to add to the top of the 'Sales By Country' page a Geo Chart, a chart with a map of the World with countries filled with colors corresponding to the sales volumes. As a chart library we use Google Charts.

Step 1

First we need to create a custom template file. Of course, you can create the custom template from the scratch, but it's easier to get as a basis the template that is currently used. As we want to modify the appearance of the data grid, we have to use the components/templates/list/grid.tpl template file. Let's copy it to the custom_templates folder with another name, e.g. sales_by_country_edit.tpl.

Step 2

Now we need to specify the generated application to use the new template file for the grid of the sales_by_country webpage. To do this, open the editor of this page in PHP Generator, specify the OnGetCustomTemplate event handler code, and regenerate the application.

Listing 1. OnGetCustomTemplate event handler
if ($part == PagePart::Grid && $mode == PageMode::ViewAll)
  $result = 'sales_by_country_grid.tpl';
The screenshot below displays how the event handler looks in PHP Generator.

Specifying the edit handlerPicture 2. Specifying the edit handler

Step 3

Now the appearance of the grid at the 'Sales By Country' webpage completely depends on the sales_by_country_grid.tpl file content. To add a chart to the page, simply place the necessary code at the beginning of the sales_by_country_grid.tpl file using any text editor.

Listing 2. Chart creation code (Google Geo chart).
// Loading necessary libraries.
<script type='text/javascript' src=''></script>
<script type='text/javascript'>
 google.load('visualization', '1', {'packages': ['geochart']});
  // Callback that creates and populates a data table,
  // instantiates the geo chart, passes in the data and draws it.
  function drawRegionsMap() {
    // Create the data table and populate it with content of the 'country' and 'total_sales' columns.
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Total Sales']
      {foreach item=Row from=$DataGrid.Rows name=RowsGrid}
          ,['{$}', {$Row.DataCells.total_sales.Data}]
    // Set chart options.
    var options = {};
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
// Div that will hold the chart.
<div style="height: 600px; overflow: visible;">
  <div id="chart_div" style="width:900px; height:500"></div>

The result is shown below.

The result page with the geography chart.Picture 3. The result page with the geography chart.

Example 2

Now we want to add a Column Chart using the Fusion Charts library. To use this package, we need to copy all the library files to any directory of the computer the webserver is installed on.

The first and second steps in this case are the same as in the previous example. The block code corresponding to the selected chart is shown below.

Listing 3. Creating a column chart with the Fusion Charts library.
<script language="Javascript" src="FusionCharts/Charts/FusionCharts.js"></script>
// Loading necessary libraries.
include "FusionCharts/Code/PHPClass/Includes/FusionCharts_Gen.php";
// Creating the appropriate object.
$FC = new FusionCharts("Column2D", "800", "400");
// Populating the data.
foreach ($DataGrid['Rows'] as $row)
    $FC->addChartData($row['DataCells']['total_sales']['Data'], "Label=".$row['DataCells']['country']['Data']);
// Adding the chart to the webpage.

Here you can see the result of our operations.

The 'Sales By Country' webpage with the Fusion column chartPicture 4. The 'Sales By Country' webpage with the Fusion column chart.

Example 3

Now let's add a Pie Chart of the HighCharts library. As in the previous example we skip to the third step. The code that should be entered into the sales_by_country_grid.tpl file is as follows.

Listing 4. Creating a pie chart with the HighCharts library.
// Loading necessary libraries.
<script src=""></script>
<script src=""></script>
//Setting chart options.
<script type="text/javascript">
$(function () {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
	    title: {
                text: ''
	    tooltip: {
                pointFormat: '{}:<b>{point.percentage:.1f}%</b>',percentageDecimals: 1
	    plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
	    title: '',
            series: [{
                type: 'pie',
                data: [
                // Preparing the data for the chart.
		{foreach item=Row from=$DataGrid.Rows name=RowsGrid}
		    {if $smarty.foreach.RowsGrid.index > 0}
// Adding the chart to the webpage.
<div id="container" style="width: 100%; height: 400px;"></div>

The result is shown below.

The 'Sales By Country' webpage with a pie chart.Picture 5. The 'Sales By Country' webpage with a pie chart.


We hope you have been convinced of the simplicity of working with chart libraries in PHP Generator and now the only limit of using charts on your webpages is your imagination!

Prev Next