With the arrival of the 12.1 release of Infragistics for jQuery , the Pie Chart control is no longer in a CTP state. This brings an amazing opportunity to display quantitative relations in an easily-understandable way. After reading this blog post , you should have enough knowledge on how to operate the Pie Chart control.

Where to start

First thing’s first , you’ll need to load the required files so that the chart gets rendered properly. As of 12.1 , you’ve got the Infragistics Loader to do that for you. What you need to do is put this bit of code in your header file:

   1: <script type="text/javascript">

   2:     $.ig.loader({

   3:         scriptPath: 'Scripts/js/',

   4:         cssPath: 'Styles/css/',

   5:         resources: 'igPieChart'

   6:     });

   7: </script>

This means that you’ll need to move the /js/ and /css/ folders into your project setup. If you need some additional help on using the Infragistics Resource Loader – take a look at this post by Atanas Dyulgerov !

With all the required files now loaded , your next step is getting some data for the chart. We need some object that have some sort of a label and also a numeric value.

   1: var data = [

   2:     { Item: "Bread", Amount: 30 },

   3:     { Item: "Butter", Amount: 40 },

   4:     { Item: "Cheese", Amount: 50 }

   5: ];

This will suffice. The Item property will be used as a label for the slices of our pie chart; Amount is the property that will determine how big each slice will be. What’s next is , yup , instantiating the chart. Here’s how you do it:

   1: $('#chart1').igPieChart({

   2:     dataSource: data,

   3:     width: '500px',

   4:     height: '500px',

   5:     valueMemberPath: 'Amount',

   6:     labelMemberPath: 'Item',

   7:     radiusFactor: .5,

   8:     legend: { element: 'legend', type: 'item' }

   9: });

The valueMemberPath should be set to point to the property name holding the numeric values – in our case Amount. labelMemberPath represents each slice’s label so we set it to be Item. Then at line 7 you see an option called radiusFactor. This determines the scaling of the pie chart itself. The width and height property you’ve set are for the entire widget; with radiusFactor you change how should the chart inside scale off of those. Setting the radiusFactor to 1 will make the circle as big as the biggest dimension ( width or height or both if they’re equal ).

Right at line 8 , you see the legend property. Let’s get over this really quick.

When you define this property, you must specify an element which will be used for the legend to get rendered inside – in our case it’s an empty div.

   1: <div id="chart1"></div>

   2: <div id="legend"></div>

One of these is used , as you may see in the JavaScript snippet above , to hold the chart. The second one is used for the legend. When you preview the page , you should get something that looks like this:

There you have it – the Infragistics for jQuery Pie Chart in a few simple steps. Next up , let’s talk about some slightly more intricate topics.

Events

One of the really useful events you can manipulate is the sliceClick one. It provides information about the slice that has been clicked , as well as the pie chart itself. Here’s an example of using the event for “exploding” a slice – whenever a slice has been clicked , it will stand out a bit more. We’ll also grab the slice’s value so we can display it as well. Here’s the code:

   1: sliceClick: function (evt, ui) {

   2:     ui.slice.isExploded = !ui.slice.isExploded;

   3:     if (ui.slice.isExploded) $("#value").text(ui.slice.item.Amount);

   4: }

What we’re doing is we’re just changing the state of the clicked slice – making it exploded if it wasn’t and vice versa. Line 3 checks whether the slice is exploded and if it is , we fetch the residing item’s numeric value and display it. Here’s what the entire thing looks like: