@model FlexChartModel

@{
    ViewBag.Title = "ASP.NET Core MVC C1 FlexChart Introduction";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var tooTipContent = "<img src='" + @Url.Content("~/images/{x}.png") +  "' /> <b>{seriesName}</b><br />{y}";
}

<div class="header">
    <div class="container">
        <img src="@Url.Content("~/images/c1logo.png")" alt="Component One ASP.Net MVC" />
        <h1>
            ASP.NET Core C1 FlexChart 101
        </h1>
        <p>
            This page shows how to get started with ASP.NET Core MVC's C1 FlexChart controls.
        </p>
    </div>
</div>

<div class="container">
    <div class="sample-page download-link">
        <a href="http://www.componentone.com/Download/">Download Free Trial</a>
    </div>
    <!-- Getting Started -->
    <div>
        <h2>Getting Started</h2>
        <p>
            Steps for getting started with the FlexChart control in MVC applications:
        </p>
        <ol>
            <li>Create a new ASP.NET Core MVC project using the "C1 ASP.NET Core MVC Web Application" template.</li>
            <li>Add controller and corresponding view to the project.</li>
            <li>Initialize the C1 FlexChart control in view using &lt;c1-flex-chart&gt;&lt;/c1-flex-chart&gt; tag.</li>
            <li>(Optional) Add some CSS to customize the FlexChart control's appearance.</li>
        </ol>        
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#gsHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#gsCss" role="tab" data-toggle="tab">CSS</a></li>
                        <li><a href="#gsCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane pane-content active" id="gsHtml">

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;

    &lt;/head&gt;
    &lt;body&gt;

        &lt;!-- this is the FlexChart --&gt;
        &lt;c1-flex-chart id="gettingStartedChart" binding-x="Country"&gt;
            &lt;c1-items-source source-collection="@@Model.CountrySalesData"&gt;&lt;/c1-items-source&gt;
            &lt;c1-flex-chart-series binding="Sales" name="Sales"&gt;&lt;/c1-flex-chart-series&gt;
            &lt;c1-flex-chart-series binding="Expenses" name="Expenses"&gt;&lt;/c1-flex-chart-series&gt;
            &lt;c1-flex-chart-series binding="Downloads" name="Downloads"&gt;&lt;/c1-flex-chart-series&gt;
        &lt;/c1-flex-chart&gt;

    &lt;/body&gt;
&lt;/html&gt;

                        </div>
                        <div class="tab-pane pane-content" id="gsCss">

.wj-flexchart {
    background-color: white;
    box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
    height: 400px;
    margin-bottom: 12px;
    padding: 8px;
}

                        </div>
                        <div class="tab-pane pane-content" id="gsCS">

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexChart101.Models;
using C1.Web.Mvc.Chart;

namespace FlexChart101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexChartModel ModelObj = new FlexChartModel();
            ModelObj.Settings = CreateIndexSettings();
            ModelObj.CountrySalesData = CountryData.GetCountryData();

            return View(ModelObj);
        }

        private IDictionary&lt;string, object[]&gt; CreateIndexSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false.ToString(), true.ToString()}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}},
                {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}}
            };

            return settings;
        }
    }
}


                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <c1-flex-chart id="gettingStartedChart" binding-x="Country">
                    <c1-items-source source-collection="@Model.CountrySalesData"></c1-items-source>
                    <c1-flex-chart-series binding="Sales" name="Sales"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Expenses" name="Expenses"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Downloads" name="Downloads"></c1-flex-chart-series>
                </c1-flex-chart>
            </div>
        </div>
    </div>


    <!-- chart types -->
    <div>
        <h2>Chart Types</h2>
        <p>The FlexChart control has three properties that allow you to customize the chart type:</p>
        <ol>
            <li>
                <b>chart-type</b>: Selects the default chart type to be used for all series.
                Individual series may override this.
            </li>
            <li>
                <b>stacking</b>: Determines whether series are plotted independently,
                stacked, or stacked so their sum is 100%.
            </li>
            <li>
                <b>rotated</b>: Flips the X and Y axes so X becomes vertical and Y horizontal.
            </li>
        </ol>
        <p>The example below allows you to see what happens when you change these properties:</p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#ctHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#ctJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#ctCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane pane-content active" id="ctHtml">

&lt;c1-flex-chart id="chartTypes" binding-x="Country"&gt;
    &lt;c1-items-source source-collection="@@Model.CountrySalesData"&gt;&lt;/c1-items-source&gt;
    &lt;c1-flex-chart-series binding="Sales" name="Sales"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Expenses" name="Expenses"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Downloads" name="Downloads"&gt;&lt;/c1-flex-chart-series&gt;
&lt;/c1-flex-chart&gt;
&lt;div class="form-horizontal"&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="col-md-3 control-label"&gt;Chart Type&lt;/label&gt;
        &lt;div class="col-md-9"&gt;
            &lt;c1-combo-box id="typeMenu" selected-index-changed="typeMenu_SelectedIndexChanged" selected-index="0"&gt;
                &lt;c1-items-source source-collection="@@Model.Settings["ChartType"]"&gt;&lt;/c1-items-source&gt;
            &lt;/c1-combo-box&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="col-md-3 control-label"&gt;Stacking&lt;/label&gt;
        &lt;div class="col-md-9"&gt;
            &lt;c1-combo-box id="stackingMenu" selected-index-changed="stackingMenu_SelectedIndexChanged" selected-index="0"&gt;
                &lt;c1-items-source source-collection="@@Model.Settings["Stacking"]"&gt;&lt;/c1-items-source&gt;
            &lt;/c1-combo-box&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="col-md-3 control-label"&gt;Rotated&lt;/label&gt;
        &lt;div class="col-md-9"&gt;
            &lt;c1-combo-box id="rotatedMenu" selected-index-changed="rotatedMenu_SelectedIndexChanged" selected-index="0"&gt;
                &lt;c1-items-source source-collection="@@Model.Settings["Rotated"]"&gt;&lt;/c1-items-source&gt;
            &lt;/c1-combo-box&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

                        </div>
                        <div class="tab-pane pane-content" id="ctJs">

