@model FlexPie101.Models.FlexPieModel

@{
    ViewBag.Title = "ASP.NET MVC FlexPie Introduction";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="header">
    <div class="container">
        <img src="@Url.Content("~/Content/c1logo.png")" alt="Component One ASP.NET MVC" />
        <h1>
            ASP.NET MVC FlexPie 101
        </h1>
        <p>
            This page shows how to get started with ASP.NET MVC's FlexPie control.
        </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 FlexPie control in MVC applications:
        </p>
        <ol>
            <li>Create a new MVC project using the C1 ASP.NET MVC application template.</li>
            <li>Add controller and corresponding view to the project.</li>
            <li>Initialize the FlexPie control in view using razor syntax.</li>
            <li>(Optional) Add some CSS to customize the FlexPie 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="#sHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>                        
                        <li><a href="#sCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="sHtml">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        @@Html.C1().Resources(typeof(C1Chart))
    &lt;/head&gt;
    &lt;body&gt;

        @@using C1.Web.Mvc
        &lt;!-- FlexPie --&gt;
        @@(Html.C1().FlexPie().Id("introChart").Header("Products Sale By Country")
            .Bind("Country", "Count", Model.CountryGroupOrderData).DataLabel(dl =&gt; dl.Content("{value}")))

    &lt;/body&gt;
&lt;/html&gt;
                        </div>                        
                        <div class="tab-pane pane-content" id="sCS">
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using C1.Web.Mvc;
using C1.Web.Mvc.Chart;
using FlexPie101.Models;

namespace FlexPie101.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            FlexPieModel ModelObj = new FlexPieModel();
            ModelObj.CountryGroupOrderData = CustomerOrder.GetCountryGroupOrderData();

            return View(ModelObj);
        }

    }
}

                            </div>
                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexPie().Id("introChart").Header("Products Sale By Country")
                    .Bind("Country", "Count", Model.CountryGroupOrderData).DataLabel(dl => dl.Content("{value}")))
            </div>
        </div>
    </div>





    <!-- Basic Features -->
    <div>
        <h2>Basic Features</h2>
        <p>
            The FlexPie control has five basic properties that allow you to customize its layout and appearance:
        </p>
        <ul>
            <li>
                <b>InnerRadius</b>:  Specifies the control's inner radius to support donut charts.
            </li>
            <li>
                <b>Offset</b>:  Specifies the offset of the pie slices from the center of the control.
            </li>
            <li>
                <b>StartAngle</b>:  Starting at the nine o'clock position, specifies the angle to start drawing pie slices.
            </li>
            <li>
                <b>Palette</b>:  Specifies an array of default colors to be used when rendering pie slices.
            </li>
            <li>
                <b>Reversed</b>:  Determines whether the control should draw pie slices clockwise (false) or counterclockwise (true).
            </li>
        </ul>
        <p>
            The example below allows you to see what happens when you change these properties.  Also, clicking on a pie slice will
            display a tooltip for the data point.
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#bfHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#bfJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#bfCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="bfHtml">
                            
@@(Html.C1().FlexPie().Id("basicChart").Header("Products Sale By Country")
    .Bind("Country", "Count", Model.CountryGroupOrderData)
    .DataLabel(dl =&gt; dl.Content("{value}"))
)
&lt;div class="form-horizontal"&gt;
    &lt;div class="form-group"&gt;
    &lt;label class="col-md-3 control-label"&gt;Inner Radius&lt;/label&gt;
    &lt;div class="col-md-9"&gt;
        @@(Html.C1().InputNumber().Id("basicInnerRadius").Min(0).Max(1).Step(.1)
            .Format("n").OnClientValueChanged("basicInnerRadius_valueChanged")
        )
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
    &lt;label class="col-md-3 control-label"&gt;Offset&lt;/label&gt;
    &lt;div class="col-md-9"&gt;
        @@(Html.C1().InputNumber().Id("basicOffset").Min(0).Max(1).Step(.1)
            .Format("n").OnClientValueChanged("basicOffset_valueChanged")
        )
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
    &lt;label class="col-md-3 control-label"&gt;Start Angle&lt;/label&gt;
    &lt;div class="col-md-9"&gt;
        @@(Html.C1().InputNumber().Id("basicStartAngle").Min(-360).Max(360).Step(45)
            .Format("n").OnClientValueChanged("basicStartAngle_valueChanged")
        )
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
    &lt;div class="col-md-offset-3 col-md-9"&gt;
        @@(Html.C1().ComboBox().Id("basicPalette").Bind(Model.Settings["Palette"])
            .Placeholder("Pallete").SelectedValue("standard")
            .OnClientSelectedIndexChanged("basicPalette_SelectedIndexChanged")
        )
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
    &lt;div class="col-md-offset-3 col-md-9"&gt;
        &lt;div class="checkbox"&gt;
            &lt;label&gt;
                &lt;input id="basicReversed" type="checkbox" /&gt; Reversed?
            &lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
                        </div>
                        <div class="tab-pane pane-content" id="bfJs">

