Choose your database:
AnySQL
MySQL
MS SQL Server
PostgreSQL
SQLite
Firebird
Oracle
SQL Anywhere
DB2
MaxDB

Subscribe to our news:
Partners
Testimonials
Peter Robinson: "As a tech savvy company director, I wanted an inexpensive web based database application to manage all aspects of my business. As with most humans I find developing purely by CLI very hard and do not have the will or time to invest in improving my skills. I was looking to find a nice human friendly GUI to design and build my application, which is when I came across PHP Generator for MySQL.

Whilst you still need a great understanding of logic and a small amount of programming ability to get the specific results you require, I am very happy with the speed of progress I have been making with this invaluable tool.

With all the standard libraries included, this product makes normal requirements such as JavaScript form validation, lookup selectors, on click events, auto complete, detailed searches, multiformat exports, rss feeds and username security straight forward and quick.

Having any changes made via the GUI written to the web server at the click of a button makes testing out ideas quick and easy without fear of breaking your application.

To conclude, I couldn't find any other product on the market that came close to offering the amount of options this does, and I do hope that more products like this come out in the future, with the hope of eventually eradicating the need to program all together".

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".

More

Add your opinion

SQL Maestro Group / Products / MySQL / 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.

Abstract

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

Problem

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.

Solution

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).
{literal}
 
// Loading necessary libraries.
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
 google.load('visualization', '1', {'packages': ['geochart']});
 google.setOnLoadCallback(drawRegionsMap);
 
  // 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']
      {/literal}
      {foreach item=Row from=$DataGrid.Rows name=RowsGrid}
          ,['{$Row.DataCells.country.Data}', {$Row.DataCells.total_sales.Data}]
      {/foreach}
      {literal}
      ]);
 
    // 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);
};
</script>
 
{/literal}
 
// Div that will hold the chart.
<div style="height: 600px; overflow: visible;">
  <div id="chart_div" style="width:900px; height:500"></div>
</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.
{literal}
 
<script language="Javascript" src="FusionCharts/Charts/FusionCharts.js"></script>
 
{/literal}
 
{php}
 
// Loading necessary libraries.
include "FusionCharts/Code/PHPClass/Includes/FusionCharts_Gen.php";
 
// Creating the appropriate object.
$FC = new FusionCharts("Column2D", "800", "400");
 
// Populating the data.
$DataGrid=$this->get_template_vars('DataGrid');
foreach ($DataGrid['Rows'] as $row)
    $FC->addChartData($row['DataCells']['total_sales']['Data'], "Label=".$row['DataCells']['country']['Data']);
 
// Adding the chart to the webpage.
$FC->setRenderer('javascript');
$FC->renderChart();
{/php}

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.
{literal}
 
// Loading necessary libraries.
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
 
//Setting chart options.
<script type="text/javascript">
$(function () {
    $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
 
	    title: {
                text: ''
            },
 
	    tooltip: {
                pointFormat: '{series.name}:<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: [
		{/literal}
 
                // Preparing the data for the chart.
		{foreach item=Row from=$DataGrid.Rows name=RowsGrid}
		    {if $smarty.foreach.RowsGrid.index > 0}
		    ,
		    {/if}
	            ['{$Row.DataCells.country.Data}',
		    {$Row.DataCells.total_sales.Data}]
		{/foreach}
 
                {literal}
		]
	    }]
        });
    });
</script>
{/literal}
 
// 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.

Conclusion

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