//Chart Types Module
function typeMenu_SelectedIndexChanged(sender) {
    if(sender.selectedValue){
        var chartTypes = wijmo.Control.getControl("#chartTypes");
        chartTypes.chartType = sender.selectedValue;
    }
}

function stackingMenu_SelectedIndexChanged(sender) {
    if (sender.selectedValue) {
        var chartTypes = MVC.Control.getControl("#chartTypes");
        chartTypes.stacking = parseInt(sender.selectedIndex);//sender.selectedValue;
    }
}

function rotatedMenu_SelectedIndexChanged(sender) {
    if (sender.selectedValue) {
        var chartTypes = MVC.Control.getControl("#chartTypes");
        chartTypes.rotated = sender.selectedValue == 'True' ? true : false;
    }
}

</div>
                        <div class="tab-pane pane-content" id="ctCS">

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexChart101.Models;
using C1.Web.Mvc.Chart;

namespace FlexChart101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexChartModel ModelObj = new FlexChartModel();
            ModelObj.Settings = CreateIndexSettings();
            ModelObj.CountrySalesData = CountryData.GetCountryData();

            return View(ModelObj);
        }

        private IDictionary&lt;string, object[]&gt; CreateIndexSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false.ToString(), true.ToString()}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}},
                {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}}
            };

            return settings;
        }
    }
}

</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <c1-flex-chart id="chartTypes" binding-x="Country">
                    <c1-items-source source-collection="@Model.CountrySalesData"></c1-items-source>
                    <c1-flex-chart-series binding="Sales" name="Sales"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Expenses" name="Expenses"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Downloads" name="Downloads"></c1-flex-chart-series>
                </c1-flex-chart>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Chart Type</label>
                        <div class="col-md-9">
                            <c1-combo-box id="typeMenu" selected-index-changed="typeMenu_SelectedIndexChanged" selected-index="0">
                                <c1-items-source source-collection="@Model.Settings["ChartType"]"></c1-items-source>
                            </c1-combo-box>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Stacking</label>
                        <div class="col-md-9">
                            <c1-combo-box id="stackingMenu" selected-index-changed="stackingMenu_SelectedIndexChanged" selected-index="0">
                                <c1-items-source source-collection="@Model.Settings["Stacking"]"></c1-items-source>
                            </c1-combo-box>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Rotated</label>
                        <div class="col-md-9">
                            <c1-combo-box id="rotatedMenu" selected-index-changed="rotatedMenu_SelectedIndexChanged" selected-index="0">
                                <c1-items-source source-collection="@Model.Settings["Rotated"]"></c1-items-source>
                            </c1-combo-box>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- mixed chart types -->
    <div>
        <h2>Mixed Chart Types</h2>
        <p>
            You can use different chart types for each chart series by setting the <b>chart-type</b>
            property on the series itself. This overrides the chart's default chart type.
        </p>
        <p>
            In the example below, the chart's <b>chart-type</b> property is set to <b>C1.Web.Mvc.Chart.ChartType.Column</b>,
            but the <b>Downloads</b> series overrides that to use the <b>C1.Web.Mvc.Chart.ChartType.LineSymbols</b> chart type:
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#mctHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#mctCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane pane-content active" id="mctHtml">

&lt;c1-flex-chart id="mixedTypesChart" binding-x="Country"&gt;
    &lt;c1-items-source source-collection="@@Model.CountrySalesData"&gt;&lt;/c1-items-source&gt;
    &lt;c1-flex-chart-series binding="Sales" name="Sales"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Expenses" name="Expenses"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Downloads" name="Downloads" chart-type="LineSymbols"&gt;&lt;/c1-flex-chart-series&gt;
&lt;/c1-flex-chart&gt;

                        </div>
                        <div class="tab-pane pane-content" id="mctCS">

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexChart101.Models;
using C1.Web.Mvc.Chart;

namespace FlexChart101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexChartModel ModelObj = new FlexChartModel();
            ModelObj.Settings = CreateIndexSettings();
            ModelObj.CountrySalesData = CountryData.GetCountryData();

            return View(ModelObj);
        }

        private IDictionary&lt;string, object[]&gt; CreateIndexSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false.ToString(), true.ToString()}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}},
                {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}}
            };

            return settings;
        }
    }
}

</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <c1-flex-chart id="mixedTypesChart" binding-x="Country">
                    <c1-items-source source-collection="@Model.CountrySalesData"></c1-items-source>
                    <c1-flex-chart-series binding="Sales" name="Sales"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Expenses" name="Expenses"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Downloads" name="Downloads" chart-type="LineSymbols"></c1-flex-chart-series>
                </c1-flex-chart>
            </div>
        </div>
    </div>



    <!-- legend and titles -->
    <div>
        <h2>Legend and Titles</h2>
        <p>
            Use the <b>legend-position</b> property to customize the appearance of the chart legend, and
            the <b>header</b>, <b>footer</b>, and &lt;c1-flex-chart-axis&gt;&lt;/c1-flex-chart-axis&gt; tag <b>title</b> property to add titles
            to your charts.
        </p>
        <p>
            You can style the legend and titles using CSS. The CSS tab below shows the rules
            used to customize the appearance of the legend and titles. Notice that these are
            SVG elements, so you have to use CSS attributes such as "fill" instead of "color."
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#ltHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#ltJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#ltCss" role="tab" data-toggle="tab">CSS</a></li>
                        <li><a href="#ltCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane pane-content active" id="ltHtml">

