Jamie 1

Drill-Down Chart from DB on Same Page

Recommended Posts

Hello. This has me stumped for several days.

I need a drill down chart to open to another chart on the same page. I can't find anything to help with this. I am drawing from MySql.

I have it working but only drilling in the same chart. It needs to go to another div.

The child data is from a php file as shown below.

What changes do I need to do to drill to another div please?






         // Form the SQL query that returns the top 10 most populous countries
         $strQuery = "SELECT a.areaname as Name, a.areaid as Population, a.areaid as Code FROM area a ORDER BY Population DESC LIMIT 10";

         // Execute the query, or else return the error message.
         $result = $dbhandle->query($strQuery) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");

         // If the query returns a valid response, prepare the JSON string
         if ($result) {
            // The `$arrData` array holds the chart attributes and data
            $arrData = array(
                "chart" => array(
                    "caption" => "Top 10 Most Populous Countries",
                    "showValues"=> "0",
                    "theme"=> "zune"

            $arrData["data"] = array();

    // Push the data into the array

            while($row = mysqli_fetch_array($result)) {
               array_push($arrData["data"], array(
                "label" => $row["Name"],
                "value" => $row["Population"],
                "link" => "drillchild1.php?Country=".$row["Code"]

            /*JSON Encode the data to retrieve the string containing the JSON representation of the data in the array. */

            $jsonEncodedData = json_encode($arrData);

            /*Create an object for the column chart. Initialize this object using the FusionCharts PHP class constructor. The constructor is used to initialize the chart type, chart id, width, height, the div id of the chart container, the data format, and the data source. */

            $columnChart = new FusionCharts("column2D", "myFirstChart" , 600, 300, "chart-1", "json", $jsonEncodedData);

            // Render the chart

            // Close the database connection


      <div id="chart-1"><!-- Fusion Charts will render here--></div>

Edited by Jamie 1

Share this post

Link to post
Share on other sites

Thank you Prerana.

That has massively helped me. I still need to figure out some parts but hopefully I should be ok now.

Thanks again.


ps. Any idea when Fusioncharts Play will be available?

Share this post

Link to post
Share on other sites


One problem I have with the sample code.

It seems I have to manually write each year in the code.

 $arrDataMonth[2011]["linkeddata"] = array();
 $arrDataMonth[2012]["linkeddata"] = array();

 How do I get this to list the years automatically please?


// data for linked chart will start from here, SQL query from quarterly_sales table
    $year = 2011;
    $strQuarterly = "SELECT  Quarter, (Sales * 20) as Sales , Year FROM quarterly_sales WHERE 1";
    $resultQuarterly = $dbhandle->query($strQuarterly) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");
        // if the query returns a valid response, preparing the associative JSON array for child chart
        if ($resultQuarterly) {
        $arrData["linkeddata"] = array(); // `linkeddata` is responsible for feeding data and chart options to child charts.
        $arrDataMonth[2011]["linkeddata"] = array();
        $arrDataMonth[2012]["linkeddata"] = array();
        $arrDataMonth[2013]["linkeddata"] = array();
        $arrDataMonth[2014]["linkeddata"] = array();
        $arrDataMonth[2015]["linkeddata"] = array();
        $arrDataMonth[2016]["linkeddata"] = array();
        $i = 0;    
        if ($resultQuarterly) {
            while ($row = mysqli_fetch_array($resultQuarterly)) {
                // collect the year for which quarterly drilldown will be created
                $year = $row['Year'];
                // create the monthly drilldown data               
                $arrMonthHeader[$year][$row["Quarter"]] = array();
                $arrMonthData[$year][$row["Quarter"]] = array();

Share this post

Link to post
Share on other sites


It seems that Drill-down does not work with Web-UI when report is viewed as PDF. Is it true or there is something which I am missing.

I have tried using Chrome 10 and Firefox 4 with Foxit PDF Plugin on Windows 7.



Share this post

Link to post
Share on other sites

The current view will be seen in the pdf, you can showcase the child chart in another container to resolve the problem, PDF files are by default not interactive, i.e they do not support events propagation (like click)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now