MVCFlexChart

Overview

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

Features

Sample
Source
Documentation

Settings

Export

Export Format : Height :

Width :

Export Name :

Description

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

IndexController.cs
Index.cshtml

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApiExplorer.Models;
 
namespace WebApiExplorer.Controllers
{
    public partial class MVCFlexChartController : Controller
    {
        private readonly ImageExportOptions _flexChartModel = new ImageExportOptions
        {
            Exporter = "wijmo.chart.ImageExporter"
        };
 
        private static IDictionary<string, object[]> CreateIndexSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false, true}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}
            };
            return settings;
        }
 
        private static IDictionary<string, object> GetIndexDefaultValues()
        {
            var defaultValues = new Dictionary<string, object>
            {
                {"GroupWidth", "70%"}
            };
 
            return defaultValues;
        }
 
        public ActionResult Index()
        {
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = CreateIndexSettings(),
                DefaultValues = GetIndexDefaultValues()
            };
 
            ViewBag.Options = _flexChartModel;
            return View(Fruit.GetFruitsSales());
        }
 
    }
}

@model IEnumerable<Fruit>
@{
    ViewBag.DemoSettings = true;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
    ImageExportOptions optionsModel = ViewBag.Options;
}
 
@(Html.C1().FlexChart().Id(optionsModel.ControlId)
    .Bind(Model).BindingX("Name").Series(sers =>
    {
        sers.Add().Binding("MarPrice").Name("March");
        sers.Add().Binding("AprPrice").Name("April");
        sers.Add().Binding("MayPrice").Name("May");
    })
)
 
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
 
<script type="text/javascript">
    convertStacking = function (value) {
        return value === "Stacked 100%" ? "Stacked100pc" : value;
    };
    convertPalette = function (value) {
        return wijmo.chart.Palettes[value];
    };
    updateGroupWidth = function (control, value) {
        control.options = { groupWidth: value === "50 pixels" ? 50 : value };
 
    };
</script>
 
@section Description{
    @Html.Raw(Resources.MVCFlexChart.Index_Text0)
}