TreeMap
TreeMap
Overview
Features
Sample
Settings
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.
Source
IndexController.cs
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;
}
}
}
Index.cshtml
@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>
}
Documentation