Wijmo5TreeMap
Wijmo5TreeMap
Overview
Features
Settings
Export
Export Format :
Height :
Width :
Export Name :
Description
This sample demonstrates how to export a Wijmo 5 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 Wijmo5TreeMapController : 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(); } 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; } } }
@{ 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> <ol id="breadCrumbs"></ol> <div id="@(optionsModel.ControlId)" ></div> @section Settings{ @Html.Partial("_ImageExportOptions", optionsModel) } <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> <script> // create controls var chart = new wijmo.chart.hierarchical.TreeMap('#@(optionsModel.ControlId)'); // initialize TreeMap's properties chart.beginUpdate(); chart.maxDepth = 2; chart.binding = 'sales'; chart.bindingName = 'type'; chart.childItemsPath = 'items'; chart.itemsSource = getMaxDepthData(); chart.dataLabel.position = wijmo.chart.LabelPosition.Center; chart.dataLabel.content = '{name}'; chart.rendered.addHandler(onRendered); chart.endUpdate(); function rand() { return Math.round(Math.random() * 100) }; function getMaxDepthData() { var data = [{ type: 'Music', items: [{ type: 'Country', items: [{ type: 'Classic Country', sales: rand() }, { type: 'Cowboy Country', sales: rand() }, { type: 'Outlaw Country', sales: rand() }, { type: 'Western Swing', sales: rand() }, { type: 'Roadhouse Country', sales: rand() }] }, { type: 'Rock', items: [{ type: 'Hard Rock', sales: rand() }, { type: 'Blues Rock', sales: rand() }, { type: 'Funk Rock', sales: rand() }, { type: 'Rap Rock', sales: rand() }, { type: 'Guitar Rock', sales: rand() }, { type: 'Progressive Rock', sales: rand() }] }, { type: 'Classical', items: [{ type: 'Symphonies', sales: rand() }, { type: 'Chamber Music', sales: rand() }] }, { type: 'Soundtracks', items: [{ type: 'Movie Soundtracks', sales: rand() }, { type: 'Musical Soundtracks', sales: rand() }] }, { type: 'Jazz', items: [{ type: 'Smooth Jazz', sales: rand() }, { type: 'Vocal Jazz', sales: rand() }, { type: 'Jazz Fusion', sales: rand() }, { type: 'Swing Jazz', sales: rand() }, { type: 'Cool Jazz', sales: rand() }, { type: 'Traditional Jazz', sales: rand() }] }, { type: 'Electronic', items: [{ type: 'Electronica', sales: rand() }, { type: 'Disco', sales: rand() }, { type: 'House', sales: rand() }] }] }, { type: 'Video', items: [{ type: 'Movie', items: [{ type: 'Kid & Family', sales: rand() }, { type: 'Action & Adventure', sales: rand() }, { type: 'Animation', sales: rand() }, { type: 'Comedy', sales: rand() }, { type: 'Drama', sales: rand() }, { type: 'Romance', sales: rand() }] }, { type: 'TV', items: [{ type: 'Science Fiction', sales: rand() }, { type: 'Documentary', sales: rand() }, { type: 'Fantasy', sales: rand() }, { type: 'Military & War', sales: rand() }, { type: 'Horror', sales: rand() }] }] }, { type: 'Books', items: [{ type: 'Arts & Photography', items: [{ type: 'Architecture', sales: rand() }, { type: 'Graphic Design', sales: rand() }, { type: 'Drawing', sales: rand() }, { type: 'Photography', sales: rand() }, { type: 'Performing Arts', sales: rand() }] }, { type: "Children's Books", items: [{ type: 'Beginning Readers', sales: rand() }, { type: 'Board Books', sales: rand() }, { type: 'Chapter Books', sales: rand() }, { type: 'Coloring Books', sales: rand() }, { type: 'Picture Books', sales: rand() }, { type: 'Sound Books', sales: rand() }] }, { type: 'History', items: [{ type: 'Ancient', sales: rand() }, { type: 'Medieval', sales: rand() }, { type: 'Renaissance', sales: rand() }] }, { type: 'Mystery', items: [{ type: 'Mystery', sales: rand() }, { type: 'Thriller & Suspense', sales: rand() }] }, { type: 'Romance', items: [{ type: 'Action & Adventure', sales: rand() }, { type: 'Holidays', sales: rand() }, { type: 'Romantic Comedy', sales: rand() }, { type: 'Romantic Suspense', sales: rand() }, { type: 'Western', sales: rand() }, { type: 'Historical', sales: rand() }] }, { type: 'Sci-Fi & Fantasy', items: [{ type: 'Fantasy', sales: rand() }, { type: 'Gaming', sales: rand() }, { type: 'Science Fiction', sales: rand() }] }] }, { type: 'Electronics', items: [{ type: 'Camera', items: [{ type: 'Digital Cameras', sales: rand() }, { type: 'Film Photography', sales: rand() }, { type: 'Lenses', sales: rand() }, { type: 'Video', sales: rand() }, { type: 'Accessories', sales: rand() }] }, { type: 'Headphones', items: [{ type: 'Earbud headphones', sales: rand() }, { type: 'Over-ear headphones', sales: rand() }, { type: 'On-ear headphones', sales: rand() }, { type: 'Bluetooth headphones', sales: rand() }, { type: 'Noise-cancelling headphones', sales: rand() }, { type: 'Audiophile headphones', sales: rand() }] }, { type: 'Cell Phones', items: [{ type: 'Cell Phones', sales: rand() }, { type: 'Accessories', items: [{ type: 'Batteries', sales: rand() }, { type: 'Bluetooth Headsets', sales: rand() }, { type: 'Bluetooth Speakers', sales: rand() }, { type: 'Chargers', sales: rand() }, { type: 'Screen Protectors', sales: rand() }] }] }, { type: 'Wearable Technology', items: [{ type: 'Activity Trackers', sales: rand() }, { type: 'Smart Watches', sales: rand() }, { type: 'Sports & GPS Watches', sales: rand() }, { type: 'Virtual Reality Headsets', sales: rand() }, { type: 'Wearable Cameras', sales: rand() }, { type: 'Smart Glasses', sales: rand() }] }] }, { type: 'Computers & Tablets', items: [{ type: 'Desktops', items: [{ type: 'All-in-ones', sales: rand() }, { type: 'Minis', sales: rand() }, { type: 'Towers', sales: rand() }] }, { type: 'Laptops', items: [{ type: '2 in 1 laptops', sales: rand() }, { type: 'Traditional laptops', sales: rand() }] }, { type: 'Tablets', items: [{ type: 'iOS', sales: rand() }, { type: 'Andriod', sales: rand() }, { type: 'Fire os', sales: rand() }, { type: 'Windows', sales: rand() }] }] }]; return data; } </script> @section Description{ @Html.Raw(Resources.Wijmo5TreeMap.Index_Text0) }