Could not able to render simple Piechart using ExtJs 3.0

StackOverflow https://stackoverflow.com/questions/1871270

  •  18-09-2019
  •  | 
  •  

Question

I was trying to render a simple piechart using ExtJs 3.0 but could not. Below is the snippet:

<div id="ext_grid_panel">

    <div id="blackout_tab">
        <div id="grid_blackout_current"></div>
    </div>

    <div id="gls_tab">
         <div id="gls_current"></div>
    </div>

</div>

var mainGridPanelWidth = (Ext.IsIE)?'':'width: \'100%\',';
var mainGridPanel = new Ext.TabPanel({
    id: 'maingridpanel',
    renderTo: 'ext_grid_panel',
    style: {width:'100%'},
    tabWidth: 1000,
    activeTab: 0,
    items: [
        {id: 'allTabPanel',contentEl: 'blackout_tab',title: 'All'},
        {id: 'glsTabPanel',contentEl: 'gls_tab',title: 'GLS'}

    ]
});

if (!Ext.IsIE)
    mainGridPanel.setWidth('100%');

Ext.getCmp('allTabPanel').on('activate', function() {

}); 

Ext.getCmp('glsTabPanel').on('activate', function() {   

}); 


var pieChart = {
        xtype : 'piechart',
        store : [{'total' :'42', 'range':'20,000'},{'total' :'53', 'range':'10,000'}],
        dataField : 'total',
        categoryField : 'range'         
        };

var panelBlackoutCurrent = new Ext.Panel({
    id: 'panelblackoutcurrent',
    renderTo: 'grid_blackout_current',
    items: [
            pieChart
    ]
});

var panelglsCurrent = new Ext.Panel({
    id: 'panelglscurrent',
    renderTo: 'gls_current',
    items: [
        pieChart
    ]
});

When i inspect in firefox firebug, i see an object(.swf) is created but the piechart content is not there/rendered.

Quick guidance is highly appreciated as it is taking lot of time with no solution

Was it helpful?

Solution

You can use an example pie chart as a starting point:

http://www.extjs.com/deploy/dev/examples/chart/pie-chart.js

Here is the result: http://www.extjs.com/deploy/dev/examples/chart/pie-chart.html

OTHER TIPS

here come my version 

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>



    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>

<div id="ext_grid_panel">

</div>
<script>
Ext.onReady(function(){
    var store = new Ext.data.JsonStore({
        fields: ['total', 'range'],
        autoLoad: true,
        data: [
            {
                total: 42,
                range:'20,000'
            }
            ,{
                total: 53,
                range:'10,000'
            }
        ]
    });


    var mainGridPanel = new Ext.TabPanel({
        renderTo: 'ext_grid_panel',
        //style: {width:'100%'},
        width: '100%',
        height: 400,
        activeTab: 0,

        plain: true,
        items: [
            {
                id: 'panelglscurrent',
                title: 'GPS',
                layout: 'fit',
                listeners: {
                    activate: function(){
                    }
                },
                items: [{
                    id: 'chart1',
                    xtype : 'piechart',
                    store : store,
                    dataField : 'total',
                    categoryField : 'range'                 
                }]
            },
            {
                id: 'panelblackoutcurrent',
                title: 'All',
                layout: 'fit',
                listeners: {
                    activate: function(){

                    }
                },
                items: [
                   {
                    id: 'chart2',
                    xtype : 'piechart',
                    store : store,
                    dataField : 'total',
                    categoryField : 'range'                 
                   }
                ]
            }
        ]
    });

    Ext.getCmp('panelglscurrent').on('activate', function() {
        Ext.getCmp('panelglscurrent').doLayout(true);
    }); 

    Ext.getCmp('panelblackoutcurrent').on('activate', function() {   
        Ext.getCmp('panelblackoutcurrent').doLayout(true);
    }); 

    if (!Ext.IsIE)
        mainGridPanel.setWidth('100%');
});





</script>
</body>

</html>

your sample had a few problems:

  • first you have to create a proper store passing the array of object to the pie chart is not enought
  • also you should wrap your code inside Ext.onReady or you can get some strange behaviour like element not rendering properly
  • make sure to include the plain: true on tabPanel with chart inside or the chart won't render properly

an general note

  • try to give good name at your variable (like mainGridPanel being actually a TabPanel)
  • intent properly your code, by experience it really become messy fast.

Also if you want to make the extjs component using full screen, you have better to use the viewport it would make everything resize nicely and make things more easy for you

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top