$(document).ready(function () {    

    //Basic Features Module
    var basicReversed = document.getElementById('basicReversed');    
    basicReversed.addEventListener('change', function () {

        // determine reversed by checkbox's checked state
        var chart = wijmo.Control.getControl("#basicChart");
        chart.reversed = this.checked;
    });


});

//Basic Features Module
function basicInnerRadius_valueChanged(sender) {
    var chart = wijmo.Control.getControl("#basicChart");
    chart.innerRadius = sender.value;
};

function basicOffset_valueChanged(sender) {
    var chart = wijmo.Control.getControl("#basicChart");
    chart.offset = sender.value;
};

function basicStartAngle_valueChanged(sender) {
    var chart = wijmo.Control.getControl("#basicChart");
    chart.startAngle = sender.value;
};

function basicPalette_SelectedIndexChanged(sender) {
    if (!sender.selectedValue)
        return;
    var chart = wijmo.Control.getControl("#basicChart");
    chart.palette = wijmo.chart.Palettes[sender.selectedValue];
};


                        </div>
                        <div class="tab-pane pane-content" id="bfCS">
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using C1.Web.Mvc;
using C1.Web.Mvc.Chart;
using FlexPie101.Models;

namespace FlexPie101.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            FlexPieModal ModelObj = new FlexPieModal();
            ModelObj.Settings = CreateSettings();
            ModelObj.CountryGroupOrderData = CustomerOrder.GetCountryGroupOrderData();

            return View(ModelObj);
        }


        private static IDictionary&lt;string, object[]&gt; CreateSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"LegendPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}},
                {"SelectedItemPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}},
            };

            return settings;
        }
    
    }
}

                            </div>
                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexPie().Id("basicChart").Header("Products Sale By Country")
                    .Bind("Country", "Count", Model.CountryGroupOrderData)
                    .DataLabel(dl => dl.Content("{value}"))
                    )
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Inner Radius</label>
                        <div class="col-md-9">
                            @(Html.C1().InputNumber().Id("basicInnerRadius").Min(0).Max(1).Step(.1)
                                        .Format("n").OnClientValueChanged("basicInnerRadius_valueChanged")
                            )
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Offset</label>
                        <div class="col-md-9">
                            @(Html.C1().InputNumber().Id("basicOffset").Min(0).Max(1).Step(.1)
                                .Format("n").OnClientValueChanged("basicOffset_valueChanged")
                            )
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Start Angle</label>
                        <div class="col-md-9">                            
                            @(Html.C1().InputNumber().Id("basicStartAngle").Min(-360).Max(360).Step(45)
                                .Format("n").OnClientValueChanged("basicStartAngle_valueChanged")
                            )
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Palette</label>
                        <div class="col-md-9">                            
                            @(Html.C1().ComboBox().Id("basicPalette").Bind(Model.Settings["Palette"])
                                .Placeholder("Pallete").SelectedValue("standard")
                                        .OnClientSelectedIndexChanged("basicPalette_SelectedIndexChanged")
                            )
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-3 col-md-9">
                            <div class="checkbox">
                                <label>
                                    <input id="basicReversed" type="checkbox" /> Reversed?
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>






    <!-- Legend and Titles -->
    <div>
        <h2>Legend &amp; Titles</h2>
        <p>
            The <b>Legend</b> properties can be used to customize the appearance of the chart's legend.  The
            <b>Header</b> and <b>Footer</b> properties can be used to add titles to the FlexPie control as well.
        </p>
        <p>
            The following example allows you to change the FlexPie's <b>Legend</b>, <b>Header</b>, and
            <b>Footer</b> properties in real-time.
        </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="#ltCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="ltHtml">

