FlexChart

FlexChart

Overview

Introduction This view shows the FlexChart's basic features by using c1-flex-chart tag.

Features

Settings

Description

Introduction

This view shows the FlexChart's basic features by using c1-flex-chart tag. It binds the chart to a Model and allows you to select the chart type, series stacking, and 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 with an IEnumerable DataSource. by setting source-collection attribute of c1-items-source sub-tag to Model.
Set binding-x attribute 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 c1-flex-chart-series sub-tags and set their binding attribute 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 MvcExplorer.Models; 
using System.Collections.Generic; 
using Microsoft.AspNetCore.Mvc; 
using C1.Web.Mvc.Chart; 
  
namespace MvcExplorer.Controllers 
{ 
    public partial class FlexChartController: Controller 
    { 
        public ActionResult Index() 
        { 
            var settings = new ClientSettingsModel 
            { 
                Settings = CreateIndexSettings(), 
                DefaultValues = GetIndexDefaultValues() 
            }; 
            settings.LoadRequestData(Request); 
            ViewBag.DemoSettingsModel = settings; 
            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} 
                    } 
                } 
            }; 
        } 
    } 
} 

@{ 
    ViewBag.DemoSettings = true; 
    ClientSettingsModel demoSettingModel = ViewBag.DemoSettingsModel; 
    var chartType = demoSettingModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Column); 
    var orientationType = demoSettingModel.GetEnum("LegendOrientation", C1.Web.Mvc.Chart.LegendOrientation.Auto); 
    var stacking = demoSettingModel.GetEnum("Stacking", C1.Web.Mvc.Chart.Stacking.None, (content) => 
    { 
        return string.Equals(content, "Stacked 100%", StringComparison.OrdinalIgnoreCase) 
            ? "Stacked100pc"
            : content; 
    }); 
    var rotated = demoSettingModel.GetBool("Rotated", false); 
    object[] palettesModel = ViewBag.Palettes; 
} 
  
  
<c1-flex-chart id="@demoSettingModel.ControlId" binding-x="Name"
               chart-type="@chartType" stacking="@stacking" rotated="@rotated" palette="C1.Web.Mvc.Chart.Palettes.Standard"
               legend-position="Bottom" legend-orientation="@orientationType"> 
    <c1-flex-chart-tooltip></c1-flex-chart-tooltip> 
    <c1-items-source source-collection="Model"></c1-items-source> 
    <c1-flex-chart-series binding="MarPrice" name="March"> 
    </c1-flex-chart-series> 
    <c1-flex-chart-series binding="AprPrice" name="April"> 
    </c1-flex-chart-series> 
    <c1-flex-chart-series binding="MayPrice" name="May"> 
    </c1-flex-chart-series> 
</c1-flex-chart> 
  
@section Scripts{ 
    <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 }; 
        }; 
        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 flexChart = wijmo.Control.getControl("#@demoSettingModel.ControlId") 
                if (flexChart) { 
                    flexChart.palette = sender.selectedItem.Value; 
                    flexChart.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{ 
    <c1-menu id="paletteMenu" header="Palette: <b>Standard</b>" show-drop-down-button="true"  sub-items-path="Items" item-clicked="itemPaletteClicked"> 
        <c1-items-source source-collection="@palettesModel"></c1-items-source> 
    </c1-menu> 
} 
  
@section Description{ 
    <h3> 
        @Html.Raw(FlexChartRes.Index_Introduction) 
    </h3> 
    <p>@Html.Raw(FlexChartRes.Index_Text0)</p> 
    <p>@Html.Raw(FlexChartRes.Index_Text1)</p> 
    <p>@Html.Raw(FlexChartRes.Index_Text2)</p> 
    <ol> 
        <li>@Html.Raw(FlexChartRes.Index_Li1)</li> 
        <li>@Html.Raw(FlexChartRes.Index_Li2)</li> 
        <li>@Html.Raw(FlexChartRes.Index_Li3)</li> 
    </ol> 
    <p>@Html.Raw(FlexChartRes.Index_Text3)</p> 
    <p>@Html.Raw(FlexChartRes.Index_Text4)</p> 
}

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Overview

Features

Settings

Description

Introduction