ComponentOne
Web API Explorer ASP.NET Web API Explorer
MVCTreeMap

MVCTreeMap

Overview

This sample demonstrates how to export a MVC TreeMap to image file.

Features

Overview
CameraHeadp..Wearable ..Cell Phon..ElectronicsChildre..Roman..Arts & Ph..HistorySci-Fi..Myste..BooksRockJazzCountryElectronicClas..Soun..MusicMovieTVVideoTabletsDeskt..Lap..Computers ..

Settings

Export
Export Format : Height :
Width :
Export Name :

Description

This sample demonstrates how to export a MVC TreeMap to image file.
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
using C1.Web.Mvc.Chart;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using WebApiExplorer.Models;
 
namespace WebApiExplorer.Controllers
{
    public partial class MVCTreeMapController : Controller
    {
        private readonly ImageExportOptions _imageExportOptions = new ImageExportOptions
        {
            Exporter = "wijmo.chart.ImageExporter"
        };
 
        public ActionResult Index()
        {
            ViewBag.Options = _imageExportOptions;
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = CreateSettings(),
                DefaultValues = new Dictionary<string, object>
                {
                    {"Type", "Squarified"},
                    {"MaxDepth", 2}
                }
            };
 
            return View(ThingSale.GetDate());
        }
 
        private static IDictionary<string, object[]> CreateSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"Type", new object[]{"Squarified", "Horizontal", "Vertical"}},
                {"MaxDepth", new object[]{ 0, 1, 2, 3, 4}},
            };
            return settings;
        }
    }
}
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
@model IEnumerable<ThingSale>
@{
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
<style>
    #breadCrumbs {
        padding: 5px 10px;
        margin-bottom: 20px;
        list-style: none;
        background-color: #ffffff;
        border-radius: 4px;
    }
 
        #breadCrumbs > li {
            display: inline-block;
        }
 
            #breadCrumbs > li + li:before {
                padding: 0 5px;
                color: #ccc;
                content: "/\00a0";
            }
 
        #breadCrumbs > .active {
            color: #999;
        }
</style>
 
<script type="text/javascript">
    var breadCrumbs = [];
    var currentItem;
    var treemap;
 
    function onRendered() {
        if (!treemap) {
            treemap = wijmo.Control.getControl('#@settings.ControlId');
        }
 
        if (treemap) {
            if (currentItem === treemap._currentItem) {
                return;
            }
            currentItem = treemap._currentItem;
            createBreadCrumbs();
        }
    }
 
    function rollUp(num) {
        //rollup treemap *num times.
        for (var i = 0; i < num; i++) {
            treemap._rollUp();
        }
    }
 
    function createBreadCrumbs() {
        breadCrumbs = [];
        resetBreadCrumbs(currentItem);
        breadCrumbs.reverse();
        appendBreadCrumbs();
    }
 
    function appendBreadCrumbs() {
        var ol = document.querySelector('#breadCrumbs');
        ol.innerHTML = '';
        var len = breadCrumbs.length;
        breadCrumbs.forEach(function (label, idx) {
            ol.appendChild(apendBreadCrumb(label, idx !== len - 1, len - idx - 1));
        });
    }
 
    function apendBreadCrumb(label, isAnchor, param) {
        var li = document.createElement('li');
        if (isAnchor) {
            li.className = 'breakcrumb-item';
            var a = document.createElement('a');
            a.href = 'javascript:void(0)';
            a.innerHTML = label;
            a.addEventListener('click', function (evt) {
                rollUp(param);
            });
            li.appendChild(a);
        } else {
            li.className = 'breakcrumb-item active';
            li.innerHTML = label;
        }
        return li;
    }
 
    function resetBreadCrumbs(item) {
        if (item) {
            breadCrumbs.push(item.label);
            resetBreadCrumbs(item.parent);
        } else {
            breadCrumbs.push('Root');
        }
    }
</script>
 
<ol id="breadCrumbs"></ol>
@(Html.C1().TreeMap().Id(settings.ControlId)
    .Binding("Sales")
    .BindingName("Category")
    .ChildItemsPath("Items")
    .Bind(Model)
    .MaxDepth((int)settings.DefaultValues["MaxDepth"])
    .DataLabel(dlb => dlb.Position(C1.Web.Mvc.Chart.LabelPosition.Center).Content("{name}"))
    .OnClientRendered("onRendered"))
 
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
 
@section Description{
    @Html.Raw(Resources.MVCTreeMap.Index_Text0)
}