@@(Html.C1().FlexPie().Id("ltChart").Header("Products Sale By Country")
    .Bind("Country", "Count", Model.CountryGroupOrderData)
    .DataLabel(dl =&gt; dl.Content("{value}"))
)
&lt;div class="form-horizontal"&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="col-md-3 control-label"&gt;Header&lt;/label&gt;
        &lt;div class="col-md-9"&gt;
        &lt;input id="ltHeader" type="text" class="form-control" placeholder="Specify the FlexPie's header" /&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
    &lt;label class="col-md-3 control-label"&gt;Footer&lt;/label&gt;
    &lt;div class="col-md-9"&gt;
        &lt;input id="ltFooter" type="text" class="form-control" placeholder="Specify the FlexPie's footer" /&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
    &lt;div class="col-md-offset-3 col-md-9"&gt;
        @@(Html.C1().ComboBox().Id("ltLegPos").Bind(Model.Settings["LegendPosition"])
            .Placeholder("Legend Position").SelectedValue("Right")
            .OnClientSelectedIndexChanged("ltLegPos_SelectedIndexChanged")
        )
    &lt;/div&gt;
&lt;/div&gt;

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

$(document).ready(function () {    

    //Legend & Title Module
    var ltchart = wijmo.Control.getControl("#ltChart");
    var ltHeader = document.getElementById('ltHeader');
    var ltFooter = document.getElementById('ltFooter');

    ltHeader.value = ltchart.header = 'Products By Country';
    ltFooter.value = ltchart.footer = '2014, GrapeCity Inc.';

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

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


});

//Legend & Title Module
function ltLegPos_SelectedIndexChanged(sender) {
    if (!sender.selectedValue)
        return;
    var chart = wijmo.Control.getControl("#ltChart");
    chart.legend.position = sender.selectedValue;
};


                        </div>
                        <div class="tab-pane pane-content" id="ltCS">
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using C1.Web.Mvc;
using C1.Web.Mvc.Chart;
using FlexPie101.Models;

namespace FlexPie101.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            FlexPieModal ModelObj = new FlexPieModal();
            ModelObj.Settings = CreateSettings();
            ModelObj.CountryGroupOrderData = CustomerOrder.GetCountryGroupOrderData();

            return View(ModelObj);
        }


        private static IDictionary&lt;string, object[]&gt; CreateSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"LegendPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}},
                {"SelectedItemPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}},
            };

            return settings;
        }
    
    }
}

                            </div>
                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexPie().Id("ltChart").Header("Products Sale By Country")
                    .Bind("Country", "Count", Model.CountryGroupOrderData)
                    .DataLabel(dl => dl.Content("{value}"))
                )
                <div class="form-horizontal">                
                    <div class="form-group">
                        <label class="col-md-3 control-label">Header</label>
                        <div class="col-md-9">
                            <input id="ltHeader" type="text" class="form-control" placeholder="Specify the FlexPie's header" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Footer</label>
                        <div class="col-md-9">
                            <input id="ltFooter" type="text" class="form-control" placeholder="Specify the FlexPie's footer" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Legend Position</label>                        
                        <div class="col-md-9">
                    @(Html.C1().ComboBox().Id("ltLegPos").Bind(Model.Settings["LegendPosition"])
                        .Placeholder("Legend Position").SelectedValue("Right")
                                        .OnClientSelectedIndexChanged("ltLegPos_SelectedIndexChanged")
                    )                    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <!-- Selection -->
    <div>
        <h2>Selection</h2>
        <p>
            The FlexPie control allows you to select data points by clicking or touching a pie slice. Use the <b>SelectionMode</b>
            property to specify whether you want to allow selection by data point or no selection at all (default).
        </p>
        <p>
            Setting the <b>SelctionMode</b> property to <b>Point</b> causes the FlexPie to update the <b>Selection</b> property when
            the user clicks on a pie slice, and to apply the "wj-state-selected" class to the selected element.  Setting the FlexPie's
            <b>SelectionMode</b> property to <b>Series</b> or <b>None</b> will disable selections within the control.
        </p>
        <p>
            The FlexPie offers three additional properties to customize the selection:
        </p>
        <ul>
            <li>
                <b>SelectedItemOffset</b>:  Specifies the offset of the selected pie slice from the center of the control.
            </li>
            <li>
                <b>SelectedItemPosition</b>:  Specifies the position of the selected pie slice.  The available options are Top, Bottom,
                Left, Right, and None (default).
            </li>
            <li>
                <b>IsAnimated</b>:  Determines whether or not to animate the selection.
            </li>
        </ul>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#selHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#selJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#selCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="selHtml">
