ASP.NET MVC Controls - FlexChart - Overview- C1 ASP.NET MVC

FlexChart

Overview

This view shows basic features of the FlexChart control.

Features

Settings

Description

This view shows basic features of the FlexChart control. It binds the chart to a Model and allows you to select the chart type, the series stacking, and the rotation.

If you move the mouse over a chart element, a tooltip will appear showing details about the data point.

The simplest way to use the FlexChart is to:

Bind the FlexChart to an IEnumerable DataSource.
Set the BindingX property of the chart to the name of the property that contains the X values (in this example fruit names), and it will map the field of chart's ItemsSource.
Add one or more Series objects to the chart's Series array and set their Binding property to the name of the property that contains the Y values (in this example the months of March, April, and May).

Uses LegendOrientation to determine the orientation of the legend.

Uses Legend.MaxSize to Gets or sets the maximum legend size (width for left or right position and height for top or bottom position). The size can be specified in pixels: MaxSize = '100px' or percents: MaxSize = '50%'.

IndexController.cs Index.cshtml

using System.Collections.Generic;
using System.Web.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc.Chart;
 
namespace MvcExplorer.Controllers
{
    public partial class FlexChartController : Controller
    {
        public ActionResult Index()
        {
            var data = new ClientSettingsModel
            {
                Settings = CreateIndexSettings(),
                DefaultValues = GetIndexDefaultValues()
            };
            data.LoadRequestData(Request);
            ViewBag.DemoSettingsModel = data;
            ViewBag.Palettes = GetPalettes();
 
            return View(Fruit.GetFruitsSales());
        }
 
        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}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"LegendOrientation", new object[]{ "Auto", "Vertical", "Horizontal"}},
                {"TooltipPosition", new object[]{
                        "Above",
                        "AboveRight",
                        "RightTop",
                        "Right",
                        "RightBottom",
                        "BelowRight",
                        "Below",
                        "BelowLeft",
                        "LeftBottom",
                        "Left",
                        "LeftTop",
                        "AboveLeft"
                    }},
                {"MaxSize", new object[] {"50px", "10%", "100%", "20px", "0.5%", "50%", "100px" } }
            };
 
            return settings;
        }
 
        private static IDictionary<string, object> GetIndexDefaultValues()
        {
            var defaultValues = new Dictionary<string, object>
            {
                {"GroupWidth", "70%"}
            };
 
            return defaultValues;
        }
 
        private object[] GetPalettes()
        {
            return  new object[] {
                new {Header = "Standard", Value = Palettes.Standard},
                new {Header = "Cocoa", Value = Palettes.Cocoa},
                new {Header = "Coral", Value = Palettes.Coral},
                new {Header = "Dark", Value = Palettes.Dark},
                new {Header = "Highcontrast", Value = Palettes.Highcontrast},
                new {Header = "Light", Value = Palettes.Light},
                new {Header = "Midnight", Value = Palettes.Midnight},
                new {Header = "Minimal", Value = Palettes.Minimal},
                new {Header = "Modern", Value = Palettes.Modern },
                new {Header = "Organic", Value = Palettes.Organic },
                new {Header = "Slate", Value = Palettes.Slate },
                new {
                    Header = "Qualitative",
                    Items = new object[]
                    {
                        new {Header = "Accent", GroupName = "Qualitative", Value = Palettes.Qualitative.Accent},
                        new {Header = "Dark2", GroupName = "Qualitative", Value = Palettes.Qualitative.Dark2},
                        new {Header = "Paired", GroupName = "Qualitative", Value = Palettes.Qualitative.Paired},
                        new {Header = "Pastel1", GroupName = "Qualitative", Value = Palettes.Qualitative.Pastel1},
                        new {Header = "Pastel2", GroupName = "Qualitative", Value = Palettes.Qualitative.Pastel2},
                        new {Header = "Set1", GroupName = "Qualitative", Value = Palettes.Qualitative.Set1},
                        new {Header = "Set2", GroupName = "Qualitative", Value = Palettes.Qualitative.Set2},
                        new {Header = "Set3", GroupName = "Qualitative", Value = Palettes.Qualitative.Set3},
                    }
                },
                new {
                    Header = "Diverging",
                    Items = new object[]
                    {
                        new {Header = "BrBG", GroupName = "Diverging", Value = Palettes.Diverging.BrBG},
                        new {Header = "PiYG", GroupName = "Diverging", Value = Palettes.Diverging.PiYG},
                        new {Header = "PRGn", GroupName = "Diverging", Value = Palettes.Diverging.PRGn},
                        new {Header = "PuOr", GroupName = "Diverging", Value = Palettes.Diverging.PuOr},
                        new {Header = "RdBu", GroupName = "Diverging", Value = Palettes.Diverging.RdBu},
                        new {Header = "RdGy", GroupName = "Diverging", Value = Palettes.Diverging.RdGy},
                        new {Header = "RdYlBu", GroupName = "Diverging", Value = Palettes.Diverging.RdYlBu},
                        new {Header = "RdYlGn", GroupName = "Diverging", Value = Palettes.Diverging.RdYlGn},
                        new {Header = "Spectral",GroupName = "Diverging", Value = Palettes.Diverging.Spectral},
                    }
                },
                new {
                    Header = "SequentialSingle",
                    Items = new object[]
                    {
                        new {Header = "Blues", GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Blues},
                        new {Header = "Greens",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Greens},
                        new {Header = "Greys",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Greys},
                        new {Header = "Oranges",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Oranges},
                        new {Header = "Purples", GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Purples},
                        new {Header = "Reds",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Reds},
                    }
                },
                new {
                    Header = "SequentialMulti",
                    Items = new object[]
                    {
                        new { Header = "BuGn", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.BuGn},
                        new {Header = "BuPu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.BuPu},
                        new {Header = "GnBu",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.GnBu},
                        new {Header = "OrRd", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.OrRd},
                        new {Header = "PuBu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuBu},
                        new {Header = "PuBuGn", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuBuGn},
                        new {Header = "PuRd", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuRd},
                        new {Header = "RdPu",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.RdPu},
                        new {Header = "YlGn",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlGn},
                        new {Header = "YlGnBu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlGnBu},
                        new {Header = "YlOrBr",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlOrBr},
                        new {Header = "YlOrRd",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlOrRd}
                    }
                }
            };
        }
    }
}

@model IEnumerable<Fruit>
 
@{
    ViewBag.DemoSettings = true;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
    object[] palettesModel = ViewBag.Palettes;
}
 
@functions{
    public C1.Web.Mvc.Chart.Stacking GetStacking(ClientSettingsModel settings)
    {
        return settings.GetEnum("Stacking", C1.Web.Mvc.Chart.Stacking.None, (stacking) =>
        {
            return string.Equals(stacking, "Stacked 100%", StringComparison.OrdinalIgnoreCase)
                ? "Stacked100pc"
                : stacking;
        });
    }
}
 
<div id="flexChart"></div>
@(Html.C1().FlexChart().Id(demoSettingsModel.ControlId)
    .ChartType(demoSettingsModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Column))
    .Stacking(GetStacking(demoSettingsModel))
    .Rotated(demoSettingsModel.GetBool("Rotated", false))
    .Bind(Model).BindingX("Name").Series(sers =>
    {
        sers.Add().Binding("MarPrice").Name("March");
        sers.Add().Binding("AprPrice").Name("April");
        sers.Add().Binding("MayPrice").Name("May");
    })
    .Legend(C1.Web.Mvc.Chart.Position.Bottom)
    .Legend(demoSettingsModel.GetEnum("LegendOrientation", C1.Web.Mvc.Chart.LegendOrientation.Auto))
    .Palette(C1.Web.Mvc.Chart.Palettes.Standard)
)
 
