Ext JS 4 Pie Chart example created using Sencha Architect

Ext JS 4 Pie Chart example created using Sencha Architect

Hi, in this article I will show how you can use Sencha Architect to create simple Ext JS 4 pie chart. In the example I used statistics data from wikipedia:

Usage share of operating systems

The data was updated in August 2013 and I will use those percentages to create pie chart presenting usage share of operating systems. The data look like the following picture:


Ok, please open Sencha Architect and create a new project. After that please add viewport to the design editor and one default Ext.panel.Panel and set fit layout. Next will be the pie chart, you can find it quickly in the toolbox by “pie chart”. The pie chart class is a subclass of Series class. After those steps you should see similar view as the following picture:


// Ext JS 4 has 7 classes in draw package: Surface, engine.Svg, engine.Vml, Component, CompositeSprite, Color, and Sprite

It’s a default configuration and in current moment not working. Why? Because you have to set store with data. To do that find in the toolbox store and add to editor. Please choose Array Store. After that please add two fields:


The system field will be used as label and percentage field to create pie chart parts. In current moment your store is empty, so you have to add some data. In this example we use array store without proxy so you can simply fill data array in store:


When you click on selected icon you can go to code editor and put those objects into data array. The pie chart will use those objects to draw a chart.


Okay, our store is ready. Please select in the project inspector a PieChart object and choose created store:


Next step is to set which store field will be used to generate chart. You can do this in the Ext.chart.series.Pie object:


Okay, we are almost ready to see the result. We have to do only one last thing, it’s Label. To set labels please go to Ext.chart.Label object:


When you click on selected icon, please change value of ‘field’ in the code editor to ‘system’:


Okay, please save your project and go to your favourite browser and open your chart. Your result should be similar to the following picture:


Nice, nice, nice. Now we will add interactive legend to this chart. To do this we need change Ext.chart.Chart object:


After click on plus button you should see similar option to the following:


Okay, that’s fine. The default options allow to draw legend for our chart. The final result look like following picture:


Please click on labels in the legend box, you can simply disable specific part and see only those which you want to see. For example like here:


Ext JS 4 charts are really awesome. Using Sencha Architect you can implement them much quicker. Please enjoy. If you have questions feel free to ask and see you soon.


Leave a Reply

Please fill all required fields

Drag circle to the rectangle on the right!