Blog

The Ignite UI Doughnut Chart and its features

Marina Stoyanova / Wednesday, October 16, 2013

Using the Doughnut chart you can easily display multiple rings at the same time, capable of binding the same or a different collections. This chart is similar to the pie chart and is used to show categorical statistics expressed in percentages. It posses various options, allowing you to customize its appearance and the way you data is visualized.

For starters

In the current release this control is CTP, so be aware that you may face some difficulties. Adding doughnut chart to your application is easy. First we are going to show you how to initialize it in JavaScript and then in ASP.NET MVC. In order to add this jQuery control to your application,all you need to do is create a HTML tag to host your chart and then add the following lines:

  1. <script>
  2.  
  3.     $(function () {
  4.  
  5.         var data = [
  6.                         { "savings": 230, "Budget": 600, "Label": "Adi" },
  7.                         { "savings": 100, "Budget": 400, "Label": "Sam" },
  8.                         { "savings": 250, "Budget": 550, "Label": "Tom" },
  9.                         { "savings": 22, "Budget": 300, "Label": "Mark" },
  10.                         { "savings": 130, "Budget": 650, "Label": "Dave" },
  11.                         { "savings": 54, "Budget": 200, "Label": "Sally" }
  12.         ];
  13.  
  14.         $("#chart").igDoughnutChart({
  15.             width: "550px",
  16.             height: "550px",
  17.             innerExtent: 10,
  18.             series:
  19.                 [
  20.                     {
  21.                         name: "Budget",
  22.                         labelMemberPath: "Label",
  23.                         valueMemberPath: "Budget",
  24.                         dataSource: data,
  25.                         labelsPosition: "bestFit"
  26.                     },
  27.                     {
  28.                         name: "savings",
  29.                         labelMemberPath: "Label",
  30.                         valueMemberPath: "savings",
  31.                         dataSource: data,
  32.                         labelsPosition: "bestFit"
  33.                     }
  34.                 ]
  35.  
  36.         });
  37.  
  38.     });
  39. script>

In this example the Doughnut Chart is bound to JSON data. As we said this control supports single or multiple ring series and each ring can visualize separate data. In the preceding code you can see how to create a chart with two rings, displaying different data. 

Now that you know how to include that chart in JS let’s see how to do it in ASP.NET MVC. For the purpose of our sample we are going to use Entity Framework and get the data from there. First you need a data base- we are going to use the AdventureWorks database and we are going to create a new model adding an ADO.NET Entity Data Model.When you choose the data base you are going to use mark the tables you need for your application and you are ready to use the data.

In HomeController.cs file add the following lines, they show you how to take the first 10 rows of the particular table. Of course we are making a razor application, so you can always use LINQ to manipulate the data base and extract the the needed information.

  1. public ActionResult Data()
  2. {
  3.     AdventureWorksEntities context = new AdventureWorksEntities();
  4.    
  5.     return View(context.Products.Take(10));
  6. }

There is one last step to perform before our control is ready and that is initializing the Doughnut Chart in our corresponding View file.

  1. @(Html.Infragistics().DoughnutChart()
  2.         .ID("Chart1")
  3.         .InnerExtent(30)
  4.         .Width("100%")
  5.         .Height("500px")    
  6.         .Series(s =>
  7.         {
  8.             s.Ring("Budget", Model.AsQueryable())
  9.                 .LabelMemberPath("Name")
  10.                 .ValueMemberPath("ReorderPoint");
  11. }).Render())

 

Shortly this is how you can add Doughnut Chart control to your application. Now it is up to you to customize it and make it unique and suitable for your needs.

Customizing the Chart

The options can be divided in two groups: options for the whole doughnut and options for the series.The first group contains options that control the behavior of all of the slices, while the second group allow you to  choose the slices color, labels, style and etc.

Doughnut options

There are two basic options that corresponds to the slices actions. The allowSliceExplotion option makes the slices able to pop out of their places when a user click on them and the allowSliceSelection option makes the slices selectable – meaning that when a user click on a particular slice it can change its style or trigger a client event. Both of those options are of Boolean type, so if you want to use them set their value to true. You should also initialize the sliceClick event if you want the mentioned properties to work.

  1. sliceClick: function (e, ui) {
  2.     ui.slice.isSelected = !ui.slice.isSelected;
  3.     ui.slice.isExploded = !ui.slice.isExploded;
  4. }

 

  1. allowSliceExplosion: true,
  2. allowSliceSelection: true

 

 

It is a doughnut chart so it has a “blank circle” for a center, but actually you can control the radius of that circle with the innerExtent option and make it as big as you want or loose it.

  1. innerExtent: 10

 

Series options

There are plenty of options by which you can manipulate the series. We are going to look at some of them, but you can find the whole list in the API documentation.  You can have as many slices for you chart as you need and it is useful if they all have different color – that  way you will be able to notice the distinction of their size easily. For that purpose you can use the brushes property. It defines the palette from which automatically assigned slice brushes are selected. The value provided should be an array of CSS color strings.

  1. brushes: ["#B284BE", "#5D8AA8", "#C9FFE5", "#7CB9E8", "#F19CBB", "#FAEBD7"]

 

Another handy option is the legend. You can specify a div element for it, but if none is found a new element will be created and inserted after the chart element. In our case we have a HTML tag for the legend.

  1. <table>
  2.     <tr>
  3.         <td>
  4.             <div id="chart">div>
  5.         td>
  6.         <td style="vertical-align: top;">
  7.             <table>
  8.                 <tr>
  9.                     <td>
  10.                         <div id="legend1">div>
  11.                     td>
  12.                 tr>
  13.                 <tr>
  14.                     <td>
  15.                         <div id="legend2">div>
  16.                     td>
  17.                 tr>
  18.             table>
  19.         td>
  20.         <td>
  21.             <div id="selectedItem">div>
  22.         td>
  23.     tr>
  24. table>

 

  1. series:
  2.     [
  3.         {
  4.              . . .
  5.             legend: { element: "legend1" },
  6.  
  7.         },
  8.         {
  9.             . . .
  10.             legend: { element: "legend2" }
  11.         }
  12.     ]

 

The other option we are going to pay attention to is the tool tip. Basically it displays a text when your mouse hover a particular slice. To activate that option set the showToolTip property to true, and then use the tooltipTemplate property to  specify which template to display. In our case the inner ring display the budget for each person and the outer ring displays the their savings.

  2. <script id="budgetTooltipTemplate" type="text/x-ig-tmpl">
  3.         
  4.             ${item.Label}, Budget: $${item.Budget}    
  5.         
  • script>
  •  
  • <script id="savingsTooltipTemplate" type="text/x-ig-tmpl">
  •         
  •             ${item.Label}, Saves: $${item.savings}    
  •         
  • script>

 

  1. series:
  2.     [
  3.         {
  4.             . . .
  5.             showTooltip: true,
  6.             tooltipTemplate: "budgetTooltipTemplate"
  7.         },
  8.         {
  9.             . . .
  10.             showTooltip: true,
  11.             tooltipTemplate: "savingsTooltipTemplate",
  12.  
  13.         }
  14.     ]

 

As we said you can select the slices and it is logical to be able to change their appearance when this action take place. So you can use the selectedStyle option to change their color.

  1. selectedStyle: { fill: "lightpink", stroke: "black" }

Ready to use

So customizing the chart allows you to make it unique and visualize your data in an attractive way. This Ignite UI control is original and provides an easy way to show categorical statistics expressed in percentages. With its multiple ring series layout you can show different data at the same time. You can find more about the Doughnut Chart and its features in the products page.

You can find the sample here or you can see the sample in JSFiddle.

 

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!