Available in the Full Version
Doughnut Chart - Bind to Collection
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
|
Departments
Budget vs Spending
|
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This is an example of rendering the igDoughnutChart using the ASP.NET MVC helper. The helper binds to a
collection of objects on the server and serializes the collection to JSON objects and renders the required igDoughnutChart HTML and JavaScript.
Code View
Copy to Clipboard
@using Infragistics.Web.Mvc
@model IgniteUI.SamplesBrowser.Models.Financial.FinancialDataCollection
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
<script type="text/javascript">
function doughnutSliceClick(e, ui) {
ui.slice.isSelected = !ui.slice.isSelected;
}
</script>
<script id="budgetTooltipTemplate" type="text/x-ig-tmpl">
<div style="padding: 5px">
<span id="tooltipValue" style="font-family: Arial; font-size: 12px;">${item.Label} <br> Budget: <b>$${item.Budget}K</b></span>
</div>
</script>
<script id="spendingTooltipTemplate" type="text/x-ig-tmpl">
<div style="padding: 5px">
<span id="tooltipValue" style="font-family: Arial; font-size: 12px;">${item.Label} <br> Spending: <b>$${item.Spending}K</b></span>
</div>
</script>
</head>
<body>
<table>
<tr>
<td style="width: 550px;">
<div style="text-align: center; width: 100%; font:16px Arial, Helvetica, sans-serif;">Departments</div>
<div style="text-align: center; width: 100%; margin: 10px 0; font:12px Arial, Helvetica, sans-serif;">Budget vs Spending</div>
@(Html.Infragistics().DoughnutChart()
.ID("MyDoughnutChart")
.InnerExtent(30)
.Width("100%")
.Height("500px")
.AllowSliceSelection(true)
.AddClientEvent(DoughnutChartClientEvents.SliceClick, "doughnutSliceClick")
.Series(s =>
{
s.Ring("Budget", Model.AsQueryable())
.LabelMemberPath(o => o.Label)
.ValueMemberPath(o => o.Budget)
.LabelsPosition(LabelsPosition.Center)
.TooltipTemplate("budgetTooltipTemplate")
.ShowTooltip(true)
.SelectedStyle(selStyle => selStyle.Fill("#9f725f").Stroke("#745345"))
.Legend(lg => lg.LegendType(LegendType.Item).Width("150px").ID("legend"));
s.Ring("Spending", Model.AsQueryable())
.LabelMemberPath(o => o.Label)
.ValueMemberPath(o => o.Spending)
.TooltipTemplate("spendingTooltipTemplate")
.ShowTooltip(true)
.LabelsPosition(LabelsPosition.Center)
.SelectedStyle(selStyle => selStyle.Fill("#9f725f").Stroke("#745345"));
}).Render())
</td>
<td style="vertical-align: top;">
<div id="legend"></div>
</td>
</tr>
</table>
</body>
</html>
using System.Web.Mvc;
using IgniteUI.SamplesBrowser.Models.Financial;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class DoughnutChartController : Controller
{
[ActionName("bind-to-collection")]
public ActionResult BindCollection()
{
var invoices = new FinancialDataCollection();
return View("bind-to-collection", invoices);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace IgniteUI.SamplesBrowser.Models.Financial
{
public class FinancialDataCollection : List<FinancialDataPoint>
{
public FinancialDataCollection()
{
this.Add(new FinancialDataPoint { Spending = 20, Budget = 60, Label = "Administration", });
this.Add(new FinancialDataPoint { Spending = 80, Budget = 40, Label = "Sales", });
this.Add(new FinancialDataPoint { Spending = 80, Budget = 40, Label = "Marketing", });
this.Add(new FinancialDataPoint { Spending = 20, Budget = 60, Label = "Development", });
this.Add(new FinancialDataPoint { Spending = 60, Budget = 20, Label = "Customer Support", });
this.Add(new FinancialDataPoint { Spending = 20, Budget = 60, Label = "IT", });
}
}
public class FinancialDataPoint
{
public string Label { get; set; }
public double Spending { get; set; }
public double Budget { get; set; }
public string ToolTip { get { return String.Format("{0}, Spending {1}, Budget {2}", Label, Spending, Budget); } }
}
}