How to add a chart to a webpage created with PHP Generator?
Last modified: May 14, 2013
The article illustrates how to add charts to pages produced by PHP Generator with the help of popular chart libraries.
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.
Example 1As 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.
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.
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.
if ($part == PagePart::Grid && $mode == PageMode::ViewAll) $result = 'sales_by_country_grid.tpl';
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.
The result is shown below.
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.
Here you can see the result of our operations.
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.
The result is shown below.
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!