Introduction to the FusionCharts PHP Wrapper

FusionCharts PHP Wrapper can be downloaded from here.

FusionCharts Suite XT includes the FusionCharts PHP wrapper that lets you create interactive, data-driven charts in your PHP website without writing any JavaScript code.

JavaScript and HTML code is used to generate charts in the browsers. The server-side PHP wrapper generates the required JavaScript and HTML code as a string, which is then used to render charts on a browser page.

In this section, you will be shown how you can create a simple chart using the FusionCharts server-side PHP wrapper.

We will create a simple column 2D chart that plots the monthly revenue for the last year at Harry’s SuperMart. The data for the chart is shown in the table below:

Month Revenue (In USD)
Jan 420000
Feb 810000
Mar 720000
Apr 550000
May 910000
Jun 510000
Jul 680000
Aug 620000
Sep 610000
Oct 490000
Nov 900000
Dec 730000

The rendered column 2D chart will look like this:

FusionCharts will load here..

The data structure, with the steps in comments, that shows how you can use the FusionCharts PHP wrapper to plot the above chart is given below:

<?php
   /**
    * step 1: Include the `fusioncharts.php` file that contains functions to embed the charts.
    */
   include("includes/fusioncharts.php");
?>
<html>

   <head>
    <title>FusionCharts XT - Simple Column 2D Chart</title>
    <!--
        Step 2:  Include the `fusioncharts.js` file. This file is needed to render the chart.
         Ensure that the path to this JS file is correct. Otherwise, it may lead to JavaScript errors.
    -->
    <script src="fusioncharts/fusioncharts.js"></script>
   </head>
   <body>
    <?php
        /**
         *  Step 3: Create a `columnChart` chart object using the FusionCharts PHP class constructor. 
         *  Syntax for the constructor: `FusionCharts("type of * chart", "unique chart id", "width of chart", 
         *  "height of chart", "div id to render the chart", "data format", "data source")`
         */
        $columnChart = new FusionCharts("Column2D", "myFirstChart" , 600, 300, "chart-1", "json",
            '{
                "chart": {
                    "caption": "Monthly revenue for last year",
                    "subCaption": "Harry\’s SuperMart",
                    "xAxisName": "Month",
                    "yAxisName": "Revenues (In USD)",
                    "numberPrefix": "$",
                    "theme": "zune"
                },
                "data": [
                        {"label": "Jan", "value": "420000"}, 
                        {"label": "Feb", "value": "810000"},
                        {"label": "Mar", "value": "720000"},
                        {"label": "Apr", "value": "550000"},
                        {"label": "May", "value": "910000"},
                        {"label": "Jun", "value": "510000"},
                        {"label": "Jul", "value": "680000"},
                        {"label": "Aug", "value": "620000"},
                        {"label": "Sep", "value": "610000"},
                        {"label": "Oct", "value": "490000"},
                        {"label": "Nov", "value": "900000"},
                        {"label": "Dec", "value": "730000"}
                    ]
                }');
        /**
         *  Because we are using JSON/XML to specify chart data, `json` is passed as the value for the data
         *   format parameter of the constructor. The actual chart data, in string format, is passed as the value
         *   for the data source parameter of the constructor. Alternatively, you can store this string in a 
         *   variable and pass the variable to the constructor.
         */

        /**
         * Step 4: Render the chart
         */
        $columnChart->render();
    ?>
    <div id="chart-1"><!-- Fusion Charts will render here--></div>
   </body>
</html>
Was this article helpful to you ?
Where do you think this article needs improvement?