JavaScript charts in PHP using FusionCharts XT – Part 1

PHP developers often build applications that work on a diverse data spectrum like sales, marketing, finance, health care or government and beyond. For the end-users of such applications to be able to make sense and take the right actions, it is necessary to represent data in the right form as dashboards or reports. Dashboards, which are an inter-connected collection of charts, gauges and grids facilitate inference, insight and actions – the most critical aspects of any enterprise. Many charting components are available for use in your PHP apps. While most of these are server side components that generate static images of charts and gauges, without any interactivity, a few are client-side solutions that use JavaScript or Flash to generate interactive charts, gauges and grids. Enter FusionCharts Suite, the industry’s leading enterprise-grade JavaScript charting solution. 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. An example of a JavaScript chart generated by FusionCharts XT is shown below. Interact with it by hovering over a column to see the tool-tip, or use the scrollbar below the columns to see more data points, or click on the legend key to show/hide a data-series. To plot a chart using PHP, you need to include the HTML and JavaScript code to embed a chart object and then provide the requisite parameters. To make things simpler for you, we have put all this functionality in a PHP script named FusionCharts.php. This script is bundled in FusionCharts XT Download Package > Code > PHP > Includes > FusionCharts.php. So, whenever you need to work with FusionCharts XT in PHP, just include this file in your page and you’re good to go. In this series of blog posts, we will show you how to build interactive JavaScript charts using FusionCharts XT in your PHP applications. We will start with the basic charts and move on to advanced examples like powering the charts using databases, adding drill-down capabilities and more. Specifically, the series will be divided into the following posts:

• Creating a simple chart in PHP using the FusionCharts XT
• Powering the charts in your PHP apps using data from MySQL database
• Adding drill-down capabilities to these charts in PHP
• Creating LinkedCharts in PHP
• Using the Debugging Tools provided

So let’s get started!

What we are going to visualize

The JavaScript chart shown above is specific chart type a Scroll Combination chart with dual Y axes in FusionCharts parlance. The data provided to it visualizes the Top 25 Multilingual Countries versus their population. We will re-create this chart using the Data URL and the Data String methods. You can use any of these methods you provide data to any chart created using FusionCharts XT. FusionCharts XT understands data in either XML or JSON. Depending upon the chart type being used, the structure of the XML or JSON will differ. We will try out both the formats in this post.

What we will need

• PHP running on any server
• The latest version of FusionCharts XT
• XML file containing the chart data

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 entire Charts folder from the FusionCharts XT Download Package and paste it within our demo folder. This completes the installation of FusionCharts XT in our web application.
3. Copy the Includes folder from FusionCharts XT Download Package > Code > PHP > Includes to our demo folder.

Why use the Scroll Column chart with Dual Y Axes?

Plotting 25 columns within this blog’s width would crunch them together. So we pick the well spaced Scroll Column charts over the regular Column charts. Secondly, the chart will have values in 2 different units – number of languages spoken and the population. Plotting values of different units on the same Y axis would lead to incorrect visualization; therefore we would use the Scroll Column 2D Dual Y axes chart.

Creating a chart from static XML

In the Data URL method, you tell FusionCharts XT to load data from an XML or JSON file URL. This URL could also point to a virtual data provider, e.g., /path_to/data_provider.php, which will execute queries on the database, construct the XML data and output it to the stream, with content type set to text/xml. For this example, we will point FusionCharts XT to an XML file’s URL. Create a blank PHP file within the demo folder and save it as FusionCharts_XT_Data_URL.php. Include the FusionCharts.php library, and create a simple HTML page. Include FusionCharts.js in the head tag.

< ?php
include('Includes/FusionCharts.php');
?>

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Using FusionCharts XT with PHP

Within the chartContainer div, we will call the renderChart() method. This method generates all the HTML and JavaScript code required to create a chart. We will write this generated code within the container div. Since we want to render the chart in JavaScript, we need to specify this before rendering the chart:

< ?php
FC_SetRenderer('javascript');

echo renderChart('Charts/ScrollCombiDY2D.swf', 'Most_Multilingual_Countries_VS_Their_Population.xml', '', 'using_setXMLUrl', '660', '400', false, true);
?>

Save this page, and navigate to this page using your web browser. This is the JavaScript chart that you should get to see: The renderChart() method takes parameters in the following order:

• Chart SWF name: The first parameter contains the Path and file name of the chart SWF file. We have to use the relative path to SWF file, which is recommended. When plotting charts in JavaScript, FusionCharts XT uses the SWF name to internally map to the chart’s JavaScript alias.
• URL to static XML file, if Data URL method is to be used. If you intend to use Data String method, leave this as blank.
• Variable containing XML data string, if Data String method is to be used. If you have specified data as a URL, leave this parameter as blank.
• ID of the chart – Each chart on the page needs a unique ID. This ID is different from the ID of the container DIV. As we will learn later, this ID is used to get a reference to the chart for manipulation using advanced JavaScript.
• Width and height in pixels – 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. The FusionCharts JavaScript class will automatically convert the percentage dimensions to pixel dimensions, with respect to the parent container element in HTML, DIV in this case, and pass it to the chart.
• Boolean for Debug Mode – If you’re facing any issues while developing your charts, you can initialize them in debug mode by setting this parameter to true. The debug mode gives you behind-the-scenes information on where data is loaded from, errors etc. In our example, we are rendering the chart in normal mode, by setting this parameter to false.
• Boolean for Registering with JavaScript – In earlier versions of FusionCharts, the last parameter let you configure whether charts could be controlled using JavaScript. Now that FusionCharts is very tightly integrated with FusionCharts, this parameter is a mandatory true.

