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: Table of Contents
FusionCharts_XT_with_PHP
. This will be our demo folder.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.Includes
folder from FusionCharts XT Download Package > Code > PHP > Includes
to our demo folder./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 PHPWithin 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:
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
.true
.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: 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.
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…
View Comments
Thank you for every other informative site. Where else may I get that kind of information written in such
an ideal manner? I have a project that I am just now working on,
and I've been at the look out for such info.
Just want to say your article is as surprising.
The clarity in your post is simply cool and i can assume
you're an expert on this subject. Fine with your permission let me to grab your RSS feed to keep updated with forthcoming post.
Thanks a million and please keep up the gratifying work.
Thankfulness to my father who stated to me concerning this weblog,
this blog is actually awesome.
Thanks for another wonderful post. Where else could anyone gget that kkind of inffo in such aan ideal
way of writing? I have a prewentation subsequent week,
and I am on the search forr such information.
Hello there! Quick question that's totally off topic. Do you
know how to make your site mobile friendly? My blog looks weird when browsing from my apple
iphone. I'm trying to find a template or plugin that might be
able to resolve this problem. If you have any suggestions,
please share. Cheers!