FusionCharts XT can effectively be used with PHP to plot dynamic data-driven charts. Introducing new and modified PHP wrapper of FusionCharts and it usage in this section. Even when used with PHP, FusionCharts XT internally uses JavaScript and XML/JSON to render the charts. The PHP code actually helps you output this JavaScript and XML/JSON. For PHP developers who wouldn’t want to dabble in JavaScript, it also provides server-side libraries which enable them to create delightful charts in JavaScript. These libraries help in connecting to data sources, producing the chart data, and generating the required HTML and JavaScript code, which can be easily embedded in any web page.


You can easily download the latest PHP wrapper of FusionCharts from here. This script is bundled in php-wrapper> Code > wrappers > php-wrapper > fusioncharts.php


The FusionCharts PHP wrapper lets you load data for a chart using:

  • a static JSON string or JSON URL

  • a static XML string or XML URL

  • a JSON string generated from an associative array

  • an XML string generated from an associative array

Requirements


Let's get started

  1. Within the root directory of your web server, create a folder named FusionCharts_XT_with_PHP. This will be our demo folder.

  2. Copy the ‘fusioncharts.php’ file from the PHP wrapper downloaded into it.


Creating a chart from static XML

Using Data String Method:


  1. Create a blank PHP file within the demo folder and save it as FusionCharts_PHP.php.

  2. Include the fusioncharts.php library, and create a simple HTML page.

  3. Include fusioncharts.js in the head tag.

  4. Create a chart object like “columnChart” 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")

  5. Render the chart using the render() method with the help of chart object.



The FusionCharts constructor takes parameter in the following order:


Chart Type: It is used to specify the type of chart to be rendered listed here.


Chart ID: It is used to specify a unique identifier for the chart. If multiple charts are rendered on the same HTML page, each chart is referred to using its unique ID.


Width and Height of chart: Each chart needs to be initialized with width and height, specified either in pixels (specified in numeric format, without appending px) or percentage. In this example, we have used pixels. You can also set it to percentage values.


ID of the <div> container: Specific ID for the DIV container is included as mentioned in the <div> tag, so that the chart will render in that particular container of the web page.


Data Format: It is used to specify the type of data that will be passed to the chart. This attribute takes the following values: json, xml, jsonurl, xmlurl


Data Source: It specifies the source from where the data will be fetched, depending on the value passed to the dataFormat attribute.



Using Data URL Method:


Follow the same steps as mentioned in the Data String method. The change is only in the two attributes namely, dataFormat and dataSource.


Create a new file as “Data.xml” in the demo folder. Copy the XML data to it. Change the attributes in the file FusionCharts_PHP.php as dataFormat=xmlurl and dataSource=Data.xml


Creating a chart from static JSON

To provide JSON data to the chart, instead of XML, change the Data Format to json/jsonurl and Data Source as per requirement. JSON can be provided using the Data URL and Data String method too, just like XML.



Creating a chart from an XML string generated from an associative array


The XML string can be generated from an associative array. Considering a simple ‘Column2D’ chart, initially an associative array is initialized to store the chart attribute. After that iterate over each chart attribute and convert it into an attribute string. The same procedure is followed in case of generating the label and value pairs. A sample code is shown, which can be copied in the file FusionCharts_PHP.php .



Creating a chart from a JSON string generated from an associative array


Provided the data as JSON, the same procedure is to be followed to convert the associative array to the format of JSON as supported by FusionCharts. Refer this documentation link here .



Download the source files for this demo

  1. FusionCharts_XT_with_PHP

  2. Sample created with XML as an associative array