@@(Html.C1().FlexPie().Id("selChart").Header("Products Sale By Country")
    .Bind("Country", "Count", Model.CountryGroupOrderData).IsAnimated(true)
    .SelectionMode(C1.Web.Mvc.Chart.SelectionMode.Point)
    .SelectedItemPosition(C1.Web.Mvc.Chart.Position.Top).DataLabel(dl =&gt; dl.Content("{value}"))
)
&lt;div class="form-horizontal"&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="col-md-3 control-label"&gt;Selected Item Offset&lt;/label&gt;
        &lt;div class="col-md-9"&gt;
            @@(Html.C1().InputNumber().Id("selItemOffset").Min(0).Max(.5).Step(.1)
                .Format("n").OnClientValueChanged("selItemOffset_valueChanged")
            )
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;div class="col-md-offset-3 col-md-9"&gt;
            @@(Html.C1().ComboBox().Id("selItemPos").Bind(Model.Settings["SelectedItemPosition"])
                .Placeholder("Selected Item Position").SelectedValue("Top")
                .OnClientSelectedIndexChanged("selItemPos_SelectedIndexChanged")
            )
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;div class="col-md-offset-3 col-md-9"&gt;
            &lt;div class="checkbox"&gt;
                &lt;label&gt;
                    &lt;input id="selAnimated" type="checkbox"&gt; Is Animated?
                &lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
                        </div>
                        <div class="tab-pane pane-content" id="selJs">


$(document).ready(function () {    

    //Selection Module
    var selAnimated = document.getElementById('selAnimated');
    selAnimated.checked = true;
    selAnimated.addEventListener('change', function () {

        // determine Is Animated by checkbox's checked state
        var chart = wijmo.Control.getControl("#selChart");
        chart.isAnimated = this.checked;
    });

});

//Selection Module
function selItemOffset_valueChanged(sender) {
    var chart = wijmo.Control.getControl("#selChart");
    chart.selectedItemOffset = sender.value;
};

function selItemPos_SelectedIndexChanged(sender) {
    if (!sender.selectedValue)
        return;
    var chart = wijmo.Control.getControl("#selChart");
    chart.selectedItemPosition = sender.selectedValue;
};

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using C1.Web.Mvc;
using C1.Web.Mvc.Chart;
using FlexPie101.Models;

