ComponentOne
Web API Explorer ASP.NET Web API Explorer
Wijmo5Sunburst

Overview

Overview

Features

Settings

Export
Export Format :
Height :
Width :
Export Name :

Description

This sample demonstrates how to export a Wijmo 5 Sunburst 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 Wijmo5SunburstController : 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>
                {
                    {"DataLabel.Position", PieLabelPosition.Center}
                }
            };

            return View();
        }

        private static IDictionary<string, object[]> CreateSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"InnerRadius", new object[] {0, 0.25, 0.5, 0.75}},
                {"Offset", new object[] {0, 0.1, 0.2, 0.3, 0.4, 0.5}},
                {"StartAngle", new object[] {0, 90, 180, -90}},
                {"Reversed", new object[] {false, true}},
                {"Palette", new object[] {"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"DataLabel.Position", Enum.GetValues(typeof(PieLabelPosition)).Cast<object>().ToArray()},
                {"DataLabel.Border", new object[] {false, true}},
            };
            return settings;
        }
    }
}
@{
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}

<div id="@(optionsModel.ControlId)"></div>
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
    <script>
        function convertPalette(value) {
            return wijmo.chart.Palettes[value];
        }
    </script>
}
<script>
    // create controls
    var data = [],
        chart = new wijmo.chart.hierarchical.Sunburst('#@(optionsModel.ControlId)'),
        times = [['Jan', 'Feb', 'Mar'], ['Apr', 'May', 'June'], ['Jul', 'Aug', 'Sep'], ['Oct', 'Nov', 'Dec']],
        years = [], year = new Date().getFullYear(), yearLen, i;

    yearLen = Math.max(Math.round(Math.abs(5 - Math.random() * 10)), 3);
    for (i = yearLen; i > 0; i--) {
        years.push(year - i);
    }

    // populate itemsSource
    for (y = 0; y < years.length; y++) {
        var addQuarter = Math.random() > 0.5;
        if (addQuarter) {
            for (q = 0; q < times.length; q++) {
                var addMonth = Math.random() > 0.5,
                    quar = 'Q' + (q + 1);
                if (addMonth) {
                    for (m = 0; m < times[q].length; m++) {
                        data.push({
                            year: years[y].toString(),
                            quarter: quar,
                            month: times[q][m],
                            value: Math.round(Math.random() * 100)
                        });
                    };
                } else {
                    data.push({
                        year: years[y].toString(),
                        quarter: quar,
                        value: Math.round(Math.random() * 400)
                    });
                }
            };
        } else {
            data.push({
                year: years[y].toString(),
                value: Math.round(Math.random() * 1200)
            });
        }
    };
    // initialize Sunburst's properties
    chart.beginUpdate();
    chart.binding = 'value';
    chart.bindingName = ['year', 'quarter', 'month'];
    chart.itemsSource = data;
    chart.dataLabel.position = wijmo.chart.PieLabelPosition.Center;
    chart.dataLabel.content = '{name}';
    chart.endUpdate();
</script>

@section Description{
    @Html.Raw(Resources.Wijmo5Sunburst.Index_Text0)
}