{"id":2406,"date":"2012-03-16T23:32:54","date_gmt":"2012-03-16T18:02:54","guid":{"rendered":"http:\/\/blog.fusioncharts.com\/?p=2406"},"modified":"2026-01-20T14:41:09","modified_gmt":"2026-01-20T09:11:09","slug":"javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/","title":{"rendered":"JavaScript Charts in PHP and MySQL with FusionCharts XT: Part 2"},"content":{"rendered":"This the second part of the <em>FusionCharts XT with PHP<\/em> series. We will create <a href=\"https:\/\/www.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">interactive JavaScript charts<\/a> using data from a MySQL database with FusionCharts XT. We will make use of the PHP library that is bundled with the FusionCharts Suite.\r\n\r\nTo recap from the <a href=\"https:\/\/fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/\" target=\"_blank\" rel=\"noopener noreferrer\">first article in this series<\/a>, FusionCharts XT is essentially a JavaScript charting library, which renders highly interactive charts in the browser. It takes 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>. To plot a <a href=\"https:\/\/www.fusioncharts.com\/php-charts\/\" target=\"_blank\" rel=\"noopener noreferrer\">chart using PHP<\/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\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 ' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#FusionCharts_XT_in_PHP_Series\" title=\"FusionCharts XT in PHP Series\">FusionCharts XT in PHP Series<\/a><\/li><\/ul><\/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-using-php-and-mysql-with-fusioncharts-xt-part-2\/#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-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#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-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#Connecting_to_the_MySQL_database\" title=\"Connecting to the MySQL database\">Connecting to the MySQL database<\/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-using-php-and-mysql-with-fusioncharts-xt-part-2\/#Creating_the_chart_using_the_Data_URL_method\" title=\"Creating the chart using the Data URL method\">Creating the chart using the Data URL method<\/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-using-php-and-mysql-with-fusioncharts-xt-part-2\/#Creating_the_chart_using_Data_String_method\" title=\"Creating the chart using Data String method\">Creating the chart using Data String method<\/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-using-php-and-mysql-with-fusioncharts-xt-part-2\/#Download_source_files_for_these_samples\" title=\"Download source files for these samples\">Download source files for these samples<\/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-using-php-and-mysql-with-fusioncharts-xt-part-2\/#Next_in_the_series\" title=\"Next in the series\">Next in the series<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"FusionCharts_XT_in_PHP_Series\"><\/span>FusionCharts XT in PHP Series<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<ul>\r\n\t<li><a href=\"https:\/\/fusioncharts.com\/blog\/javascript-charts-in-php-using-fusioncharts-xt-part-1\/\" target=\"_blank\" rel=\"noopener noreferrer\">Part 1 &#8211; JavaScript charts in PHP using 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\/\">Part 2 &#8211; JavaScript charts in PHP and MySQL using FusionCharts XT<\/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\">Part 3 &#8211; Drill-down JavaScript charts in PHP and MySQL<\/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\">Part 4 &#8211; JavaScript LinkedCharts in PHP and MySQL<\/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\">Part 5 &#8211; Using Debugging Tools for JavaScript Charts<\/a><\/li>\r\n<\/ul>\r\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\nWe will make use of the sample World database provided by MySQL and plot the Top 10 Most Populous Countries.\r\n\r\n\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>MySQL<\/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>The sample World database provided by MySQL. Read more to understand the structure of this database and how to set it up.<\/li>\r\n<\/ul>\r\nOur installation process will be the same as we did in the previous article. You may use the same setup or create it as follows:\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=\"Connecting_to_the_MySQL_database\"><\/span>Connecting to the MySQL database<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn the <code>Includes<\/code> folder, we provide you with <code>DBConn.php<\/code>, which you can use to connect with your database. You may use this file to authenticate with your database if you aren&#8217;t using any other method. You would have to provide the relevant values to connect to your database. For instance, on our demo computer, we have the following values:\r\n<pre class=\"lang:sql\">\/\/ These four parameters must be changed dependent on your MySQL settings\r\n    $hostdb = 'localhost';   \/\/ MySQl host\r\n    $userdb = 'root';    \t\/\/ MySQL username\r\n    $passdb = '';    \t\t\/\/ MySQL password\r\n    $namedb =  $dbName ? $dbName : 'world'; \/\/ MySQL database name<\/pre>\r\n\r\nThere are two ways using which you can provide data to the PHP library &#8211; <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 <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>. Let us use both of them in detail.\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_chart_using_the_Data_URL_method\"><\/span>Creating the chart using the <em>Data URL<\/em> method<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn 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> method, you instruct FusionCharts to load XML or JSON data from a URL. This URL could refer to a static XML file that is already present on the server, or it could refer to a virtual data provider e.g., <code>\/path_to\/DataProvider.php<\/code>, which executes queries the database, builds the XML data as string and finally outputs this XML string to the output stream with content type set to [cciel lang=&#8217;html&#8217;]text\/xml, but without any HTML tags. We then need to create a second file, which would receive this XML string, pass it on to <code>FusionCharts.php<\/code>, and then render the chart.\r\n\r\nLet us create the first file named <code>FusionChartsXT_with_PHP_and_MySQL_using_DataURL_DataProvider.php<\/code>. Write the following code in this file:\r\n\r\n<pre class=\"lang:php\">&lt; ?php\r\n\/\/ Set the content type in the header to text\/xml.\r\nheader('Content-type: text\/xml');\r\n\r\n\/\/ Include DBConn.php\r\ninclude('Includes\/DBConn.php');\r\n\r\n\/\/ Use the connectToDB() function provided in DBConn.php, and establish the connection between PHP and the World database in our MySQL setup.\r\n$link = connectToDB();\r\n\r\n\/\/ Form the SQL query which will return the Top 10 Most Populous Countries.\r\n$strQuery = 'SELECT Name AS Country, Population FROM country ORDER BY Population DESC LIMIT 10';\r\n\r\n\/\/ Execute the query, or else return the error message.\r\n$result = mysql_query($strQuery) or die(mysql_error());\r\n\r\n\/\/ If we get a valid response - \r\nif ($result) {\r\n\r\n\t\/\/ Create the chart's XML string. We can add attributes here to customize our chart.\r\n\t$strXML = \"\";\r\n\r\n\twhile($ors = mysql_fetch_array($result)) {\r\n\t\t\/\/ Append the names of the countries and their respective populations to the chart's XML string.\r\n\t\t$strXML .= \"\";\r\n\t}\r\n}   \r\n\/\/ Close the chart's XML string.\r\n$strXML .= \"\";\t\r\n\r\n\/\/ Return the valid XML string.\r\necho $strXML;\r\n?&gt;\r\n<\/pre>\r\nSave this file and navigate to it using your web browser. You should see the following XML displayed:\r\n\r\nWe now need to pass this XML data to <code>FusionCharts.php<\/code>, which will generate the required HTML and JavaScript code to display our chart. Let us create a PHP file <code>FusionChartsXT_with_PHP_and_MySQL_using_DataURL.php<\/code>. In this file, write the following code:\r\n<pre>&lt; ?php\r\n\/\/ It would generate the HTML and JavaScript code required to render the chart.\t\r\ninclude('Includes\/FusionCharts.php');\r\n?&gt;\r\n\t\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;<!-- Include FusionCharts.js to provide client-side interactivity --><!-- This DIV would be our chart container --><\/pre>\r\n<div id=\"chartContainer\">&lt; ?php \/\/ Set the rendering mode to JavaScript FC_SetRenderer(&#8216;javascript&#8217;); \/\/ Call the renderChart method, which would return the HTML and JavaScript required to generate the chart echo renderChart(&#8216;FusionCharts\/Column2D.swf&#8217;, \/\/ Path to chart type &#8216;FusionChartsXT_with_PHP_and_MySQL_using_DataURL.php&#8217;, \/\/ Path to the data provider &#8221;, \/\/ Empty string when using Data URL Method &#8216;top10_most_populous_countries&#8217;, \/\/ Unique chart ID &#8216;660&#8217;, &#8216;400&#8217;, \/\/ Width and height in pixels false, \/\/ Disable debug mode true \/\/ Enable &#8216;Register with JavaScript&#8217; (Recommended) ); ?&gt;<\/div>\r\nSave this file and navigate to it using your web browser. This is the JavaScript chart that you should get to see:\r\n\r\n\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_chart_using_Data_String_method\"><\/span>Creating the chart using <em>Data String<\/em> method<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn 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> method, the XML or JSON data is embedded within a single 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 named <code>FusionChartsXT_with_PHP_and_MySQL_using_DataString.php<\/code>. Write the following code in this file:\r\n<pre class=\"lang:php\">&lt; ?php\r\n\t\r\n\/\/ Include the DBConn.php and FusionCharts.php files, so that we can access their variables and functions.\r\ninclude('Includes\/DBConn.php');\r\ninclude('Includes\/FusionCharts.php');\r\n\r\n\/\/ Use the connectToDB() function provided in DBConn.php, and establish the connection between PHP and the World database in our MySQL setup.\r\n$link = connectToDB();\r\n\r\n\/\/ Form the SQL query which will return the Top 10 Most Populous Countries.\r\n$strQuery = 'SELECT Name AS Country, Population FROM country ORDER BY Population DESC LIMIT 10';\r\n\r\n\/\/ Execute the query, or else return the error message.\r\n$result = mysql_query($strQuery) or die(mysql_error());\r\n\r\n\/\/ If we get a valid response - \r\nif ($result) {\r\n\t\r\n\t\/\/ Create the chart's XML string. We can add attributes here to customize our chart.\r\n\t$strXML = \"\";\r\n\t\r\n\twhile($ors = mysql_fetch_array($result)) {\r\n\t\t\/\/ Append the names of the countries and their respective populations to the chart's XML string.\r\n\t\t$strXML .= \"\";\r\n\t}\r\n}   \r\n\/\/ Close the chart's XML string.\r\n$strXML .= \"\";\t\r\n?&gt;\r\n\t\t\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;<!-- Include FusionCharts.js to provide client-side interactivity --><!-- This DIV would be our chart container --><\/pre>\r\n<div id=\"chartContainer\">&lt; ?php \/\/ Set the rendering mode to JavaScript FC_SetRenderer(&#8216;javascript&#8217;); \/\/ Call the renderChart method, which would return the HTML and JavaScript required to generate the chart echo renderChart(&#8216;FusionCharts\/Column2D.swf&#8217;, \/\/ Path to chart type &#8221;, \/\/ Empty string when using Data String method $strXML,\/\/ Variable which has the chart data &#8216;top10_most_populous_countries&#8217;, \/\/ Unique chart ID &#8216;660&#8217;, &#8216;400&#8217;, \/\/ Width and height in pixels false, \/\/ Disable debug mode true \/\/ Enable &#8216;Register with JavaScript&#8217; (Recommended) ); ?&gt;<\/div>\r\nSave this file and navigate to it using your web browser. This is the JavaScript chart that you should get to see:\r\n\r\n\r\n<h2><span class=\"ez-toc-section\" id=\"Download_source_files_for_these_samples\"><\/span>Download source files for these samples<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/FusionCharts_XT_with_PHP_MySQL.zip\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2509\" title=\"Download Sample Code\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.png\" alt=\"\" width=\"257\" height=\"100\" srcset=\"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.png 257w, \/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1-150x58.png 150w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/a>\r\n<h2><span class=\"ez-toc-section\" id=\"Next_in_the_series\"><\/span>Next in the series<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn this article, the chart has top 10 countries by population. In the next article, we will see how to <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?DrillDown\/Simple.html\" target=\"_blank\" rel=\"noopener noreferrer\">add drill-down capability<\/a> to this MySQL data. So when you click on the column showing China&#8217;s population, you will be able to drill-down to the most populous cities in China.\r\n\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>This the second part of the FusionCharts XT with PHP series. We will create interactive JavaScript charts using data from a MySQL database with FusionCharts XT. We will make use of the PHP library that is bundled with the FusionCharts Suite. To recap from the first article in this series, FusionCharts XT is essentially a [&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":[29,33,211,283],"coauthors":[715],"class_list":["post-2406","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-analytics","tag-applications","tag-javascript","tag-php"],"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 and MySQL with FusionCharts XT - Part 2<\/title>\n<meta name=\"description\" content=\"Create interactive JS charts using MySQL and PHP. Learn how to connect your 2026 database and display data professionally. Master full-stack visualization.\" \/>\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-using-php-and-mysql-with-fusioncharts-xt-part-2\/\" \/>\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 and MySQL with FusionCharts XT - Part 2\" \/>\n<meta property=\"og:description\" content=\"Create interactive JS charts using MySQL and PHP. Learn how to connect your 2026 database and display data professionally. Master full-stack visualization.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-16T18:02:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.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=\"7 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-using-php-and-mysql-with-fusioncharts-xt-part-2\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/\"\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 and MySQL with FusionCharts XT: Part 2\",\n\t            \"datePublished\": \"2012-03-16T18:02:54+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:09+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/\"\n\t            },\n\t            \"wordCount\": 958,\n\t            \"commentCount\": 13,\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-using-php-and-mysql-with-fusioncharts-xt-part-2\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.png\",\n\t            \"keywords\": [\n\t                \"analytics\",\n\t                \"applications\",\n\t                \"javascript\",\n\t                \"php\"\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-using-php-and-mysql-with-fusioncharts-xt-part-2\/#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-using-php-and-mysql-with-fusioncharts-xt-part-2\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/\",\n\t            \"name\": \"JavaScript charts in PHP and MySQL with FusionCharts XT - Part 2\",\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-using-php-and-mysql-with-fusioncharts-xt-part-2\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.png\",\n\t            \"datePublished\": \"2012-03-16T18:02:54+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:09+00:00\",\n\t            \"description\": \"Create interactive JS charts using MySQL and PHP. Learn how to connect your 2026 database and display data professionally. Master full-stack visualization.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#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-using-php-and-mysql-with-fusioncharts-xt-part-2\/\"\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-using-php-and-mysql-with-fusioncharts-xt-part-2\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.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-using-php-and-mysql-with-fusioncharts-xt-part-2\/#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 and MySQL with FusionCharts XT: Part 2\"\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 and MySQL with FusionCharts XT - Part 2","description":"Create interactive JS charts using MySQL and PHP. Learn how to connect your 2026 database and display data professionally. Master full-stack visualization.","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-using-php-and-mysql-with-fusioncharts-xt-part-2\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript charts in PHP and MySQL with FusionCharts XT - Part 2","og_description":"Create interactive JS charts using MySQL and PHP. Learn how to connect your 2026 database and display data professionally. Master full-stack visualization.","og_url":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2012-03-16T18:02:54+00:00","article_modified_time":"2026-01-20T09:11:09+00:00","og_image":[{"width":257,"height":100,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.png","type":"image\/png"}],"author":"rishi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rishi","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/"},"author":{"name":"rishi","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a"},"headline":"JavaScript Charts in PHP and MySQL with FusionCharts XT: Part 2","datePublished":"2012-03-16T18:02:54+00:00","dateModified":"2026-01-20T09:11:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/"},"wordCount":958,"commentCount":13,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.png","keywords":["analytics","applications","javascript","php"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/","url":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/","name":"JavaScript charts in PHP and MySQL with FusionCharts XT - Part 2","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.png","datePublished":"2012-03-16T18:02:54+00:00","dateModified":"2026-01-20T09:11:09+00:00","description":"Create interactive JS charts using MySQL and PHP. Learn how to connect your 2026 database and display data professionally. Master full-stack visualization.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.png","contentUrl":"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code1.png","width":257,"height":100},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Charts in PHP and MySQL with FusionCharts XT: Part 2"}]},{"@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\/2406","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=2406"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/2406\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=2406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=2406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=2406"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=2406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}