namespace FlexPie101.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            FlexPieModal ModelObj = new FlexPieModal();
            ModelObj.Settings = CreateSettings();
            ModelObj.CountryGroupOrderData = CustomerOrder.GetCountryGroupOrderData();

            return View(ModelObj);
        }


        private static IDictionary&lt;string, object[]&gt; CreateSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"LegendPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}},
                {"SelectedItemPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}},
            };

            return settings;
        }
    
    }
}

                            </div>
                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexPie().Id("selChart").Header("Products Sale By Country")
                    .Bind("Country", "Count", Model.CountryGroupOrderData).IsAnimated(true)
                    .SelectionMode(C1.Web.Mvc.Chart.SelectionMode.Point)
                    .SelectedItemPosition(C1.Web.Mvc.Chart.Position.Top).DataLabel(dl => dl.Content("{value}"))
                )
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-4 control-label">Selected Item Offset</label>
                        <div class="col-md-8">                            
                            @(Html.C1().InputNumber().Id("selItemOffset").Min(0).Max(.5).Step(.1)
                                        .Format("n").OnClientValueChanged("selItemOffset_valueChanged")
                            )
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label">Selected Item Position</label>
                        <div class="col-md-8">
                            @(Html.C1().ComboBox().Id("selItemPos").Bind(Model.Settings["SelectedItemPosition"])
                        .Placeholder("Selected Item Position").SelectedValue("Top")
                                                .OnClientSelectedIndexChanged("selItemPos_SelectedIndexChanged")
                            )
            </div>
                        </div>
                    <div class="form-group">
                        <div class="col-md-offset-3 col-md-9">
                            <div class="checkbox">
                                <label>
                                    <input id="selAnimated" type="checkbox"> Is Animated?
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>





    <!-- Theming -->
    <div>
        <h2>Theming</h2>
        <p>
            The appearance of the FlexPie control is largely defined in CSS. In addition to the default theme, we
            include several professionally designed themes that customize the appearance of all MVC controls to
            achieve a consistent, attractive look.
        </p>
        <p>
            You can customize the appearance of the FlexPie control using CSS. To do this, copy the CSS rules from the
            default theme to a new CSS file and modify the properties as needed.
        </p>
        <p>
            In this example, we added the "custom-pie-chart" CSS class to the control and defined some CSS rules to
            change the fill, font family, and font weight of the header, footer, and legend.
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#tHtml" role="tab" data-toggle="tab">index.cshtml</a></li>                        
                        <li><a href="#tCss" role="tab" data-toggle="tab">CSS</a></li>
                        <li><a href="#tCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="tHtml">
    @@(Html.C1().FlexPie().Id("themeChart").Header("Products Sale By Country").CssClass("custom-pie-chart")
        .Bind("Country", "Count", Model.CountryGroupOrderData).IsAnimated(true)
        .SelectionMode(C1.Web.Mvc.Chart.SelectionMode.Point)
        .SelectedItemPosition(C1.Web.Mvc.Chart.Position.Top).DataLabel(dl =&gt; dl.Content("{value}"))
    )
                        </div>
                        <div class="tab-pane pane-content" id="tCss">

    .custom-pie-chart.wj-flexchart .wj-header .wj-title,
    .custom-pie-chart.wj-flexchart .wj-footer .wj-title,
    .custom-pie-chart.wj-flexchart .wj-legend &gt; .wj-label {
        fill: #666;
        font-family: 'Courier New', Courier, monospace;
        font-weight: bold;
    }

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using C1.Web.Mvc;
using C1.Web.Mvc.Chart;
using FlexPie101.Models;

namespace FlexPie101.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            FlexPieModal ModelObj = new FlexPieModal();
            ModelObj.Settings = CreateSettings();
            ModelObj.CountryGroupOrderData = CustomerOrder.GetCountryGroupOrderData();

            return View(ModelObj);
        }


        private static IDictionary&lt;string, object[]&gt; CreateSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"LegendPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}},
                {"SelectedItemPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}},
            };

            return settings;
        }
    
    }
}

                            </div>
                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexPie().Id("themeChart").Header("Products Sale By Country").CssClass("custom-pie-chart")
                    .Bind("Country", "Count", Model.CountryGroupOrderData).IsAnimated(true)
                    .SelectionMode(C1.Web.Mvc.Chart.SelectionMode.Point)
                    .SelectedItemPosition(C1.Web.Mvc.Chart.Position.Top).DataLabel(dl => dl.Content("{value}"))
                )
            </div>
        </div>
    </div>


</div>