Setting Up Drill-down

When reviewing the quarterly sales chart, for a particular quarter, Harry wanted to see monthly sales for that quarter. He wants to click on the column representing that quarter and see the monthly figures in that quarter. This can be easily achieved using drill-down functionality of FusionCharts Suite XT.
The chart with drill-down would look as under. Click on a column to see the result.

Basics of drill-down

All the charts in FusionCharts Suite XT (except zoom-line chart) offer two types of drill-down:

• Simple links : Using this method, you can specify custom URLs or JavaScript methods to be invoked for each data point on the chart. When a user clicks the respective data plot (column, line, pie slice etc.), the chart will simply invoke that method, or redirect to the specific URL. If it’s a URL, you can configure whether to open the URL in the same page, a new window, a pop-up or a frame.

• Chart links (LinkedCharts) : Using this method, instead of specifying custom URLs or JavaScript methods, you provide reference to a new chart altogether, which opens upon click. The new chart is called dependent chart, which is a child of parent chart. This feature is called LinkedChart. All the links originate from a parent chart. The data of parent chart encompasses data (or URL where they can be fetched from) for all descendant charts. The descendant charts can be configured to either replace the parent chart with an option to drill-up, or open in new dialogs or frames.

Using both the methods specified above, you can create endless levels of drill-down from your parent chart. It has been kept very generic to accommodate all types of requirements. Let’s first quickly explore simple links, before we build the chart that Harry wants using LinkedCharts.

Creating Simple links in charts

Using simple links, you can create the following behaviors:

• Open custom URL in the same page

• Open custom URL in a new browser window

• Open custom URL in a specified frame/iframe

• Open URL in a new pop-up window

• Invoke JavaScript methods in the scope of the page

• Set the whole chart as a hot-spot and apply any of the above simple-link features

A simple XML/JSON to reflect all of the above use-cases is below:

<chart caption='Monthly Sales Summary' subcaption='For the year 2014' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
  <set label='Jan' value='17400' link='Detailed/SalesJan.html'/>
   <!-- Simple Link that opens in same window -->
  <set label='Feb' value='19800' link='n-Detailed/SalesFeb.html'/>
  <!-- Link that opens in new window -->
  <set label='Mar' value='21800' link='F-detailsFrame-Detailed/SalesMar.htm'/>
   <!-- Link that opens in a frame -->
  <set label='Apr' value='23800' link='P-detailsPopUp,width=400,height=300,toolbar=no,
    scrollbars=no,resizable=no-Detailed/SalesApr.html'/>
    <!-- Link that opens in a pop-up -->
  <set label='May' value='29600' link='j-showSalesDetails-May'/>
   <!-- JavaScript function showSalesDetails invoked as link, with 'May' as parameter passed to it -->
</chart>

Now that you’ve seen how to create simple links in charts, let’s build the chart that Harry wants using LinkedCharts feature.

Using LinkedCharts to build a drill-down chart

LinkedCharts allows you to create unlimited level of drill-down charts using a single data source. All the links originate from a parent chart whose data encompasses data (or URL to fetch from) for all descendant (child, grand-child) charts.

Upon clicking the data plot items (columns, pie, etc.) of the parent chart, users can drill-down into descendant charts. The descendant charts can be configured to either replace the parent chart with an option to drill-up, or can be opened in new dialogs or frames.

For Harry’s example, we just need to build a single level of drill-down - from quarterly sales to monthly sales. The parent chart shows quarterly sales, whose columns when clicked will render child charts having monthly sales for that quarter. LinkedCharts allows you to build these kinds of scenarios (and much more complex ones) without having to write any additional lines of code.

To create LinkedCharts, you need to follow these steps:

• First, create the XML/JSON data for parent chart. This is called the parent data source and comprehensively contains Data String or Data URL for all descendant charts.

• Next, append the Data String or Data URL for all the descendant charts within the parent data source. If Data String method is used, data for each descendant chart is embedded within the parent data source and linked using unique data identifiers. To make this example self-enclosed, we will use the Data String method.

• You have your LinkedChart ready!

Yes, no additional code is required! The LinkedChart feature automatically takes care of the following:

• It creates and shows a detailed child chart when a data plot in the parent chart is clicked.

• It clones all chart configuration settings from the parent chart to create the descendant chart or the LinkedChart.

• It also allows you to configure specific properties for the descendant charts using configureLink() function.