&lt;c1-flex-chart id="chartLegendAndTitles" binding-x="Country" header="Sample Chart" footer="Copyright (c) ComponentOne">
    &lt;c1-items-source source-collection="@@Model.CountrySalesData"&gt;&lt;/c1-items-source&gt;
    &lt;c1-flex-chart-axis c1-property="AxisX" title="Country"&gt;&lt;/c1-flex-chart-axis&gt;
    &lt;c1-flex-chart-axis c1-property="AxisY" title="Amount"&gt;&lt;/c1-flex-chart-axis&gt;
    &lt;c1-flex-chart-series binding="Sales" name="Sales"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Expenses" name="Expenses"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Downloads" name="Downloads"&gt;&lt;/c1-flex-chart-series&gt;
&lt;/c1-flex-chart&gt;
&lt;dl class="dl-horizontal"&gt;
&lt;dt&gt;Header&lt;/dt&gt;&lt;dd&gt;&lt;input id="headerInput" class="form-control"/&gt;&lt;/dd&gt;
&lt;dt&gt;Footer&lt;/dt&gt;&lt;dd&gt;&lt;input id="footerInput" class="form-control"/&gt;&lt;/dd&gt;
&lt;dt&gt;X-Axis Title&lt;/dt&gt;&lt;dd&gt;&lt;input id="xTitleInput" class="form-control"/&gt;&lt;/dd&gt;
&lt;dt&gt;Y-Axis Title&lt;/dt&gt;&lt;dd&gt;&lt;input id="yTitleInput" class="form-control"/&gt;&lt;/dd&gt;
&lt;dt&gt;&lt;/dt&gt;
&lt;dd&gt;
&lt;c1-combo-box id="positionMenu" selected-index="0" selected-index-changed="positionMenu_SelectedIndexChanged"&gt;
    &lt;c1-items-source source-collection="@@Model.Settings["Position"]"&gt;&lt;/c1-items-source&gt;
&lt;/c1-combo-box&gt;
&lt;/dd&gt;
&lt;/dl&gt;

                        </div>
                        <div class="tab-pane pane-content" id="ltJs">

$(document).ready(function () {

    //Legend & Title Module
    var ltchart = MVC.Control.getControl("#chartLegendAndTitles");
    var ltHeader = document.getElementById('headerInput');
    var ltFooter = document.getElementById('footerInput');
    var ltXTitle = document.getElementById('xTitleInput');
    var ltYTitle = document.getElementById('yTitleInput');

    ltHeader.value = 'Sample Chart';
    ltHeader.addEventListener('input', function () {
        ltchart.header = this.value;
    });

    ltFooter.value = 'Copyright (c) ComponentOne';
    ltFooter.addEventListener('input', function () {
        ltchart.footer = this.value;
    });

    ltXTitle.value = 'Country';
    ltXTitle.addEventListener('input', function () {
        ltchart.axisX.title = this.value;
    });

    ltYTitle.value = 'Amount';
    ltYTitle.addEventListener('input', function () {
        ltchart.axisY.title = this.value;
    });

});

//Legend and Title Module
function positionMenu_SelectedIndexChanged(sender) {
    if (sender.selectedValue) {
        var chart = MVC.Control.getControl("#chartLegendAndTitles");
        chart.legend.position = parseInt(sender.selectedIndex);
    }
}


                        </div>
                        <div class="tab-pane pane-content" id="ltCss">

.wj-flexchart .wj-title {
    font-weight: bold;
}
.wj-flexchart .wj-header .wj-title {
    fill: #80044d;
    font-size: 18pt;
}
.wj-flexchart .wj-footer .wj-title {
    fill: #80044d;
}
.wj-flexchart .wj-axis-x .wj-title,
.wj-flexchart .wj-axis-y .wj-title {
    font-style: italic;
}

                        </div>
                        <div class="tab-pane pane-content" id="ltCS">

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexChart101.Models;
using C1.Web.Mvc.Chart;

namespace FlexChart101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexChartModel ModelObj = new FlexChartModel();
            ModelObj.Settings = CreateIndexSettings();
            ModelObj.CountrySalesData = CountryData.GetCountryData();
            return View(ModelObj);
        }

        private IDictionary&lt;string, object[]&gt; CreateIndexSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false.ToString(), true.ToString()}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}},
                {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}}
            };
            return settings;
        }
    }
}

