{"id":2296,"date":"2012-03-15T19:47:16","date_gmt":"2012-03-15T14:17:16","guid":{"rendered":"http:\/\/blog.fusioncharts.com\/?p=2296"},"modified":"2026-01-20T14:41:32","modified_gmt":"2026-01-20T09:11:32","slug":"javascript-charts-in-php-using-fusioncharts-xt-part-1","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/","title":{"rendered":"JavaScript Charts in PHP Using FusionCharts XT: Part 1 Guide 2026"},"content":{"rendered":"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 &#8211; the most critical aspects of any enterprise.\r\n\r\nMany 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&#8217;s leading enterprise-grade <a href=\"https:\/\/www.fusioncharts.com\">JavaScript charting solution<\/a>. For PHP developers who wouldn&#8217;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.\r\n<!--more-->\r\nAn example of a <a href=\"https:\/\/www.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>JavaScript chart<\/strong><\/a> 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.\r\n<!--more-->\r\n\r\n\r\nTo plot a <a href=\"https:\/\/www.fusioncharts.com\/php-charts\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>chart using PHP<\/strong><\/a>, 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 <code>FusionCharts.php<\/code>. This script is bundled in <code>FusionCharts XT Download Package &gt; Code &gt; PHP &gt; Includes &gt; FusionCharts.php<\/code>. So, whenever you need to work with FusionCharts XT in PHP, just include this file in your page and you&#8217;re good to go.\r\n\r\nIn 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:\r\n<ul>\r\n\t<li><a href=\"https:\/\/fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/\">Creating a simple chart in PHP using the FusionCharts XT<\/a><\/li>\r\n\t<li><a href=\"https:\/\/fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/\" target=\"_blank\" rel=\"noopener noreferrer\">Powering the charts in your PHP apps using data from MySQL database<\/a><\/li>\r\n\t<li><a href=\"https:\/\/fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/\" target=\"_blank\" rel=\"noopener noreferrer\">Adding drill-down capabilities to these charts in PHP<\/a><\/li>\r\n\t<li><a href=\"https:\/\/fusioncharts.com\/blog\/javascript-linkedcharts-in-php-and-mysql-using-fusioncharts-xt\/\" target=\"_blank\" rel=\"noopener noreferrer\">Creating LinkedCharts in PHP<\/a><\/li>\r\n\t<li><a href=\"https:\/\/fusioncharts.com\/blog\/debugging-javascript-charts-with-fusioncharts-xt-part-5\/\" target=\"_blank\" rel=\"noopener noreferrer\">Using the Debugging Tools provided<\/a><\/li>\r\n<\/ul>\r\nSo let&#8217;s get started!\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#What_we_are_going_to_visualize\" title=\"What we are going to visualize\">What we are going to visualize<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#What_we_will_need\" title=\"What we will need\">What we will need<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#Why_use_the_Scroll_Column_chart_with_Dual_Y_Axes\" title=\"Why use the Scroll Column chart with Dual Y Axes?\">Why use the Scroll Column chart with Dual Y Axes?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#Creating_a_chart_from_static_XML\" title=\"Creating a chart from static XML\">Creating a chart from static XML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#Creating_a_chart_from_XML_string\" title=\"Creating a chart from XML string\">Creating a chart from XML string<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#Providing_data_in_JSON\" title=\"Providing data in JSON\">Providing data in JSON<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#Download_the_source_files_for_this_demo\" title=\"Download the source files for this demo\">Download the source files for this demo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#Next_article_in_this_series_Create_a_chart_using_data_from_a_database\" title=\"Next article in this series: Create a chart using data from a database\">Next article in this series: Create a chart using data from a database<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_we_are_going_to_visualize\"><\/span>What we are going to visualize<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe JavaScript chart shown above is specific chart type a <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?ChartSS\/ScrollCombiDY2D.html\" target=\"_blank\" rel=\"noopener noreferrer\">Scroll Combination chart with dual Y axes<\/a> in FusionCharts parlance. The data provided to it visualizes the Top 25 Multilingual Countries versus their population.\r\n\r\nWe will re-create this chart using the <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?guide-for-web-developers\/how-fusioncharts-works\/DataURL.html\" target=\"_blank\" rel=\"noopener noreferrer\">Data URL<\/a> and the <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?guide-for-web-developers\/how-fusioncharts-works\/DataXMLExp.html\" target=\"_blank\" rel=\"noopener noreferrer\">Data String<\/a> methods. You can use any of these methods you provide data to any chart created using FusionCharts XT.\r\n\r\nFusionCharts XT understands data in either <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?DataFormats\/XML\/Overview.html\" target=\"_blank\" rel=\"noopener noreferrer\">XML<\/a> or <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?DataFormats\/JSON\/Overview.html\" target=\"_blank\" rel=\"noopener noreferrer\">JSON<\/a>. 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.\r\n<h2><span class=\"ez-toc-section\" id=\"What_we_will_need\"><\/span>What we will need<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<ul>\r\n\t<li>PHP running on any server<\/li>\r\n\t<li><a href=\"https:\/\/www.fusioncharts.com\/download\/\/\" target=\"_blank\" rel=\"noopener noreferrer\">The latest version of FusionCharts XT<\/a><\/li>\r\n\t<li><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/XML_and_JSON.zip\" target=\"_blank\" rel=\"noopener noreferrer\">XML file containing the chart data<\/a><\/li>\r\n<\/ul>\r\n<ol>\r\n\t<li>Within the root directory of your web server, create a folder named <code>FusionCharts_XT_with_PHP<\/code>. This will be our demo folder.<\/li>\r\n\t<li>Copy the entire <code>Charts<\/code> 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.<\/li>\r\n\t<li>Copy the <code>Includes<\/code> folder from <code>FusionCharts XT Download Package &gt; Code &gt; PHP &gt; Includes<\/code> to our demo folder.<\/li>\r\n<\/ol>\r\n<h2><span class=\"ez-toc-section\" id=\"Why_use_the_Scroll_Column_chart_with_Dual_Y_Axes\"><\/span>Why use the Scroll Column chart with Dual Y Axes?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nPlotting 25 columns within this blog&#8217;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 &#8211; 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.\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_a_chart_from_static_XML\"><\/span>Creating a chart from static XML<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn 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., <code>\/path_to\/data_provider.php<\/code>, which will execute queries on the database, construct the XML data and output it to the stream, with content type set to <code>text\/xml<\/code>. For this example, we will point FusionCharts XT to an XML file&#8217;s URL.\r\n\r\nCreate a blank PHP file within the demo folder and save it as <code>FusionCharts_XT_Data_URL.php<\/code>.\r\nInclude the <code>FusionCharts.php<\/code> library, and create a simple HTML page. Include <code>FusionCharts.js<\/code> in the <code>head<\/code> tag.\r\n<pre class=\"lang:php\">&lt; ?php\r\ninclude('Includes\/FusionCharts.php');\r\n?&gt;\r\n\r\n&lt; !DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\"\r\n\"https:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\"&gt;\r\n\r\nUsing FusionCharts XT with PHP\r\n\r\n<\/pre>\r\nWithin the <code>chartContainer<\/code> div, we will call the <code>renderChart()<\/code> method. This method generates all the HTML and JavaScript code required to create a chart. We will write this generated code within the container <code>div<\/code>. Since we want to render the chart in JavaScript, we need to specify this before rendering the chart:\r\n<pre class=\"lang:php\">&lt; ?php\r\nFC_SetRenderer('javascript');\r\n\r\necho renderChart('Charts\/ScrollCombiDY2D.swf', 'Most_Multilingual_Countries_VS_Their_Population.xml', '', 'using_setXMLUrl', '660', '400', false, true);\r\n?&gt;\r\n<\/pre>\r\nSave this page, and navigate to this page using your web browser. This is the JavaScript chart that you should get to see:\r\n\r\n\r\n\r\nThe <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?guide-for-web-developers\/php\/PHP_BasicExample.html\" target=\"_blank\" rel=\"noopener noreferrer\">renderChart()<\/a> method takes parameters in the following order:\r\n<ul>\r\n\t<li>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&#8217;s JavaScript alias.<\/li>\r\n\t<li>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.<\/li>\r\n\t<li>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.<\/li>\r\n\t<li>ID of the chart \u2013 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.<\/li>\r\n\t<li>Width and height in pixels \u2013 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.<\/li>\r\n\t<li>Boolean for Debug Mode \u2013 If you&#8217;re facing any issues while developing your charts, you can initialize them in debug mode by setting this parameter to <code>true<\/code>. 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 <code>false<\/code>.<\/li>\r\n\t<li>Boolean for Registering with JavaScript &#8211; 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 <code>true<\/code>.<\/li>\r\n<\/ul>\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_a_chart_from_XML_string\"><\/span>Creating a chart from XML string<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn the Data String method, the XML or JSON data is embedded within the web page, along with the chart&#8217;s HTML and JavaScript code. This method doesn&#8217;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.\r\n\r\nCreate a blank PHP file within the demo folder and save it as <code>FusionCharts_XT_Data_String.php<\/code>.\r\nInclude the <code>FusionCharts.php library<\/code>. 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.\r\n<pre class=\"lang:php\">&lt; ?php\r\ninclude('Includes\/FusionCharts.php');\r\n$strXML = \"\r\n\";\r\n?&gt;\r\n&lt; !DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\"\r\n\"https:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\"&gt;\r\n\r\nUsing FusionCharts XT with PHP\r\n\r\n&lt; ?php\r\nFC_SetRenderer('javascript');\r\n\r\necho renderChart('Charts\/ScrollCombiDY2D.swf', '', $strXML, 'using_setXMLData', '660', '400', false, true);\r\n?&gt;\r\n\r\n<\/pre>\r\nAgain we will call the <code>renderChart()<\/code> method within the <code>div<\/code> 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.\r\n\r\nSave this page, and navigate to this page using your web browser. You should get to see the same JavaScript chart as before:\r\n\r\n\r\n<h2><span class=\"ez-toc-section\" id=\"Providing_data_in_JSON\"><\/span>Providing data in JSON<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo provide JSON data to the chart, instead of XML, you can call the following method before the <code>renderChart()<\/code> method of the specific chart:\r\n<pre class=\"lang:php\">FC_SetDataFormat(\"json\");<\/pre>\r\nWe provide a tool with which you can convert chart data from XML to JSON. You can find it in the <code>FusionCharts Download Package &gt; Tools &gt; FCDataConverter<\/code>. You can paste in the XML provided above and get the chart data in JSON:\r\n<pre class=\"lang:javascript\">{\r\n\"chart\": {\r\n\"caption\": \"Top 25 Multilingual Countries vs Their Population\",\r\n\"pyaxisname\": \"Languages Spoken\",\r\n\"syaxisname\": \"Population\",\r\n\"showvalues\": \"0\",\r\n\"useroundedges\": \"1\",\r\n\"palette\": \"3\",\r\n\"numvisibleplot\": \"5\",\r\n\"sformatnumberscale\": \"1\",\r\n\"linethickness\": \"5\",\r\n\"anchorradius\": \"5\"\r\n},\r\n\"categories\": [\r\n{\r\n\"category\": [\r\n{\r\n\"label\": \"Canada\"\r\n},\r\n{\r\n\"label\": \"China\"\r\n},\r\n{\r\n\"label\": \"India\"\r\n},\r\n{\r\n\"label\": \"United States\"\r\n},\r\n{\r\n\"label\": \"Russian Federation\"\r\n},\r\n{\r\n\"label\": \"Tanzania\"\r\n},\r\n{\r\n\"label\": \"South Africa\"\r\n},\r\n{\r\n\"label\": \"Congo, The Democratic Republic of the\"\r\n},\r\n{\r\n\"label\": \"Kenya\"\r\n},\r\n{\r\n\"label\": \"Mozambique\"\r\n},\r\n{\r\n\"label\": \"Philippines\"\r\n},\r\n{\r\n\"label\": \"Uganda\"\r\n},\r\n{\r\n\"label\": \"Nigeria\"\r\n},\r\n{\r\n\"label\": \"Iran\"\r\n},\r\n{\r\n\"label\": \"Sudan\"\r\n},\r\n{\r\n\"label\": \"Angola\"\r\n},\r\n{\r\n\"label\": \"Vietnam\"\r\n},\r\n{\r\n\"label\": \"Indonesia\"\r\n},\r\n{\r\n\"label\": \"Czech Republic\"\r\n},\r\n{\r\n\"label\": \"Austria\"\r\n},\r\n{\r\n\"label\": \"Pakistan\"\r\n},\r\n{\r\n\"label\": \"Myanmar\"\r\n},\r\n{\r\n\"label\": \"Chad\"\r\n},\r\n{\r\n\"label\": \"Sierra Leone\"\r\n},\r\n{\r\n\"label\": \"Namibia\"\r\n}\r\n]\r\n}\r\n],\r\n\"dataset\": [\r\n{\r\n\"seriesname\": \"Languages Spoken\",\r\n\"showvalues\": \"1\",\r\n\"data\": [\r\n{\r\n\"value\": \"12\"\r\n},\r\n{\r\n\"value\": \"12\"\r\n},\r\n{\r\n\"value\": \"12\"\r\n},\r\n{\r\n\"value\": \"12\"\r\n},\r\n{\r\n\"value\": \"12\"\r\n},\r\n{\r\n\"value\": \"11\"\r\n},\r\n{\r\n\"value\": \"11\"\r\n},\r\n{\r\n\"value\": \"10\"\r\n},\r\n{\r\n\"value\": \"10\"\r\n},\r\n{\r\n\"value\": \"10\"\r\n},\r\n{\r\n\"value\": \"10\"\r\n},\r\n{\r\n\"value\": \"10\"\r\n},\r\n{\r\n\"value\": \"10\"\r\n},\r\n{\r\n\"value\": \"10\"\r\n},\r\n{\r\n\"value\": \"10\"\r\n},\r\n{\r\n\"value\": \"9\"\r\n},\r\n{\r\n\"value\": \"9\"\r\n},\r\n{\r\n\"value\": \"9\"\r\n},\r\n{\r\n\"value\": \"8\"\r\n},\r\n{\r\n\"value\": \"8\"\r\n},\r\n{\r\n\"value\": \"8\"\r\n},\r\n{\r\n\"value\": \"8\"\r\n},\r\n{\r\n\"value\": \"8\"\r\n},\r\n{\r\n\"value\": \"8\"\r\n},\r\n{\r\n\"value\": \"8\"\r\n}\r\n]\r\n},\r\n{\r\n\"seriesname\": \"Population\",\r\n\"parentyaxis\": \"S\",\r\n\"data\": [\r\n{\r\n\"value\": \"31147000\"\r\n},\r\n{\r\n\"value\": \"1277558000\"\r\n},\r\n{\r\n\"value\": \"1013662000\"\r\n},\r\n{\r\n\"value\": \"278357000\"\r\n},\r\n{\r\n\"value\": \"146934000\"\r\n},\r\n{\r\n\"value\": \"33517000\"\r\n},\r\n{\r\n\"value\": \"40377000\"\r\n},\r\n{\r\n\"value\": \"51654000\"\r\n},\r\n{\r\n\"value\": \"30080000\"\r\n},\r\n{\r\n\"value\": \"19680000\"\r\n},\r\n{\r\n\"value\": \"75967000\"\r\n},\r\n{\r\n\"value\": \"21778000\"\r\n},\r\n{\r\n\"value\": \"111506000\"\r\n},\r\n{\r\n\"value\": \"67702000\"\r\n},\r\n{\r\n\"value\": \"29490000\"\r\n},\r\n{\r\n\"value\": \"12878000\"\r\n},\r\n{\r\n\"value\": \"79832000\"\r\n},\r\n{\r\n\"value\": \"212107000\"\r\n},\r\n{\r\n\"value\": \"10278100\"\r\n},\r\n{\r\n\"value\": \"8091800\"\r\n},\r\n{\r\n\"value\": \"156483000\"\r\n},\r\n{\r\n\"value\": \"45611000\"\r\n},\r\n{\r\n\"value\": \"7651000\"\r\n},\r\n{\r\n\"value\": \"4854000\"\r\n},\r\n{\r\n\"value\": \"1726000\"\r\n}\r\n]\r\n}\r\n]\r\n}\r\n<\/pre>\r\nIf you change the chart&#8217;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.\r\n<h2><span class=\"ez-toc-section\" id=\"Download_the_source_files_for_this_demo\"><\/span>Download the source files for this demo<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/FusionChartsXT_in_PHP.zip\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2471\" title=\"Download Sample Code\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png\" alt=\"\" width=\"257\" height=\"100\" srcset=\"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png 257w, \/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code-150x58.png 150w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/a>\r\n<h2><span class=\"ez-toc-section\" id=\"Next_article_in_this_series_Create_a_chart_using_data_from_a_database\"><\/span>Next article in this series: Create a chart using data from a database<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn the next article, we will create a chart using data from a database. If, however, you&#8217;re feeling impatient, you can head over to our <a href=\"https:\/\/docs.fusioncharts.com\/charts\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a> and read on <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?guide-for-web-developers\/php\/PHP_DB.html\" target=\"_blank\" rel=\"noopener noreferrer\">how to use FusionCharts XT to create charts using data from a database<\/a>. Stay tuned.\r\n<div style=\"display:none\">\r\n<div itemscope itemtype=\"http:\/\/data-vocabulary.org\/Breadcrumb\">\r\n  <a href=\"http:\/\/fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/\" itemprop=\"url\">\r\n    <span itemprop=\"title\">Part - 1<\/span>\r\n  <\/a> \u203a\r\n<\/div>\r\n<div itemscope itemtype=\"http:\/\/data-vocabulary.org\/Breadcrumb\">\r\n  <a href=\"http:\/\/fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/\" itemprop=\"url\">\r\n    <span itemprop=\"title\">Part - 2<\/span>\r\n  <\/a> \u203a\r\n<\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[205,211,563,283,404],"coauthors":[715],"class_list":["post-2296","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-ipad","tag-javascript","tag-javascript-charts-in-php","tag-php","tag-xml"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript charts in PHP using FusionCharts XT - Part 1 - FusionBrew<\/title>\n<meta name=\"description\" content=\"Part 1: JavaScript charts in PHP. Master FusionCharts XT for your 2026 web applications with our complete reference guide. Build high-end web visuals now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript charts in PHP using FusionCharts XT - Part 1 - FusionBrew\" \/>\n<meta property=\"og:description\" content=\"Part 1: JavaScript charts in PHP. Master FusionCharts XT for your 2026 web applications with our complete reference guide. Build high-end web visuals now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-15T14:17:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"257\" \/>\n\t<meta property=\"og:image:height\" content=\"100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"rishi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rishi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"rishi\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a\"\n\t            },\n\t            \"headline\": \"JavaScript Charts in PHP Using FusionCharts XT: Part 1 Guide 2026\",\n\t            \"datePublished\": \"2012-03-15T14:17:16+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:32+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/\"\n\t            },\n\t            \"wordCount\": 1536,\n\t            \"commentCount\": 5,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png\",\n\t            \"keywords\": [\n\t                \"ipad\",\n\t                \"javascript\",\n\t                \"javascript charts in php\",\n\t                \"php\",\n\t                \"XML\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/\",\n\t            \"name\": \"JavaScript charts in PHP using FusionCharts XT - Part 1 - FusionBrew\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png\",\n\t            \"datePublished\": \"2012-03-15T14:17:16+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:32+00:00\",\n\t            \"description\": \"Part 1: JavaScript charts in PHP. Master FusionCharts XT for your 2026 web applications with our complete reference guide. Build high-end web visuals now.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png\",\n\t            \"width\": 257,\n\t            \"height\": 100\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"JavaScript Charts in PHP Using FusionCharts XT: Part 1 Guide 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a\",\n\t            \"name\": \"rishi\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/328482cd2c44c22cbfaf38e6113a8a24\",\n\t                \"url\": \"https:\/\/secure.gravatar.com\/avatar\/?s=96&r=g\",\n\t                \"contentUrl\": \"https:\/\/secure.gravatar.com\/avatar\/?s=96&r=g\",\n\t                \"caption\": \"rishi\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/rishi\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript charts in PHP using FusionCharts XT - Part 1 - FusionBrew","description":"Part 1: JavaScript charts in PHP. Master FusionCharts XT for your 2026 web applications with our complete reference guide. Build high-end web visuals now.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript charts in PHP using FusionCharts XT - Part 1 - FusionBrew","og_description":"Part 1: JavaScript charts in PHP. Master FusionCharts XT for your 2026 web applications with our complete reference guide. Build high-end web visuals now.","og_url":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2012-03-15T14:17:16+00:00","article_modified_time":"2026-01-20T09:11:32+00:00","og_image":[{"width":257,"height":100,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png","type":"image\/png"}],"author":"rishi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rishi","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/"},"author":{"name":"rishi","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a"},"headline":"JavaScript Charts in PHP Using FusionCharts XT: Part 1 Guide 2026","datePublished":"2012-03-15T14:17:16+00:00","dateModified":"2026-01-20T09:11:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/"},"wordCount":1536,"commentCount":5,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png","keywords":["ipad","javascript","javascript charts in php","php","XML"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/","url":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/","name":"JavaScript charts in PHP using FusionCharts XT - Part 1 - FusionBrew","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png","datePublished":"2012-03-15T14:17:16+00:00","dateModified":"2026-01-20T09:11:32+00:00","description":"Part 1: JavaScript charts in PHP. Master FusionCharts XT for your 2026 web applications with our complete reference guide. Build high-end web visuals now.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png","contentUrl":"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code.png","width":257,"height":100},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Charts in PHP Using FusionCharts XT: Part 1 Guide 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a","name":"rishi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/328482cd2c44c22cbfaf38e6113a8a24","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&r=g","caption":"rishi"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/rishi\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/2296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=2296"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/2296\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=2296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=2296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=2296"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=2296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}