• It notifies your code by way of JavaScript events whenever a link is invoked, link item is opened and link item is closed.

• It allows you to drill down to unlimited numbers of levels.

The data required to build this chart for Harry would look as under:

• JSON
• XML

{
    "chart": {
        "caption": "Quarterly revenue",
        "subCaption": "Last year",
        "xAxisName": "Quarter (Click to drill down)",
        "yAxisName": "Revenue (In USD)",
        "numberPrefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000",
            "link": "newchart-json-q1"
        },
        {
            "label": "Q2",
            "value": "1970000",
            "link": "newchart-json-q2"
        },
        {
            "label": "Q3",
            "value": "1910000",
            "link": "newchart-json-q3"
        },
        {
            "label": "Q4",
            "value": "2120000",
            "link": "newchart-json-q4"
        }
    ],
    "linkeddata": [
        {
            "id": "q1",
            "linkedchart": {
                "chart": {
                    "caption": "Monthly Revenue",
                    "subcaption": "First Quarter",
                    "xAxisName": "Month",
                    "yAxisName": "Revenue (In USD)",
                    "numberPrefix": "$",
                    "theme": "fint"
                },
                "data": [
                    {
                        "label": "Jan",
                        "value": "420000"
                    },
                    {
                        "label": "Feb",
                        "value": "810000"
                    },
                    {
                        "label": "Mar",
                        "value": "720000"
                    }
                ]
            }
        },
        {
            "id": "q2",
            "linkedchart": {
                "chart": {
                    "caption": "Monthly Revenue",
                    "subcaption": "Second Quarter",
                    "xAxisName": "Month",
                    "yAxisName": "Revenue (In USD)",
                    "numberPrefix": "$",
                    "theme": "fint"
                },
                "data": [
                    {
                        "label": "Apr",
                        "value": "550000"
                    },
                    {
                        "label": "May",
                        "value": "910000"
                    },
                    {
                        "label": "Jun",
                        "value": "510000"
                    }
                ]
            }
        },
        {
            "id": "q3",
            "linkedchart": {
                "chart": {
                    "caption": "Monthly Revenue",
                    "subcaption": "Third Quarter",
                    "xAxisName": "Month",
                    "yAxisName": "Revenue (In USD)",
                    "numberPrefix": "$",
                    "theme": "fint"
                },
                "data": [
                    {
                        "label": "Jul",
                        "value": "680000"
                    },
                    {
                        "label": "Aug",
                        "value": "620000"
                    },
                    {
                        "label": "Sep",
                        "value": "610000"
                    }
                ]
            }
        },
        {
            "id": "q4",
            "linkedchart": {
                "chart": {
                    "caption": "Monthly Revenue",
                    "subcaption": "Fourth Quarter",
                    "xAxisName": "Month",
                    "yAxisName": "Revenue (In USD)",
                    "numberPrefix": "$",
                    "theme": "fint"
                },
                "data": [
                    {
                        "label": "Oct",
                        "value": "490000"
                    },
                    {
                        "label": "Nov",
                        "value": "900000"
                    },
                    {
                        "label": "Dec",
                        "value": "730000"
                    }
                ]
            }
        }
    ]
}

Explanation of data structure required for LinkedCharts

If you look at the data above, we have first defined a column2d chart showing quarterly sales. Each quarter’s data is set with a link whose value starts with a prefix - newchart. The prefix lets the parent chart know that it is going to open a LinkedChart when the dataplot is clicked. newchart takes additional parameters as listed below:

• newchart is followed by a hyphen (-) and then the data format for the new chart is specified. If you are looking at the JSON data, you will find it as json, whereas for the XML data, it is defined as xml. When using data URL method, you can specify xmlurl or jsonurl as its value.

• The rest of the value, after a hyphen again (-), of the link attribute defines the data source as per the specified data format:

  • When json is set as the data format, the data becomes an id of a linkeddata element in the same JSON data that contains the data for the existing chart.

  • When xml is set as the data format, the data becomes an id of a linkeddata element in the same XML data that contains the data for the existing chart.

  • When jsonurl or xmlurl is set as the data format, the data is pulled from the URL specified after the hyphen, at run-time. E.g., newchart-jsonurl-/data/jsonjan2014.json

• If you scroll down the data, it contains a special Array (or element in case of XML) called linkeddata. This is required when you build self-contained drill-down charts using Data String method. This element is NOT required when using Data URL method.
  • Each element of linkeddata array contains data for the descendent LinkedCharts.