</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <c1-flex-chart id="chartLegendAndTitles" binding-x="Country" header="Sample Chart" footer="Copyright (c) ComponentOne" legend-position="Right">
                    <c1-items-source source-collection="@Model.CountrySalesData"></c1-items-source>
                    <c1-flex-chart-axis c1-property="AxisX" title="Country"></c1-flex-chart-axis>
                    <c1-flex-chart-axis c1-property="AxisY" title="Amount"></c1-flex-chart-axis>
                    <c1-flex-chart-series binding="Sales" name="Sales"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Expenses" name="Expenses"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Downloads" name="Downloads"></c1-flex-chart-series>
                </c1-flex-chart>
                <dl class="dl-horizontal">
                    <dt>Header</dt>
                    <dd><input id="headerInput" class="form-control" /></dd>
                    <dt>Footer</dt>
                    <dd><input id="footerInput" class="form-control" /></dd>
                    <dt>X-Axis Title</dt>
                    <dd><input id="xTitleInput" class="form-control" /></dd>
                    <dt>Y-Axis Title</dt>
                    <dd><input id="yTitleInput" class="form-control" /></dd>
                    <dt>Legend</dt>
                    <dd>
                        <c1-combo-box id="positionMenu" selected-value="@C1.Web.Mvc.Chart.Position.Right.ToString()" selected-index-changed="positionMenu_SelectedIndexChanged">
                            <c1-items-source source-collection="@Model.Settings["Position"]"></c1-items-source>
                        </c1-combo-box>
                    </dd>
                </dl>
            </div>
        </div>
    </div>



    <!-- tooltips -->
    <div>
        <h2>Tooltips</h2>
        <p>
            The FlexChart has built-in support for tooltips. By default, the control displays
            tooltips when the user touches or hovers the mouse on a data point.
        </p>
        <p>
            The tooltip content is generated using a template that may contain the following
            parameters within &lt;c1-flex-chart-tooltip&gt;&lt;/c1-flex-chart-tooltip&gt; tag:
        </p>
        <ul>
            <li><b>seriesName</b>: The name of the series that contains the chart element.</li>
            <li><b>pointIndex</b>: The index of the chart element within the series.</li>
            <li><b>x</b>: The <b>x</b> value of the chart element.</li>
            <li><b>y</b>: The <b>y</b> value of the chart element.</li>
        </ul>
        <p>
            By default, the tooltip template is set to
            <code>&lt;b&gt;{seriesName}&lt;/b&gt;&lt;br/&gt;{x} {y}</code>,
            and you can see how that works in the  charts above.
            In this example, we set the tooltip template to
            <code>&lt;b&gt;{seriesName}&lt;/b&gt; &lt;img src='/images/{x}.png'/&gt;&lt;br/&gt;{y}</code>,
            which replaces the country name with the country's flag.
        </p>
        <p>You can disable the chart tooltips by setting the template to an empty string.</p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#tooltipHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#tooltipCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane pane-content active" id="tooltipHtml">
@@{
    var tooTipContent = "&lt;img src='" + @@Url.Content("~/images/{x}.png") +  "' /&gt; &lt;b&gt;{seriesName}&lt;/b&gt;&lt;br /&gt;{y}";
}
&lt;c1-flex-chart id="chartTooltip" binding-x="Country" header="Sample Chart" footer="Copyright (c) ComponentOne"&gt;
    &lt;c1-flex-chart-tooltip is-content-html="true" content="@@tooTipContent"&gt;&lt;/c1-flex-chart-tooltip&gt;
    &lt;c1-items-source source-collection="@@Model.CountrySalesData"&gt;&lt;/c1-items-source&gt;
    &lt;c1-flex-chart-axis c1-property="AxisX" title="Country"&gt;&lt;/c1-flex-chart-axis&gt;
    &lt;c1-flex-chart-axis c1-property="AxisY" title="Amount"&gt;&lt;/c1-flex-chart-axis&gt;
    &lt;c1-flex-chart-series binding="Sales" name="Sales"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Expenses" name="Expenses"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Downloads" name="Downloads"&gt;&lt;/c1-flex-chart-series&gt;
&lt;/c1-flex-chart&gt;

                        </div>
                        <div class="tab-pane pane-content" id="tooltipCS">

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexChart101.Models;
using C1.Web.Mvc.Chart;

namespace FlexChart101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexChartModel ModelObj = new FlexChartModel();
            ModelObj.Settings = CreateIndexSettings();
            ModelObj.CountrySalesData = CountryData.GetCountryData();

            return View(ModelObj);
        }

        private IDictionary&lt;string, object[]&gt; CreateIndexSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false.ToString(), true.ToString()}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}},
                {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}}
            };

            return settings;
        }
    }
}


                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <c1-flex-chart id="chartTooltip" binding-x="Country" header="Sample Chart" footer="Copyright (c) ComponentOne">
                    <c1-flex-chart-tooltip is-content-html="true" content="@tooTipContent"></c1-flex-chart-tooltip>
                    <c1-items-source source-collection="@Model.CountrySalesData"></c1-items-source>
                    <c1-flex-chart-axis c1-property="AxisX" title="Country"></c1-flex-chart-axis>
                    <c1-flex-chart-axis c1-property="AxisY" title="Amount"></c1-flex-chart-axis>
                    <c1-flex-chart-series binding="Sales" name="Sales"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Expenses" name="Expenses"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Downloads" name="Downloads"></c1-flex-chart-series>
                </c1-flex-chart>
            </div>
        </div>
    </div>


    <!-- styling series -->
    <div>
        <h2>Styling Series</h2>
        <p>
            The FlexChart automatically picks colors for each series based on a default
            palette, which you can override by setting the <b>palette</b> property.
            But you can also override the default settings by setting the <b>style</b>
            property of any series to an object that specifies SVG styling attributes,
            including <b>Fill</b>, <b>Stroke</b>, <b>StrokeThickness</b>, and so on.
        </p>
        <p>
            The <b>style</b> property within &lt;c1-flex-chart-series&gt;&lt;/c1-flex-chart-series&gt; is an exception to the general rule that
            all styling in MVC Controls is done through CSS. The exception reflects the fact
            that many charts have dynamic series, which would be impossible to style
            in advance. For example, a stock chart may show series selected by the
            user while running the application.
        </p>
        <p>
            The chart in this example uses the <b>style</b> and <b>symbol-style</b> properties
            to select style attributes for each series:
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#seriesStyleHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#seriesStyleCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane pane-content active" id="seriesStyleHtml">
@@{ 
    SVGStyle s1 = new SVGStyle { Fill = ConsoleColor.Green.ToString(), Stroke = ConsoleColor.DarkGreen.ToString(), StrokeWidth = 1 };
    SVGStyle s2 = new SVGStyle { Fill = ConsoleColor.Red.ToString(), Stroke = ConsoleColor.DarkRed.ToString(), StrokeWidth = 1 };
    SVGStyle s3 = new SVGStyle { Fill = "gold", Stroke = "orange", StrokeWidth = 5 };
    var tooTipContent = "&lt;img src='" + @@Url.Content("~/images/{x}.png") +  "' /&gt; &lt;b&gt;{seriesName}&lt;/b&gt;&lt;br /&gt;{y}";
}
&lt;c1-flex-chart id="chartSeriesStyle" binding-x="Country"&gt;
    &lt;c1-flex-chart-tooltip is-content-html="true" content="@@tooTipContent"&gt;&lt;/c1-flex-chart-tooltip&gt;
    &lt;c1-items-source source-collection="@@Model.CountrySalesData"&gt;&lt;/c1-items-source&gt;
    &lt;c1-flex-chart-axis c1-property="AxisX" title="Country"&gt;&lt;/c1-flex-chart-axis&gt;
    &lt;c1-flex-chart-axis c1-property="AxisY" title="Amount"&gt;&lt;/c1-flex-chart-axis&gt;
    &lt;c1-flex-chart-series binding="Sales" name="Sales" style="s1"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Expenses" name="Expenses" style="s2"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Downloads" name="Downloads" chart-type="LineSymbols" style="s3"&gt;&lt;/c1-flex-chart-series&gt;
&lt;/c1-flex-chart&gt;

                        </div>
                        <div class="tab-pane pane-content" id="seriesStyleCS">

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexChart101.Models;
using C1.Web.Mvc.Chart;

namespace FlexChart101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexChartModel ModelObj = new FlexChartModel();
            ModelObj.Settings = CreateIndexSettings();
            ModelObj.CountrySalesData = CountryData.GetCountryData();

            return View(ModelObj);
        }

        private IDictionary&lt;string, object[]&gt; CreateIndexSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false.ToString(), true.ToString()}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}},
                {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}}
            };

            return settings;
        }
    }
}


                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @{ 
                    SVGStyle s1 = new SVGStyle { Fill = ConsoleColor.Green.ToString(), Stroke = ConsoleColor.DarkGreen.ToString(), StrokeWidth = 1 };
                    SVGStyle s2 = new SVGStyle { Fill = ConsoleColor.Red.ToString(), Stroke = ConsoleColor.DarkRed.ToString(), StrokeWidth = 1 };
                    SVGStyle s3 = new SVGStyle { Fill = "gold", Stroke = "orange", StrokeWidth = 5 };
                }
                <c1-flex-chart id="chartSeriesStyle" binding-x="Country">
                    <c1-flex-chart-tooltip is-content-html="true" content="@tooTipContent"></c1-flex-chart-tooltip>
                    <c1-items-source source-collection="@Model.CountrySalesData"></c1-items-source>
                    <c1-flex-chart-axis c1-property="AxisX" title="Country"></c1-flex-chart-axis>
                    <c1-flex-chart-axis c1-property="AxisY" title="Amount"></c1-flex-chart-axis>
                    <c1-flex-chart-series binding="Sales" name="Sales" style="s1"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Expenses" name="Expenses" style="s2"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Downloads" name="Downloads" chart-type="LineSymbols" style="s3"></c1-flex-chart-series>
                </c1-flex-chart>
            </div>
        </div>
    </div>


    <!-- customizing axes -->
    <div>
        <h2>Customizing Axes</h2>
        <p>
            Use axis properties to customize the chart's axes, including ranges (minimum and maximum),
            label format, tickmark spacing, and gridlines.
        </p>
        <p>
            Use &lt;c1-flex-chart-axis&gt;&lt;/c1-flex-chart-axis&gt; tag for customizing Axes, The <b>Axis</b> class has boolean properties that allow you to turn features on
            or off (<b>axis-line</b>, <b>major-tick-marks</b> and <b>major-grid</b>.)
            You can style the appearance of the features that are turned on using CSS.
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#customizeAxesHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#customizeAxesCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane pane-content active" id="customizeAxesHtml">

@@{ 
    var tooTipContent = "&lt;img src='" + @@Url.Content("~/images/{x}.png") +  "' /&gt; &lt;b&gt;{seriesName}&lt;/b&gt;&lt;br /&gt;{y}";
}
&lt;c1-flex-chart id="chartCustomizeAxes" binding-x="Country"&gt;
    &lt;c1-flex-chart-tooltip is-content-html="true" content="@@tooTipContent"&gt;&lt;/c1-flex-chart-tooltip&gt;
    &lt;c1-items-source source-collection="@@Model.CountrySalesData"&gt;&lt;/c1-items-source&gt;
    &lt;c1-flex-chart-axis c1-property="AxisX" axis-line="true" major-grid="true"&gt;&lt;/c1-flex-chart-axis&gt;
    &lt;c1-flex-chart-axis c1-property="AxisY" format="c0" max="12000000" major-unit="1000000" axis-line="true" major-grid="true"&gt;&lt;/c1-flex-chart-axis&gt;
    &lt;c1-flex-chart-series binding="Sales" name="Sales"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Expenses" name="Expenses"&gt;&lt;/c1-flex-chart-series&gt;                    
&lt;/c1-flex-chart&gt;

                        </div>
                        <div class="tab-pane pane-content" id="customizeAxesCS">

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexChart101.Models;
using C1.Web.Mvc.Chart;

namespace FlexChart101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexChartModel ModelObj = new FlexChartModel();
            ModelObj.Settings = CreateIndexSettings();
            ModelObj.CountrySalesData = CountryData.GetCountryData();

            return View(ModelObj);
        }

        private IDictionary&lt;string, object[]&gt; CreateIndexSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false.ToString(), true.ToString()}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}},
                {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}}
            };

            return settings;
        }
    }
}


                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <c1-flex-chart id="chartCustomizeAxes" binding-x="Country">
                    <c1-flex-chart-tooltip is-content-html="true" content="@tooTipContent"></c1-flex-chart-tooltip>
                    <c1-items-source source-collection="@Model.CountrySalesData"></c1-items-source>
                    <c1-flex-chart-axis c1-property="AxisX" axis-line="true" major-grid="true"></c1-flex-chart-axis>
                    <c1-flex-chart-axis c1-property="AxisY" format="c0" max="12000000" major-unit="1000000" axis-line="true" major-grid="true"></c1-flex-chart-axis>
                    <c1-flex-chart-series binding="Sales" name="Sales"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Expenses" name="Expenses"></c1-flex-chart-series>                    
                </c1-flex-chart>
            </div>
        </div>
    </div>


    <!-- theming -->
    <div>
        <h2>Theming</h2>
        <p>
            The appearance of the FlexChart is defined in CSS. In addition to the default theme, we
            include about a dozen professionally designed themes that customize the appearance of
            all MVC controls to achieve a consistent, attractive look.
        </p>
        <p>
            To customize the appearance of the chart, inspect the elements you want to style and
            create some CSS rules that apply to those elements.
        </p>
        <p>
            For example, if you right-click one of the labels on the X axis in IE or Chrome, you
            will see that it is an element with the "wj-label" class, that it is contained in an
            element with the "wj-axis-x" class, which is contained in the the top-level control
            element, which has the "wj-flexchart" class. The first CSS rule in this example uses
            this information to customize the X labels. The rule selector adds the additional
            requirement that the parent element must be have the "wj-flexchart" <b>and</b> the
            "custom-flex-chart" classes. Without this, the rule would apply to all charts on the
            page.
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#themeHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#themeCss" role="tab" data-toggle="tab">CSS</a></li>
                        <li><a href="#themeCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane pane-content active" id="themeHtml">

&lt;c1-flex-chart id="chartTheme" binding-x="Country" class="custom-flex-chart"&gt;
    &lt;c1-items-source source-collection="@@Model.CountrySalesData"&gt;&lt;/c1-items-source&gt;                    
    &lt;c1-flex-chart-series binding="Sales" name="Sales"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Expenses" name="Expenses"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Downloads" name="Downloads"&gt;&lt;/c1-flex-chart-series&gt;
&lt;/c1-flex-chart&gt;

                        </div>
                        <div class="tab-pane pane-content" id="themeCss">

/* custom chart theme */
.custom-flex-chart.wj-flexchart .wj-axis-x .wj-label,
.custom-flex-chart.wj-flexchart .wj-legend .wj-label {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.custom-flex-chart.wj-flexchart .wj-legend &gt; rect,
.custom-flex-chart.wj-flexchart .wj-plot-area &gt;  rect {
    fill: #f8f8f8;
    stroke: #c0c0c0;
}

                        </div>
                        <div id="themeCS" class="tab-pane pane-content">

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexChart101.Models;
using C1.Web.Mvc.Chart;

namespace FlexChart101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexChartModel ModelObj = new FlexChartModel();
            ModelObj.Settings = CreateIndexSettings();
            ModelObj.CountrySalesData = CountryData.GetCountryData();

            return View(ModelObj);
        }

        private IDictionary&lt;string, object[]&gt; CreateIndexSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false.ToString(), true.ToString()}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}},
                {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}}
            };

            return settings;
        }
    }
}

</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <c1-flex-chart id="chartTheme" binding-x="Country" class="custom-flex-chart">
                    <c1-items-source source-collection="@Model.CountrySalesData"></c1-items-source>                    
                    <c1-flex-chart-series binding="Sales" name="Sales"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Expenses" name="Expenses"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Downloads" name="Downloads"></c1-flex-chart-series>
                </c1-flex-chart>
            </div>
        </div>
    </div>

    <!-- selection modes -->
    <div>
        <h2>Selection Modes</h2>
        <p>
            The FlexChart allows you to select series or data points by clicking or touching them.
            Use the <b>selection-mode</b> property to specify whether you want to allow selection
            by series, by data point, or no selection at all (selection is off by default.)
        </p>
        <p>
            Setting the <b>selection-mode</b> property to <b>SelectionMode.Series</b> or <b>SelectionMode.Point</b> causes
            the FlexChart to update the <b>Selection</b> property when the user clicks the
            mouse, and to apply the "wj-state-selected" class to selected chart elements.
        </p>
        <p>
            The <b>Selection</b> property returns the currently selected series. To get the
            currently selected data point, get the currently selected item within the
            selected series using the <b>Series.collectionView.currentItem</b> property
            as shown in the example.
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#selectionModeHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#selectionModeJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#selectionModeCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane pane-content active" id="selectionModeHtml">

&lt;c1-flex-chart id="chartSelectionMode" binding-x="Country" selection-changed="chartSelectionMode_SelectionChanged"&gt;
    &lt;c1-items-source source-collection="@@Model.CountrySalesData"&gt;&lt;/c1-items-source&gt;
    &lt;c1-flex-chart-series binding="Sales" name="Sales"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Expenses" name="Expenses"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Downloads" name="Downloads"&gt;&lt;/c1-flex-chart-series&gt;
