Rendering drill down version of FusionCharts alongwith ExtJS grid

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ritesh Pandey

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<!-- This example shows how to use drill down charts from FusionCharts Suite XT alongwith a Grid Component of Sencha ExtJS. Close integration of ExtJS events with FusionCharts events can be seen as well. We create a single instance of chart and place it beside a grid. Listening to different events of store and grid, we update the chart data and type accordingly. -->
<div id="levelZeroHelpText" class="level-0-help-text">
    <p class="title">The following grid shows the stock value changes of Yahoo! for every quarter in 2010.</p>
    <p>Click on the rows or on the column in the chart to see further details.</p>
</div>
<div id="levelOneHelpText" class="level-1-help-text">
    <p class="title">The following grid shows the stock value changes of Yahoo! for <span id="quarter"></span>.</p>
</div>
<div id="backBtnContainer"></div>

CSS

.level-0-help-text, .level-1-help-text {
    width: 50%;
    padding: 10px 0 0 10px;
}
.level-0-help-text p, .level-1-help-text p {
    line-height: 20px;
}
.level-0-help-text p.title {
    font-weight: bold;
}
.level-0-help-text p.sub-title {
    font-style: italic;
}
.level-1-help-text {
    display: none;
}

JavaScript

/*
 * Here an ExtJS application named 'Fiddle' is created.
 * We create the different components of ExtJS in the launch callback function.
 */
Ext.application({
    name: 'Fiddle',
    launch: function () {
        /*
         * Here a data store named 'allCompanyStockQuoteStore' is created.
         * It will be used to store the stock price of all companies which we will display in our grid.
         * It has three fields -
         *     -symbol (company symbol)
         *     -name (Name of company)
         *     -DaysHight (Highest value throughout day)
         */
        Ext.create('Ext.data.Store', {
            autoLoad: true,
            storeId: 'allCompanyStockQuoteStore',
            fields: ['symbol', 'Name', 'Date', 'Close'],
            filterOnLoad: true,
            sorters: [{
                property: 'Date',
                direction: 'ASC'
            }],
            filters: [

            function (item) {
                var dateString = item.get('Date').toString(),
                    quarterEndDays = ['-03-31', '-06-30', '-09-30', '-12-31'];
                return quarterEndDays.indexOf(dateString.substring(4)) > -1;
            }],
            proxy: {
                type: 'jsonp',
                url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20%3D%20%22YHOO%22%20and%20startDate%20%3D%20%222010-01-01%22%20and%20endDate%20%3D%20%222010-12-31%22&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys',
                reader: {
                    root: 'query.results.quote'
                }
            },
            listeners: {
                /*
                 * After the store is loaded, we pass the raw data to the FusionCharts component. It then modified the data format and uses it to render the chart.
                 */
                load: function (store) {
                    var proxy = store.getProxy(),
                        reader =...