• Each element is an Object with 2 properties - id and linkedchart. id is used to map data for descendent chart with parent chart, and should be unique for each item (remember link attribute in parent chart with newchart-json-id as value?). linkedchart attribute contains the full data for the specific descendant chart as string (JSON or XML).

That’s it! You have just configured a drill-down chart to display the quarterly as well as monthly revenue earned by Harry’s supermarket over the last year.

The code for entire page is below:

<html>
<head>
<title>My First chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
var drillDownChart = new FusionCharts({
    "type": "column2d",
    "renderAt": "chartContainer",
    "width": "450",
    "height": "300",
    "dataFormat": "json",
    "dataSource": {
        "chart": {
            "caption": "Quarterly revenue",
            "subCaption": "Last year (Click on columns to see details)",
            "xAxisName": "Quarter",
            "yAxisName": "Revenue",
            "numberPrefix": "$",
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000",
            "link": "newchart-json-Q1"
        }, {
            "label": "Q2",
            "value": "1970000",
            "link": "newchart-json-Q2"
        }, {
            "label": "Q3",
            "value": "1910000",
            "link": "newchart-json-Q3"
        }, {
            "label": "Q4",
            "value": "2120000",
            "link": "newchart-json-Q4"
        }],
        "linkeddata": [{
            "id": "Q1",
            "linkedchart": {
                //Data String Method. Data for linked chart added as string instead of url.
                "chart": {
                    "caption": "Monthly Revenue",
                    "subcaption": "First Quarter",
                    "xAxisName": "Month",
                    "yAxisName": "Revenue",
                    "numberPrefix": "$",
                    "theme": "fint"
                },
                "data": [{
                    "label": "Jan",
                    "value": "420000"
                }, {
                    "label": "Feb",
                    "value": "810000"
                }, {
                    "label": "Mar",
                    "value": "720000"
                }]
            }
        }, {
            "id": "Q2",
            "linkedchart": {
                "chart": {
                    "caption": "Monthly Revenue",
                    "subcaption": "Second Quarter",
                    "xAxisName": "Month",
                    "yAxisName": "Revenue",
                    "numberPrefix": "$",
                    "theme": "fint"
                },
                "data": [{
                    "label": "Apr",
                    "value": "550000"
                }, {
                    "label": "May",
                    "value": "910000"
                }, {
                    "label": "Jun",
                    "value": "510000"
                }]
            }
        }, {
            "id": "Q3",
            "linkedchart": {
                "chart": {
                    "caption": "Monthly Revenue",
                    "subcaption": "Third Quarter",
                    "xAxisName": "Month",
                    "yAxisName": "Revenue",
                    "numberPrefix": "$",
                    "theme": "fint"
                },
                "data": [{
                    "label": "Jul",
                    "value": "680000"
                }, {
                    "label": "Aug",
                    "value": "620000"
                }, {
                    "label": "Sep",
                    "value": "610000"
                }]
            }
        }, {
            "id": "Q4",
            "linkedchart": {
                "chart": {
                    "caption": "Monthly Revenue",
                    "subcaption": "Fourth Quarter",
                    "xAxisName": "Month",
                    "yAxisName": "Revenue",
                    "numberPrefix": "$",
                    "theme": "fint"
                },
                "data": [{
                    "label": "Oct",
                    "value": "490000"
                }, {
                    "label": "Nov",
                    "value": "900000"
                }, {
                    "label": "Dec",
                    "value": "730000"
                }]
            }
        }]
    }
});

drillDownChart.render();
})
</script>
</head>
<body>
  <div id="chartContainer">FusionCharts will render here</div>
</body>
</html>

Was there a problem rendering the chart?

In case something went wrong and you are unable to see the chart, check for the following:

• If you are getting a JavaScript error on your page, check your browser console for the exact error and fix accordingly.

• If the chart does not show up at all, but there are no JavaScript errors, check if the FusionCharts Suite XT JavaScript library has loaded correctly. You can use developer tools within your browser to see if fusioncharts.js was loaded. Check if the path to fusioncharts.js file is correct, and whether the file exists in that location.

• If you get a Loading Data or Error in loading data message, check whether your JSON data structure is correct, and there are no conflicts related to quotation marks in your code.

Click here for more information on Troubleshooting.