Sunburst
Sunburst
Selection
The Sunburst chart control allows you to select data points by clicking or touching a sunburst slice.
Features
Settings
Selection Mode: None
Selected Item Position: None
Selected Item Offset: 0
Is Animated: False
Description
The Sunburst chart control allows you to select data points by clicking or touching a sunburst slice. Use the SelectionMode property to specify whether you want to allow selection by data point or no selection at all (default).
Setting the SelectionMode property to Point causes the Sunburst to update the Selection property when the user clicks on a sunburst slice, and to apply the "wj-state-selected" class to the selected element. Setting the Sunburst's SelectionMode property to Series or None will disable selections within the control.
The Sunburst chart offers three additional properties to customize the selection:
- SelectedItemOffset: Specifies the offset of the selected sunburst slice from the center of the control.
- SelectedItemPosition: Specifies the position of the selected sunburst slice. The available options are Top, Bottom, Left, Right, and None (default).
- IsAnimated: Determines whether or not to animate the selection.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | using System;using System.Collections.Generic;using System.Web.Mvc;using C1.Web.Mvc.Chart;using MvcExplorer.Models;using System.Linq;namespace MvcExplorer.Controllers{ public partial class SunburstController : Controller { public ActionResult Selection() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"SelectionMode", Enum.GetValues(typeof(SelectionMode)).Cast<object>().ToArray()}, {"SelectedItemPosition", Enum.GetValues(typeof(Position)).Cast<object>().ToArray()}, {"SelectedItemOffset", new object[] {0, 0.1, 0.2, 0.3, 0.4, 0.5}}, {"IsAnimated", new object[] {false, true}} } }; return View(_data); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | @using C1.Web.Mvc.Chart@model IEnumerable<HierarchicalData>@{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;}@(Html.C1().Sunburst<HierarchicalData>() .Id(demoSettingsModel.ControlId) .Bind("Year", "Value", Model) .DataLabel(dl => dl.Content("{name}").Position(PieLabelPosition.Center)) .BindingName("Year, Quarter, Month"))@section Description{ <p>@Html.Raw(Resources.Sunburst.Selection_Text0)</p> <p>@Html.Raw(Resources.Sunburst.Selection_Text1)</p> <p>@Html.Raw(Resources.Sunburst.Selection_Text2)</p> <ul> <li>@Html.Raw(Resources.Sunburst.Selection_Li1)</li> <li>@Html.Raw(Resources.Sunburst.Selection_Li2)</li> <li>@Html.Raw(Resources.Sunburst.Selection_Li3)</li> </ul>} |