TreeMap
TreeMap
Overview
This view shows the basic features of TreeMap.
Features
Settings
Type: Squarified
Description
This view shows the basic features of TreeMap. It binds the chart to a data model.
If you move the mouse over a chart element, a tooltip will appear showing details about the data point.
The TreeMap chart control allows you to customize its layout and appearance by using the Type property.
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 29 | using MvcExplorer.Models;using System.Collections.Generic;using System.Web.Mvc;namespace MvcExplorer.Controllers{ public partial class TreeMapController : Controller { // GET: Index public ActionResult Index() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = CreateIndexSettings() }; return View(FoodSale.GetDate()); } private static IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"Type", new object[]{ "Squarified", "Horizontal", "Vertical"}} }; return settings; } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @model IEnumerable<FoodSale>@{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;}@(Html.C1().TreeMap().Id(demoSettingsModel.ControlId) .Binding("Sales") .BindingName("Category", "SubCategory") .Bind(Model) .Tooltip(t=>t.Content("<b>{name}</b><br />{value:c}")) .DataLabel(dlb => dlb.Position(C1.Web.Mvc.Chart.LabelPosition.Center).Content("{name}")))@section Description{ <p>@Html.Raw(Resources.TreeMap.Index_Text0)</p> <p>@Html.Raw(Resources.TreeMap.Index_Text1)</p> <p>@Html.Raw(Resources.TreeMap.Index_Text2)</p>} |