ExtJS ViewPort ContentEl not rendering Google Visualisation API Pie Chart

Question

Hi there, I am unable to render google pie chart in my border layout of the interface. Though the pie chart works fine on separate html page.

The div is as follows:

The javascript code looks like this: { title: 'View Interactive Reports', ContentEl: "pChartMap",
plain: true,
bodyStyle: 'padding:5px', border: false, autoScroll: true }

I am not sure about the ContentEl thing. It works fine, if there is simple text there but since the google chart is based on google visualisation api and an AJAX call where there is a function call as: google.setOnLoadCallback(createChart);

Any ideas how to render this will be appreciated.

Cheers Ali

Answer 1

Have you check this? http://www.sencha.com/blog/2008/10/13/google-visualization/

Sadly the example page is broken, but is just because the sencha site has not the 2.2 source of ExtJS anymore; or at least not there where the sample expect it; but if you download the page and use ExtJS 2.3.0 it will work.

Anyway, you only need to download this js: http://dev.sencha.com/playpen/google-visualization/GVisualizationPanel.js

And then just use the Ext.ux.GVisualizationPanel. Here is an example I tested:

Ext.onReady(function() {
    var lineChartDs = new Ext.data.SimpleStore({
        fields: [
            {name: 'yr', type: 'string'}
            ,{name: 'sales', type: 'int'}
            ,{name: 'expenses', type: 'int'}
        ],
        data: [['2004',1000,400],['2005',1170,460],['2006',860,580],['2007',1030,540]]
    });
    var lineChart = new Ext.ux.GVisualizationPanel({
        id: 'lineChart',
        visualizationPkg: 'linechart',
        title: 'Company Performance Sample',
        store: lineChartDs,
        columns: [
            {dataIndex: 'yr', label: 'Year'}
            ,{dataIndex: 'sales', label: 'Sales'}
            ,{dataIndex: 'expenses', label: 'Expenses'}
        ]
    })
    new Ext.Viewport({
        layout: 'fit',
        items: [lineChart]
    });
});