ansaurus

Question

Could not able to render simple Piechart using ExtJs 3.0

Answer 1

A:

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

Igor Zevaka 2009-12-09 02:40:03

Thanks for the link,Igor.Still, I could not get it rendered. When I inspect in firebug, i find the below but no Piechart rendered:<object id="extflashcmp1002" height="100%" width="100%" type="application/x-shockwave-flash" data="http://yui.yahooapis/charts/assets/charts.swf" style="visibility: visible;">....</object>.My application is deployed in IIS server and I wonder if the server does not allow/support '.swf' files to be rendered. If true, any idea how to enable/settings in IIS to allow 'application/x-shockwave-flash' type of files? Any other settings in 'PhP.ini' to be done?

SriniWeb 2009-12-09 04:22:21

Thanks Igor, It works!!You have provided a simple, basic step to start up with which really helped.

SriniWeb 2009-12-09 14:55:46

Answer 2

A:

Hello SriniWeb

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

RageZ 2009-12-09 04:01:10

Thank you very much RageZ, it works!!!!!You explanation is very detailed one and easily understandable.

SriniWeb 2009-12-09 14:54:36

RageZ, I see a peculiar behaviour. Both tabs render well in firefox everytime but in IE 6, when I click on the second tab (i.e id: 'panelblackoutcurrent', title: 'All') it renders the piechart randomly (Sometimes it renders and sometimes it dont). So i refresh again to see the result, it sometimes renders and other times do not render. Could you guide me what could be the solution?Thanks in advance.

SriniWeb 2009-12-09 17:03:35

ansaurus

tags:

views:

answers:

Could not able to render simple Piechart using ExtJs 3.0

related questions