O'Reilly logo

Ext JS 4 First Look by Loiane Groner

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Ext chart package

First, we will see an example of how to implement an Ext JS 3 chart:

Ext.chart.Chart.CHART_URL = '../extjs3/resources/charts.swf';

var store = new Ext.data.JsonStore({
   fields:['name', 'age'],
   data: [
          {name:'Loiane', age: 25},
          {name:'Peter', age: 24},
          {name:'Claudia', age: 30},
          {name:'John', age: 28},
          {name:'Steve', age: 32}
   ]
});

var chart = new Ext.Window({
   title: 'Friends x Age',
   width:500,
   height:300,
   layout:'fit',

   items: {
      xtype: 'columnchart',
      store: store,
      xField: 'name',
      yField: 'age',
      xAxis: new Ext.chart.CategoryAxis({
         title: 'Friend Name'
      }),
      yAxis: new Ext.chart.NumericAxis({
         displayName: 'Age'
      })
   }
});
chart.show();

As you can see, we can declare the chart type directly in the xtype property. We are saying that the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required