May 29, 2010

Working with ExtJS Pie Charts

In the previous post we saw how to create & customize charts using ExtJS. In this post, we will have a look at Pie charts. Pie charts are little different from other charts as they do not have axis and the data displayed is in percentage.

First Pie Chart

Let’s start with the data store. In this tutorial, I am getting the data from a remote URL. My server returns me a set of JSON object with product name and their sales value. Here is the data store:
var store = new Ext.data.JsonStore({
      fields:['product','sales'],
      root: 'rec',
      url: ‘/piechart/data/’
});
Unlike other charts, pie charts do not have axis. So, instead of using xField and yField properties of charts to pass data, we have dataField and categoryField in pie charts. Here is the code for pie chart:
new Ext.Panel({
title: 'Pie Chart',
      renderTo: 'chartDiv',
      width:400,
      height:300,                        
      items: {
            xtype: 'piechart',
            store: store,
      dataField: 'sales',
            categoryField: 'product'
      }
});
Very simple indeed! ExtJS does all the necessary calculations even if you don’t represent the data in percentage.

Adding Legend

Now, let’s add a legend to this chart. Without it, there is no much use in displaying a chart. An important property for styling is extraStyle. It helps you to add extra styles that will add or override default styles of the chart. Here is the final code for the pie chart and panel:
new Ext.Panel({
       title: 'The Pie Chart',
       renderTo: 'chartDiv',
       width:400,
       height:300,
items: {
       xtype: 'piechart',
       store: store,
       dataField: 'sales',
       categoryField: 'product',
       extraStyle: {
            legend:{
                display: 'right',
                padding: 10,
                border:{
                   color: '#CBCBCB',
                   size: 1
                }
            }
        }
      }
 });
While displaying the legend,notice that I have also made some beautification to it. I have provided a thin border using a specific color. There is no chart specific code for displaying legend, so the same code will work for other types of charts as well.

Custom Colors in your Pie chart

By default, ExtJS picks out the colors when rendering the chart. You might find these color shade dull. Lets try to brighten up our chart. I am going to apply a color scheme called Esprit_80s. In order to apply, we need to basically modify the style of series. So we will modify seriesStyles property of our pie chart:
new Ext.Panel({
       title: 'The Pie Chart',
       renderTo: 'chartDiv',
       width:600,
       height:300,
       items: {
           xtype: 'piechart',
           store: store,
           dataField: 'sales',
           categoryField: 'product',
           seriesStyles: {
             colors:['#F8869D','#25CDF2',
                     '#FFAA3C','#DEFE39',
                     '#AB63F6'] //eSprit 80s
            },
           extraStyle: {
                 legend:{
                    display: 'right',
                 padding: 10,
                 border:{
                   color: '#CBCBCB',
                   size: 1
                 }
           }
       }
    }
});

Note that the property colors is used only for pie charts. If you need to change the colors for other charts you will have to use the color property.

Textures & images in your Pie chart

ExtJS also provides us the ability to use images instead of color. So, if you have few texture images or any other images, you can easily substitute them for colors. This is possible through the images property of seriesStyles. I have five simple texture images and here is how I am adding them to our pie chart:
new Ext.Panel({
       title: 'The Pie Chart',
       renderTo: 'chartDiv',
       width:600,
       height:300,
       items: {
           xtype: 'piechart',
           store: store,
           dataField: 'sales',
           categoryField: 'product',
           seriesStyles: {
           images:['images/one.png',
                'images/three.png',
                'images/two.png',
                'images/four.png',
                'images/five.png']
            },
            extraStyle: {
                legend:{
                display: 'bottom',
                padding: 10,
                border:{
                   color: '#CBCBCB',
                   size: 1
                }
            }
       }
   }
});

Apart from these properties, extraStyle can be used to change the font styles as well. Have a look at the APIs and try out different customizations. I will be back with more customization tutorials on ExtJS charts. Let me know your feedback either through comments or using the contact form.

Learn how to Handle events in ExtJS charts or read other articles on ExtJS.

14 comments:

Anonymous said...

Hey! Nice tutorial.

I was wondering whether it is possible to increase the divider thickness between each slice (i.e., each categoryField). This would further help a viewer differentiate between each category.

Cassanova said...

Very nice Tutorial.
But is it possible to have 3D pie chart ? How can I tweak this code to get 3D slices .
Thanks for your help.

Abdel Olakara said...

@Cassanova Unfortunately no. ExtJs uses YUI charting and its very very limited. I hope they improve the charting feature in Ext JS 4.0

Anonymous said...

hi,

I need to diplay number as well as description in the legend so in categoryField i need to pass two columns how can i do that?

Anonymous said...

Thanks for the nice tutorial.

Is it possible to label(show) the actual values on the series in the pie with ExtJS?

Thanks.

madhavan said...

I have to show the label in pie chart can u please give me some idea ? my mail id is m.a.madhavan@gmail.com

astrocybernaute said...

how to do if i want to get my data from database? in c#

astrocybernaute said...

how to do if i want to fill my pie with data from my data base ? (in c#)

Abdel Olakara said...

@astrocybernaute.. your C# code should generate the appropriate JSON. Next, your JsonStore should point to this JSON generating URL and consume it.

astrocybernaute said...

thanks for ur reply, but the problem is how to load it, te store.loadData() gives me errors

Abdel Olakara said...

@astrocybernaute what is the error? have you searched for the error in Sencha forum or Stackoverflow?

astrocybernaute said...

the error is that the loaddata() require an argument : loaddata(generatedata())
i dont know what to put istead!

Vivek.a said...

Legend gets displayed ok. Now, I want to display


"Average:45 Max: 67" below the x-Axis .


How is this possible ?

Nakhate suresh said...

please give description about which files like store and other on which place.
and detail about database connectivity