&lt;/c1-flex-chart&gt;
&lt;div class="form-horizontal"&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="col-md-3 control-label"&gt;Selection Mode&lt;/label&gt;
        &lt;div class="col-md-9"&gt;
            &lt;c1-combo-box id="seletionModeMenu" selected-index-changed="seletionModeMenu_SelectedIndexChanged" selected-index="0"&gt;
                &lt;c1-items-source source-collection="@@Model.Settings["SelectionMode"]"&gt;&lt;/c1-items-source&gt;
            &lt;/c1-combo-box&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="col-md-3 control-label"&gt;Chart Type&lt;/label&gt;
        &lt;div class="col-md-9"&gt;
            &lt;c1-combo-box id="chartTypeMenu" selected-index-changed="chartTypeMenu_SelectedIndexChanged" selected-index="0"&gt;
                &lt;c1-items-source source-collection="@@Model.Settings["ChartType"]"&gt;&lt;/c1-items-source&gt;
            &lt;/c1-combo-box&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div id="seriesContainer" style="display:none"&gt;
    &lt;h4&gt;Current Selection&lt;/h4&gt;
    &lt;p&gt;Series: &lt;b id="seriesName"&gt;&lt;/b&gt;&lt;/p&gt;
    &lt;dl id="detailContainer" class="dl-horizontal" style="display:none"&gt;
        &lt;dt&gt;Country&lt;/dt&gt;
        &lt;dd id="seriesCountry"&gt;&lt;/dd&gt;
        &lt;dt&gt;Sales&lt;/dt&gt;
        &lt;dd id="seriesSales"&gt;&lt;/dd&gt;
        &lt;dt&gt;Expenses&lt;/dt&gt;
        &lt;dd id="seriesExpenses"&gt;&lt;/dd&gt;
        &lt;dt&gt;Downloads&lt;/dt&gt;
        &lt;dd id="seriesDownloads"&gt;&lt;/dd&gt;
    &lt;/dl&gt;
&lt;/div&gt;

                        </div>
                        <div class="tab-pane pane-content" id="selectionModeJs">

var chartSelectionMode = typeMenu = selectionModeMenu = seriesContainer = detailContainer = null;

$(document).ready(function () {
    //Selection Modes Module
    chartSelectionMode = wijmo.Control.getControl('#chartSelectionMode'),
    typeMenu = wijmo.Control.getControl('#chartTypeMenu'),
    selectionModeMenu = wijmo.Control.getControl('#seletionModeMenu'),
    seriesContainer = document.getElementById('seriesContainer'),
    detailContainer = document.getElementById('detailContainer');

    var chartLegendToggle = wijmo.Control.getControl('#chartSelectionMode'),
    cbSales = document.getElementById('cbSales'),
    cbExpenses = document.getElementById('cbExpenses'),
    cbDownloads = document.getElementById('cbDownloads');
});

//Selection Modes Module
function seletionModeMenu_SelectedIndexChanged(sender) {
    if (sender.selectedValue) {
        //var chart = wijmo.Control.getControl("#chartSelectionMode");
        chartSelectionMode.selectionMode = parseInt(sender.selectedIndex);

        // toggle the series panel's visiblity
        if (sender.selectedIndex === 0 || !chartSelectionMode.selection) {
            if (seriesContainer)
                seriesContainer.style.display = 'none';
        }
        else {
            if (seriesContainer)
            seriesContainer.style.display = 'block';
        }

        // toggle the series panel's visiblity
        if (sender.selectedIndex !== 2 || !chartSelectionMode.selection || !chartSelectionMode.selection.collectionView.currentItem) {
            if (detailContainer)
            detailContainer.style.display = 'none';
        }
        else {
            // update the details
            setSeriesDetail(chartSelectionMode.selection.collectionView.currentItem);
        }

    // update Menu header
    //updateMenuHeader(sender, 'Selection Mode');

    }
}

function chartTypeMenu_SelectedIndexChanged(sender) {
    if (sender.selectedValue) {
        //var chart = wijmo.Control.getControl("#chartSelectionMode");
        chartSelectionMode.chartType = parseInt(sender.selectedIndex);
    }
}

// update details when the FlexChart's selection changes
function chartSelectionMode_SelectionChanged(sender) {
    //var chartSelectionMode = wijmo.Control.getControl("#chartSelectionMode");
    var currentSelection = sender.selection,
    currentSelectItem;
    if (currentSelection) {
        var seriesContainer = document.getElementById('seriesContainer'),
        selectionModeMenu = document.getElementById('selectionModeMenu');
        seriesContainer.style.display = 'block'; // show container

        document.getElementById('seriesName').innerHTML = currentSelection.name;
        currentSelectItem = currentSelection.collectionView.currentItem;

        if (currentSelectItem && selectionModeMenu.selectedValue === '2') {
            setSeriesDetail(currentSelectItem); // update details
        }
    }
}

// helper method to show details of the FlexChart's current selection
function setSeriesDetail(currentSelectItem) {
    detailContainer.style.display = 'block';
    document.getElementById('seriesCountry').innerHTML = currentSelectItem.Country;
    document.getElementById('seriesSales').innerHTML = wijmo.Globalize.format(currentSelectItem.Sales, 'c2');
    document.getElementById('seriesExpenses').innerHTML = wijmo.Globalize.format(currentSelectItem.Expenses, 'c2');
    document.getElementById('seriesDownloads').innerHTML = wijmo.Globalize.format(currentSelectItem.Downloads, 'n0');
};

                        </div>
                        <div class="tab-pane pane-content" id="selectionModeCS">

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexChart101.Models;
using C1.Web.Mvc.Chart;