Creating a chart from XML string

In the Data String method, the XML or JSON data is embedded within the web page, along with the chart’s HTML and JavaScript code. This method doesn’t require a static data file or a virtual data provider. Moreover, once the chart has finished loading, the data is present locally within the page. Create a blank PHP file within the demo folder and save it as FusionCharts_XT_Data_String.php. Include the FusionCharts.php library. We will create a string variable which will hold the XML data for our chart. Let us make use of the same XML file we used before for the Data URL method. Copy the contents of the file and paste it as the content for the string variable.

< ?php
include('Includes/FusionCharts.php');
$strXML = "
";
?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Using FusionCharts XT with PHP

< ?php
FC_SetRenderer('javascript');

echo renderChart('Charts/ScrollCombiDY2D.swf', '', $strXML, 'using_setXMLData', '660', '400', false, true);
?>

Again we will call the renderChart() method within the div container. However, we will leave the second parameter blank (which takes in the path to the URL) and make use of the third parameter to provide the variable that holds the XML data. Save this page, and navigate to this page using your web browser. You should get to see the same JavaScript chart as before:

Providing data in JSON

To provide JSON data to the chart, instead of XML, you can call the following method before the renderChart() method of the specific chart:

FC_SetDataFormat("json");

We provide a tool with which you can convert chart data from XML to JSON. You can find it in the FusionCharts Download Package > Tools > FCDataConverter. You can paste in the XML provided above and get the chart data in JSON:

{
"chart": {
"caption": "Top 25 Multilingual Countries vs Their Population",
"pyaxisname": "Languages Spoken",
"syaxisname": "Population",
"showvalues": "0",
"useroundedges": "1",
"palette": "3",
"numvisibleplot": "5",
"sformatnumberscale": "1",
"linethickness": "5",
"anchorradius": "5"
},
"categories": [
{
"category": [
{
"label": "Canada"
},
{
"label": "China"
},
{
"label": "India"
},
{
"label": "United States"
},
{
"label": "Russian Federation"
},
{
"label": "Tanzania"
},
{
"label": "South Africa"
},
{
"label": "Congo, The Democratic Republic of the"
},
{
"label": "Kenya"
},
{
"label": "Mozambique"
},
{
"label": "Philippines"
},
{
"label": "Uganda"
},
{
"label": "Nigeria"
},
{
"label": "Iran"
},
{
"label": "Sudan"
},
{
"label": "Angola"
},
{
"label": "Vietnam"
},
{
"label": "Indonesia"
},
{
"label": "Czech Republic"
},
{
"label": "Austria"
},
{
"label": "Pakistan"
},
{
"label": "Myanmar"
},
{
"label": "Chad"
},
{
"label": "Sierra Leone"
},
{
"label": "Namibia"
}
]
}
],
"dataset": [
{
"seriesname": "Languages Spoken",
"showvalues": "1",
"data": [
{
"value": "12"
},
{
"value": "12"
},
{
"value": "12"
},
{
"value": "12"
},
{
"value": "12"
},
{
"value": "11"
},
{
"value": "11"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "9"
},
{
"value": "9"
},
{
"value": "9"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
}
]
},
{
"seriesname": "Population",
"parentyaxis": "S",
"data": [
{
"value": "31147000"
},
{
"value": "1277558000"
},
{
"value": "1013662000"
},
{
"value": "278357000"
},
{
"value": "146934000"
},
{
"value": "33517000"
},
{
"value": "40377000"
},
{
"value": "51654000"
},
{
"value": "30080000"
},
{
"value": "19680000"
},
{
"value": "75967000"
},
{
"value": "21778000"
},
{
"value": "111506000"
},
{
"value": "67702000"
},
{
"value": "29490000"
},
{
"value": "12878000"
},
{
"value": "79832000"
},
{
"value": "212107000"
},
{
"value": "10278100"
},
{
"value": "8091800"
},
{
"value": "156483000"
},
{
"value": "45611000"
},
{
"value": "7651000"
},
{
"value": "4854000"
},
{
"value": "1726000"
}
]
}
]
}

If you change the chart’s data format to JSON and provide this JSON data, you would get the same chart as before. JSON can be provided using the Data URL and Data String method too, just like XML.

Download the source files for this demo

Next article in this series: Create a chart using data from a database

In the next article, we will create a chart using data from a database. If, however, you’re feeling impatient, you can head over to our documentation and read on how to use FusionCharts XT to create charts using data from a database. Stay tuned.