ComponentOne
Web API Explorer ASP.NET Web API Explorer
MVCTreeMap

MVCTreeMap

Overview

Features

Settings

Export
Export Format :
Height :
Width :
Export Name :

Description

This sample demonstrates how to export a MVC TreeMap to image file.
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;
        }
    }
}
@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)
}