namespace FlexChart101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexChartModel ModelObj = new FlexChartModel();
            ModelObj.Settings = CreateIndexSettings();
            ModelObj.CountrySalesData = CountryData.GetCountryData();

            return View(ModelObj);
        }

        private IDictionary&lt;string, object[]&gt; CreateIndexSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false.ToString(), true.ToString()}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}},
                {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}}
            };

            return settings;
        }
    }
}


                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <c1-flex-chart id="chartSelectionMode" binding-x="Country" selection-changed="chartSelectionMode_SelectionChanged" selection-mode="None">
                    <c1-items-source source-collection="@Model.CountrySalesData"></c1-items-source>
                    <c1-flex-chart-series binding="Sales" name="Sales"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Expenses" name="Expenses"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Downloads" name="Downloads"></c1-flex-chart-series>
                </c1-flex-chart>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Selection Mode</label>
                        <div class="col-md-9">
                            <c1-combo-box id="selectionModeMenu" selected-index-changed="selectionModeMenu_SelectedIndexChanged" selected-index="0">
                                <c1-items-source source-collection="@Model.Settings["SelectionMode"]"></c1-items-source>
                            </c1-combo-box>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Chart Type</label>
                        <div class="col-md-9">
                            <c1-combo-box id="chartTypeMenu" selected-index-changed="chartTypeMenu_SelectedIndexChanged" selected-index="0">
                                <c1-items-source source-collection="@Model.Settings["ChartType"]"></c1-items-source>
                            </c1-combo-box>
                        </div>
                    </div>
                </div>

                <div id="seriesContainer" style="display:none">
                    <h4>Current Selection</h4>
                    <p>Series: <b id="seriesName"></b></p>
                    <dl id="detailContainer" class="dl-horizontal" style="display:none">
                        <dt>Country</dt>
                        <dd id="seriesCountry"></dd>
                        <dt>Sales</dt>
                        <dd id="seriesSales"></dd>
                        <dt>Expenses</dt>
                        <dd id="seriesExpenses"></dd>
                        <dt>Downloads</dt>
                        <dd id="seriesDownloads"></dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>


    <!-- toggle series visibility -->
    <div>
        <h2>Toggle Series</h2>
        <p>
            The <b>Series</b> class has a <b>visibility</b> property that allows you to
            determine whether a series should be shown in the chart and in the legend,
            only in the legend, or completely hidden.
        </p>
        <p>
            This sample shows how you can use the <b>visibility</b> property to toggle
            the visibility of a series using two methods:
        </p>
        <ol>
            <li>
                Clicking on legend entries:<br />
                The chart sets the chart's <b>option.legendToggle</b> property to true,
                which toggles the <b>visibility</b> property of a series when its legend entry is
                clicked.
            </li>
            <li>
                Using checkboxes:<br />
                When the <b>checked</b> state changed, it will set the <b>visibility</b> property of each series by the <b>checked</b> state.
            </li>
        </ol>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#legendToggleHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#legendToggleJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#legendToggleCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane pane-content active" id="legendToggleHtml">

&lt;c1-flex-chart id="chartLegendToggle" binding-x="Country" legend-toggle="true" series-visibility-changed="chartLegendToggle_SeriesVisibilityChanged"&gt;
    &lt;c1-items-source source-collection="@@Model.CountrySalesData"&gt;&lt;/c1-items-source&gt;
    &lt;c1-flex-chart-series binding="Sales" name="Sales"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Expenses" name="Expenses"&gt;&lt;/c1-flex-chart-series&gt;
    &lt;c1-flex-chart-series binding="Downloads" name="Downloads"&gt;&lt;/c1-flex-chart-series&gt;
&lt;/c1-flex-chart&gt;
Sales &lt;input id="cbSales" type="checkbox" /&gt;&lt;br /&gt;
Expenses &lt;input id="cbExpenses" type="checkbox" /&gt;&lt;br /&gt;
Downloads &lt;input id="cbDownloads" type="checkbox" /&gt;

                        </div>
                        <div class="tab-pane pane-content" id="legendToggleJs">

$(document).ready(function () {
    //Toggle Series Module

    // loop through custom check boxes
    ['cbSales', 'cbExpenses', 'cbDownloads'].forEach(function (item, index) {
        // update checkbox and toggle FlexChart's series visibility when clicked
        var el = document.getElementById(item);
        el.checked = chartLegendToggle.series[index].visibility === wijmo.chart.SeriesVisibility.Visible;
        el.addEventListener('click', function () {
            if (this.checked) {
                chartLegendToggle.series[index].visibility = wijmo.chart.SeriesVisibility.Visible;
            }
            else {
                chartLegendToggle.series[index].visibility =wijmo.chart.SeriesVisibility.Legend;
            }
        });
    });

});

//Toggle Series Module
function chartLegendToggle_SeriesVisibilityChanged(sender) {
    // loop through chart series
    sender.series.forEach(function (series) {
        var seriesName = series.name,
        checked = series.visibility === wijmo.chart.SeriesVisibility.Visible;

    // update custom checkbox panel
    document.getElementById('cb' + seriesName).checked = checked;
});
}


                        </div>
                        <div class="tab-pane pane-content" id="legendToggleCS">

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexChart101.Models;
using C1.Web.Mvc.Chart;

namespace FlexChart101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexChartModel ModelObj = new FlexChartModel();
            ModelObj.Settings = CreateIndexSettings();
            ModelObj.CountrySalesData = CountryData.GetCountryData();

            return View(ModelObj);
        }

        private IDictionary&lt;string, object[]&gt; CreateIndexSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false.ToString(), true.ToString()}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}},
                {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}}
            };

            return settings;
        }
    }
}



                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <c1-flex-chart id="chartLegendToggle" binding-x="Country" legend-toggle="true" series-visibility-changed="chartLegendToggle_SeriesVisibilityChanged">
                    <c1-items-source source-collection="@Model.CountrySalesData"></c1-items-source>
                    <c1-flex-chart-series binding="Sales" name="Sales"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Expenses" name="Expenses"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="Downloads" name="Downloads"></c1-flex-chart-series>
                </c1-flex-chart>
                Sales <input id="cbSales" type="checkbox" /><br />
                Expenses <input id="cbExpenses" type="checkbox" /><br />
                Downloads <input id="cbDownloads" type="checkbox" />
            </div>
        </div>
    </div>



</div>