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. 
-->

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', 'DaysHigh', 'Name'],
            proxy: {
                type: 'jsonp',
                url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quote%20where%20symbol%20in%20(%22YHOO%22%2C%22AAPL%22%2C%22AMZN%22%2C%22MSFT%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 = proxy.reader,
                        rawData = reader.rawData;
                    Ext.getCmp('container').updateChartData(rawData);
                }
            }
        });

        /*
         * Here a data store named 'companyStockQuoteStore' is created.
         * It will be used to store the stock price of a particular company for a period of 1 month which we will display in our grid.
         * It has three fields - 
         *     -symbol (company symbol)
         *    ...