Google visualization's integration with Ext JS

Question

What will be the most simple way to integrate Google visualization components(Pie chart, Sankey chart, Google maps, Line chart, Histograms etc) in the Ext JS application?

Answer 1

Found the simplest way to integrate the google visualization(Charts/graphs etc.) with Ext JS application.

Add the below library in the file which is loaded when the application launches:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> 
 </script>
    <script type="text/javascript">
      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});
    </script>

Now create an X-template as follows in Ext JS:

    /**
    Author:Krishna Varshney
    Descr:This is a template for using google visualization in Unify Dashboard.
    **/
    Ext.define('Home.view.home.CustomBubbleChart', {
        extend: 'Ext.view.View',
        xtype: 'custombubblechart',
        controller: 'cardtemplatecontroller',
        height: 300,
        width: 200,
        scrollable: false,
        group:'RevenueCharts',
        count:1,
        name:'Revenue By Service Plan',
        parentCard:'revenueBySP',
        margin: '20 10 20 15',
        align: 'stretch',
        flex: 1,
        border: false,
        style: {
            "border-radius": '8px',
            "box-shadow": "4px 4px 10px 4px rgba(0.2,0.2,0.2,0.2)"
        },
        itemSelector: 'div.bubble-item-wrap',
        initComponent: function () {
            var me = this;
            Ext.apply(me, {
                store: new Ext.data.JsonStore({
                    storeId: me.storeId,
                    data: [{
                        headerValue:'Revenue By Service Plan'
                    }],
                    fields: ['id', 'headerValue'],
                }),
                tpl: me.createTpl()
            });
            me.callParent(arguments);
        },
        listeners:{
            itemclick: 'onMenuItemClick',
            afterrender:'onAfterRenderCharts'
        },
        createTpl: function () {
            var me = this;

            return new Ext.XTemplate(
                '<div class="bubble-item-wrap mb5" style="padding:10px;height:280px;width:410px">',
                    '<div style="background-color:#157fcc;border-radius: 8px 8px 0px 0px;height: 3px;margin-top: -10px;width: 405px;margin-left: -10px;" class="color-band">','<div class="card-header" style="font-size: 16px;text-align: center;color:#157fcc;padding:7px;font-weight:bold;">Revenue By Service Plan</div>',
                    '<div style="font-size:22px;color:white;cursor:pointer;margin-left: 370px;margin-top: -25px;" class="fa fa-cog">','</div>',
                    '<div style="padding:10px;height:280px;width:410px"  id="custombubblechart">','</div>',
                '</div>',

                {
                    compiled: true,
                    getValue: function (values) {
                        return Ext.htmlEncode(values.value);
                    },
                    getHeight: function () {
                        return me.up('custom-panel').getHeight();
                    }
                }
            )
        }
    });

``
Add the xtype whereever you want. This works like a charm.Similiary you can add whatever package and component you want to show on your interface.