JavaScript LinkedCharts in PHP and MySQL using FusionCharts XT – Part 4

In the 4th part of FusionCharts XT in PHP series, we will create LinkedCharts in PHP. LinkedCharts is a pioneering concept introduced by FusionCharts which allows unlimited levels of drill-down. LinkedCharts help users maintain the context when drilling down (or up) in their data. The child LinkedCharts can be configured in every way possible. Let us create LinkedCharts using the bundled PHP script, which takes the hassle out by generating the HTML, JavaScript and XML required to render any chart.

FusionCharts XT in PHP Series

  • Part 1 – JavaScript charts in PHP using FusionCharts XT
  • Part 2 – JavaScript charts in PHP and MySQL using FusionCharts XT
  • Part 3 – Drill-down JavaScript charts in PHP and MySQL
  • Part 4 – JavaScript LinkedCharts in PHP and MySQL
  • Part 5 – Using Debugging Tools for JavaScript Charts
  • What we are going to visualize

    In the 3rd part of this series, we created a simple drill-down chart, where the parent chart shows the Top 10 Most Populous Countries, and the child chart shows the Top 10 Most Populous Cities of that country.

    We will make use of the same data and create a LinkedChart as shown below:

    LinkedCharts provides a convenient way to navigate through the levels using the overlay button. This helps immensely in maintaining context while traversing the data. There are a few more implementations of LinkedCharts in our Features Gallery.

    What we will need

    Our installation process will be the same as we did in the previous article. You may use the same setup or create it as follows:

    1. Within the root directory of your web server, create a folder named FusionCharts_XT_with_PHP. This will be our demo folder.
    2. Copy the entire Charts folder from the FusionCharts XT Download Package and paste it within our demo folder. This completes the installation of FusionCharts XT in our web application.
    3. Copy the Includes folder from FusionCharts XT Download Package > Code > PHP > Includes to our demo folder.
    4. Copy the source files used in the previous article and paste them in our demo folder

    Attributes of LinkedCharts

    When creating LinkedCharts, you will have to provide the data for the child charts in either Data URL or Data String formats using the link attribute.

  • LinkedCharts using Data URL

  • In the Data URL method, we can point to a static XML file which provides the data for this particular child. The syntax for Data URL method is:

    The newChart prefix is used to indicate that it must invoke LinkedCharts. xmlURL indicates that Data URL method is used to specify XML data for the linked child charts. In case of JSON data, jsonurl is used. URL specifies the data path for the linked chart that opens when this column is clicked.
    So according to the syntax, you would provide the child chart’s data in this way:

    We can also point to a virtual data provider, such as a server-side script which returns only XML, with Content-type set to text/xml:

  • LinkedCharts using Data String

  • When using the Data String method, the child chart’s data will have to be within the parent chart. Each data plot item in the parent chart is then linked to the child chart’s data (embedded in parent data source) by means of a unique data identifier. The syntax for Data String method is:

    According to this syntax, this demo’s code would have to be:

  • Data URL or Data String?

  • As is apparent from the samples above, the Data URL method is more concise than the Data String method. If you have more than 1 level of drill-down, your XML string will get large, and consequently difficult to debug. Loading times for your charts might suffer too.
    Therefore, we recommend the Data URL method to keep your code cleaner, and charts leaner.

    Creating LinkedCharts using Data URL method

    As you already know from the first 3 articles, the Data URL method requires 3 things:

    1. The parent chart (which we created in the 2nd article)
    2. The correct path to the data provider in the link attribute (see below)
    3. The data provider (see further below!)

    Make a copy of FusionChartsXT_with_PHP_and_MySQL_DataString.php and save it as FusionChartsXT_LinkedCharts_DataURL.php. Edit the part where you create the dataplots as below:

    Save this file. Let us now create the PHP script which will provide the data for the child charts:

    Save this file as FusionChartsXT_LinkedCharts_DataProvider.php. Now navigate to the page which has the parent chart, and click on one of the columns. This is what you should see:

    Creating LinkedCharts using Data String method

    As we’ve seen above, when using the Data String method, the child charts’ data needs to be embedded within the parent chart’s data.
    Therefore, we need to have a single file only. Make another copy of FusionChartsXT_with_PHP_and_MySQL_DataString.php and save it as FusionChartsXT_LinkedCharts_DataString.php.
    New code needs to the written only within the while loop; but we’re showing the code for the entire file below:

    Save this file. Navigate to this page using your browser, and this is what you should see:

    Configuring LinkedCharts

    What we created above were standard LinkedCharts. The child charts used the same configuration and chart type as the parent chart.

    Using the FusionCharts XT JavaScript API, you can configure every aspect of the child charts. For this, we’ve provided the configureLink() function. You can pass all the properties that a FusionCharts constructor accepts, as parameters to this function.

    The syntax for the configureLink() is:

    As two separate parameters, the first parameter is an Object containing all configurations (chart and overlay-Button). The second parameter accepts a number which denotes the level being configured. The first drilldown level is 0 (zero).

    Let us see how we can change the child chart we created above to a Area chart. In FusionChartsXT_DrillDown_DataString.php, write the following code after the echo renderChart(); line:

    Save the file, navigate to this page, and click on one of the columns again. This is what you should see:

    You can also render LinkedCharts in another container, or within a lightbox. Read more about such configurations in our documentation.

    LinkedCharts Events

    The FusionCharts XT JavaScript API provides a number of events when LinkedCharts are in action. Each parent chart can listen to the events and can add more functionality to the implementation. The events are as follows:

    • BeforeLinkedItemOpen: Fires before a child chart is created
    • LinkedItemOpened: Fires after a child chart is created
    • BeforeLinkItemClose: Fires before a child chart is closed
    • LinkedItemClosed: Fires after a child chart is closed

    Read more about Events in FusionCharts XT JavaScript API.

    Download the source code

    Next in the series

    In the last part of the FusionCharts XT in PHP series, we will learn how to apply styles to our charts, export our charts, and debug our charts. Stay tuned!

    • Jake October 12, 2014, 7:52 pm

      Good site you have got here.. It’s hard to find good quality writing like yours nowadays.
      I truly appreciate individuals like you! Take care!!

      • shilpi October 14, 2014, 12:57 pm

        Thanks Jake!

    Leave a Comment