FusionCharts v3 Documentation

You are viewing documentation for an older version. For current documentation - click here.

FusionCharts PHP Class API > Grid Chart

Let's create a grid chart that will visually depict the Weekly Sales of a fictitious shop. The sample data that we intend to plot can be tabularized as under:

Week	Previous Month (sales)
Week 1	$40800
Week 2	$31400
Week 3	$26700
Week 4	$54400
Week 5	$88544
Week 6	$22544
Week 7	$65548

Let's see how to use FusionCharts PHP Class to plot this data into a Grid chart:

<?php
           # Include FusionCharts PHP Class
           include('../Class/FusionCharts_Gen.php');
           # Create SSGrid chart Object 
           $FC = new FusionCharts("grid","300","200"); 
        
           # set the relative path of the SWF file
           $FC->setSWFPath("../FusionCharts/");       
       
           # set grid font and font size
           $FC->setGridParams("baseFont=verdana;baseFontSize=12");      
        
            # Set grid value Percent on
           $FC->setGridParams("showPercentValues=1");
        
            # Set alternate row back ground color
           $FC->setGridParams("alternateRowBgColor=EAECEF");
        
            # number item per page
           $FC->setGridParams("numberItemsPerPage=4");
        
            # Add grid values and category names
           $FC->addChartData("40800","label=Week 1");
           $FC->addChartData("31400","label=Week 2");
           $FC->addChartData("26700","label=Week 3");
           $FC->addChartData("54400","label=Week 4");
           $FC->addChartData("88544","label=Week 5");
           $FC->addChartData("22544","label=Week 6");
           $FC->addChartData("65548","label=Week 7");     
      ?>
        <html>
            <head>
               <title>SSGrid with PHP Class</title>
               <script language='javascript' src='../FusionCharts/FusionCharts.js'></script>
            </head>
            <body>
               <?php
                        # Render Grid
                       $FC->renderChart();
               ?>
            </body>
       </html>

Let's analyze the steps involved in the above code:

We include FusionCharts_Gen.php in the program. This file contains FusionCharts PHP Class codes.
```
include('../Class/FusionCharts_Gen.php');
```
We create a Grid chart object.
```
$FC = new FusionCharts("grid","300","200");             
```
The constructor of FusionCharts PHP Class is invoked and it initializes chart type, chart width and chart height properties of the object.
Next, we set relative path to the chart SWF files using setSwfPath() function. This is the path from which we load the chart SWF files.
```
$FC->setSWFPath("../FusionCharts/");
```
Hereby, we use setGridParams() to set grid chart parameters(attributes) (Note that for Grid chart it is necessary to use this function instead of setChartParam() or setChartParams() . In the following line, we set font face and font size of the grid. The two attributes are separated by delimiters.
```
$FC->setGridParams("baseFont=verdana;baseFontSize=12");
```
Then, we set to show the grid values as percentage.
```
$FC->setGridParams("showPercentValues=1");
```
Next, we set background color of alternate data rows.
```
$FC->setGridParams("alternateRowBgColor=EAECEF");
```
We now set number of data items that we want to display in one particular page. We set no. of items per page to four. In the following chart, the first page then displays four data and the next page displays the remaining three data items.
```
$FC->setGridParams("numberItemsPerPage=4");
```

Now, we provide chart data with addChartData() function. We pass the value first and then, the category name against each value as a parameter i.e., label=Week 1 etc.

 $FC->addChartData("40800","label=Week 1");
 $FC->addChartData("31400","label=Week 2");
 $FC->addChartData("26700","label=Week 3");
 $FC->addChartData("54400","label=Week 4");
 $FC->addChartData("88544","label=Week 5");
 $FC->addChartData("22544","label=Week 6");
 $FC->addChartData("65548","label=Week 7");

Finally, we include FusionCharts.js - FusionCharts JavaScript Embedding Class and
Display the chart using renderChart() function.
```
$FC->renderChart();
```

Here is the Grid chart displaying the first page with four data items that our FusionCharts PHP Class renders:

To see the remaining data items that reside on the next page, we have to click on the arrow(button) lying at the bottom of first page. Then, we will see the next page as shown in the image below :