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:

wiki-simple-pie-chart

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:

12-simple-pie-chart

// 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:

11-simple-pie-chart

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:

10-simple-pie-chart

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.

9-simple-pie-chart

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

8-simple-pie-chart

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:

7-simple-pie-chart

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:

6-simple-pie-chart

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

5-simple-pie-chart

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

2-simple-pie-chart

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

4-simple-pie-chart

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

3-simple-pie-chart

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

1-simple-pie-chart

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:

13-simple-pie-chart

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.

Comments:

Leave a Reply

Please fill all required fields


Drag circle to the rectangle on the right!

Send