@section Scripts{
    <script type="text/javascript">
 
    convertStacking = function (value) {
        return value === "Stacked 100%" ? "Stacked100pc" : value;
    };
 
    updateGroupWidth = function (control, value) {
        control.options = { groupWidth: value === "50 pixels" ? 50 : value };
    };
    customChangeLegendOrientation = function (control, value) {
        control.legend.orientation = value;
    };
    function customChangeTooltipPosition(control, value) {
        control.tooltip.position = value;
    }
    function customChangeMaxSize(control, value) {
        control.legend.maxSize = value;
    }
 
    function itemPaletteClicked(sender) {
        if (sender.selectedItem) {
            let flexPie = wijmo.Control.getControl("#@(demoSettingsModel.ControlId)")
            if (flexPie) {
                flexPie.palette = sender.selectedItem.Value;
                flexPie.invalidate();
            }
            let menu = wijmo.Control.getControl("#paletteMenu");
            if (sender.selectedItem.GroupName && sender.selectedItem.GroupName.length) {
                menu.header = "Palette: <b>" + sender.selectedItem.GroupName + "." + sender.selectedItem.Header+ "<b/>";
            }
            else {
                menu.header = "Palette: <b>" + sender.selectedItem.Header + "<b/>";
            }
            sender.invalidate();
        }
    }
    </script>
}
 
@section Settings{
    @(Html.C1().Menu().Id("paletteMenu").Bind(palettesModel)
        .Header("Palette: <b>Standard</b>")
        .ShowDropDownButton(true)
        .CloseOnLeave(true)
        .SubItemsPath("Items")
        .OnClientItemClicked("itemPaletteClicked")
    )
}
 
@section Description{
 
    <p>@Html.Raw(Resources.FlexChart.Index_Text0)</p>
    <p>@Html.Raw(Resources.FlexChart.Index_Text1)</p>
    <p>@Html.Raw(Resources.FlexChart.Index_Text2)</p>
    <ol>
        <li>@Html.Raw(Resources.FlexChart.Index_Li1)</li>
        <li>@Html.Raw(Resources.FlexChart.Index_Li2)</li>
        <li>@Html.Raw(Resources.FlexChart.Index_Li3)</li>
    </ol>
    <p>@Html.Raw(Resources.FlexChart.Index_Text3)</p>
    <p>@Html.Raw(Resources.FlexChart.Index_Text4)</p>
}

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Scheduling >

Documents >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Scheduling

Documents

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

FlexChart

Overview

Features

Settings

Description