{"id":2518,"date":"2012-03-19T19:10:03","date_gmt":"2012-03-19T13:40:03","guid":{"rendered":"http:\/\/blog.fusioncharts.com\/?p=2518"},"modified":"2026-01-20T14:41:09","modified_gmt":"2026-01-20T09:11:09","slug":"drill-down-javascript-charts-in-php-and-mysql-part-3","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/","title":{"rendered":"Drill-Down JavaScript Charts in PHP and MySQL: Part 3 Guide 2026"},"content":{"rendered":"In the 3rd part of FusionCharts XT in PHP series, we will create drill-down <a href=\"https:\/\/www.fusioncharts.com\/php-charts\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>PHP charts<\/strong><\/a> using data from a MySQL database. <a href=\"https:\/\/www.fusioncharts.com\/dev\/chart-guide\/chart-configurations\/drill-down\">Drill-down charts<\/a> are immensely useful when you want to plot the subset of an aggregate data set. A generic use case can be world-wide sales data &gt;&gt; by country &gt;&gt; by state &gt;&gt; by city. FusionCharts XT supports unlimited levels of drill-down, and the chart types and chart attributes can be configured for each level. To create drill-down charts in PHP, we will use the PHP script that is bundled with the FusionCharts Suite. This script automatically generates the HTML, JavaScript and XML required to plot your charts, so that you don&#8217;t need to.\r\n<!--more-->\r\n<blockquote>\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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#Attributes_of_a_Drill-down_chart\" title=\"Attributes of a Drill-down chart\">Attributes of a Drill-down chart<\/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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#Customizing_the_Drill-down_chart\" title=\"Customizing the Drill-down chart\">Customizing the Drill-down chart<\/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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#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-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#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\/\" target=\"_blank\" rel=\"noopener noreferrer\">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\/\">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<\/blockquote>\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\nIn the <a href=\"https:\/\/fusioncharts.com\/blog\/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2\/\" target=\"_blank\" rel=\"noopener noreferrer\">2nd part<\/a>, we created a chart showing the Top 10 Most Populous Countries in the World. We will add drill-down functionality to it, such that upon clicking on one of the countries, it will show us the Top 10 Most Populous Cities of that particular country.\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\t<li><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/FusionCharts_XT_with_PHP_MySQL.zip\">The source code for the 2nd part of the series<\/a><\/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\t<li>Copy the source files used in the previous article and paste them in our demo folder<\/li>\r\n<\/ol>\r\n<h2><span class=\"ez-toc-section\" id=\"Attributes_of_a_Drill-down_chart\"><\/span>Attributes of a Drill-down chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo create a drill-down chart, you will require the following 3 things:\r\n<ol>\r\n\t<li>A parent chart (which we already have)<\/li>\r\n\t<li>The <code>link<\/code> attribute added to the dataplots of the parent chart (see below how to add this attribute)<\/li>\r\n\t<li>The child chart (we need to create this)<\/li>\r\n<\/ol>\r\nTo create a dataplot (be it column, pie or line\/area anchor) in XML, you would have to specify the <code>label<\/code> and the <code>value<\/code> attributes for the <code>set<\/code> element.\r\n\r\n\r\nNow to add drill-down to that dataplot, you will have to specify the <code>link<\/code> attribute.\r\n\r\n\r\nWith the above XML, the dataplot, when clicked, will go to the page <code>DrillDown_Child_Chart.php?country=China<\/code>, which contains another chart to show some other data.\r\n\r\nIn <code>FusionChartsXT_with_PHP_and_MySQL_DataString.php<\/code>, edit the part where you create the dataplots as below:\r\n<pre class=\"lang:php\">$strXML .= \"\";<\/pre>\r\nNow that we have the first 2 things required for a drill-down chart, let us create the page that will show the child chart. This child chart needs to show a specific subset of the aggregate data; data related only to the parent dataplot.\r\n\r\nCreate a blank PHP file named <code>DrillDown_Child_Chart.php<\/code> in our demo folder and write the following code in it:\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\/\/ Retrieve the name of the country from the $_REQUEST parameter\r\n$countryName = $_REQUEST['country'];\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 Cities according to the specified Country.\r\n$strQuery = 'SELECT city.Name AS City, city.Population AS Population FROM city WHERE city.CountryCode = (SELECT country.Code FROM country WHERE country.Name = \"'.$countryName.'\") 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 cities 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;Charts\/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_cities&#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. Navigate to <em>parent<\/em> chart first. On clicking one of the columns, it would load a new page with the child chart showing the relevant data.\r\n<h2><span class=\"ez-toc-section\" id=\"Customizing_the_Drill-down_chart\"><\/span>Customizing the Drill-down chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn FusionCharts XT, you can define the following types of links:\r\n<ul>\r\n\t<li>Links that <a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/SimpleExample.html\" target=\"_blank\" rel=\"noopener noreferrer\">open in the same tab<\/a><\/li>\r\n\t<li>Links that <a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/NewWindow.html\" target=\"_blank\" rel=\"noopener noreferrer\">open in a new tab<\/a><\/li>\r\n\t<li>Links that <a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/FrameExample.html\" target=\"_blank\" rel=\"noopener noreferrer\">open in a specified frame<\/a><\/li>\r\n\t<li>Links that <a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/PopUpExample.html\" target=\"_blank\" rel=\"noopener noreferrer\">open in a new pop-up window<\/a><\/li>\r\n\t<li>Links that <a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/JSExample.html\" target=\"_blank\" rel=\"noopener noreferrer\">invoke JavaScript functions<\/a><\/li>\r\n\t<li><a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/ChartHotSpot.html\" target=\"_blank\" rel=\"noopener noreferrer\">Use the whole chart as a hotspot to use the simple link types named above<\/a><\/li>\r\n<\/ul>\r\nYou can <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?DrillDown\/Simple.html\" target=\"_blank\" rel=\"noopener noreferrer\">read more about customizing drill-down charts<\/a> in our documentation.\r\n\r\nAnother good read is our previous blog post where we talk about <a href=\"https:\/\/fusioncharts.com\/blog\/4-things-to-know-to-create-an-intuitive-drill-down-interface\/\" target=\"_blank\" rel=\"noopener noreferrer\">making your drill-down charts more intuitive<\/a>.\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\/Drill_Down_Charts_in_PHP_MySQL_using_FusionChartsXT.zip\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2555\" title=\"Download Source Code\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code2.png\" alt=\"\" width=\"257\" height=\"100\" srcset=\"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code2.png 257w, \/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code2-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 the next part of this series, we are going to tackle <a href=\"https:\/\/www.fusioncharts.com\/features\/linkedcharts-for-drill-down\" target=\"_blank\" rel=\"noopener noreferrer\">LinkedCharts<\/a>. It is a first-of-its-type concept using which you can create unlimited levels of drill-down charts. You may <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?DrillDown\/LinkedCharts.html\" target=\"_blank\" rel=\"noopener noreferrer\">read more about LinkedCharts<\/a> in our documentation.","protected":false},"excerpt":{"rendered":"<p>In the 3rd part of FusionCharts XT in PHP series, we will create drill-down PHP charts using data from a MySQL database. Drill-down charts are immensely useful when you want to plot the subset of an aggregate data set. A generic use case can be world-wide sales data &gt;&gt; by country &gt;&gt; by state &gt;&gt; [&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":[123,211,255,283],"coauthors":[715],"class_list":["post-2518","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-drill-down","tag-javascript","tag-mysql","tag-php"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Drill-down JavaScript charts in PHP and MySQL \u2013 Part 3 - FusionBrew<\/title>\n<meta name=\"description\" content=\"Master drill-down charts in PHP and MySQL. Follow our 2026 guide with practical examples to elevate your visualization game. Build deep-dive visuals today.\" \/>\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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Drill-down JavaScript charts in PHP and MySQL \u2013 Part 3 - FusionBrew\" \/>\n<meta property=\"og:description\" content=\"Master drill-down charts in PHP and MySQL. Follow our 2026 guide with practical examples to elevate your visualization game. Build deep-dive visuals today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-19T13:40:03+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_Code2.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=\"5 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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/\"\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\": \"Drill-Down JavaScript Charts in PHP and MySQL: Part 3 Guide 2026\",\n\t            \"datePublished\": \"2012-03-19T13:40:03+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:09+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/\"\n\t            },\n\t            \"wordCount\": 797,\n\t            \"commentCount\": 3,\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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code2.png\",\n\t            \"keywords\": [\n\t                \"drill down\",\n\t                \"javascript\",\n\t                \"mysql\",\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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/\",\n\t            \"name\": \"Drill-down JavaScript charts in PHP and MySQL \u2013 Part 3 - 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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code2.png\",\n\t            \"datePublished\": \"2012-03-19T13:40:03+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:09+00:00\",\n\t            \"description\": \"Master drill-down charts in PHP and MySQL. Follow our 2026 guide with practical examples to elevate your visualization game. Build deep-dive visuals today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/\"\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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code2.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code2.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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#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\": \"Drill-Down JavaScript Charts in PHP and MySQL: Part 3 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":"Drill-down JavaScript charts in PHP and MySQL \u2013 Part 3 - FusionBrew","description":"Master drill-down charts in PHP and MySQL. Follow our 2026 guide with practical examples to elevate your visualization game. Build deep-dive visuals today.","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\/drill-down-javascript-charts-in-php-and-mysql-part-3\/","og_locale":"en_US","og_type":"article","og_title":"Drill-down JavaScript charts in PHP and MySQL \u2013 Part 3 - FusionBrew","og_description":"Master drill-down charts in PHP and MySQL. Follow our 2026 guide with practical examples to elevate your visualization game. Build deep-dive visuals today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2012-03-19T13:40:03+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_Code2.png","type":"image\/png"}],"author":"rishi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rishi","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/"},"author":{"name":"rishi","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a"},"headline":"Drill-Down JavaScript Charts in PHP and MySQL: Part 3 Guide 2026","datePublished":"2012-03-19T13:40:03+00:00","dateModified":"2026-01-20T09:11:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/"},"wordCount":797,"commentCount":3,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code2.png","keywords":["drill down","javascript","mysql","php"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/","url":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/","name":"Drill-down JavaScript charts in PHP and MySQL \u2013 Part 3 - FusionBrew","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code2.png","datePublished":"2012-03-19T13:40:03+00:00","dateModified":"2026-01-20T09:11:09+00:00","description":"Master drill-down charts in PHP and MySQL. Follow our 2026 guide with practical examples to elevate your visualization game. Build deep-dive visuals today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code2.png","contentUrl":"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code2.png","width":257,"height":100},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-php-and-mysql-part-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Drill-Down JavaScript Charts in PHP and MySQL: Part 3 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\/2518","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=2518"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/2518\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=2518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=2518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=2518"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=2518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}