@using Trirand.Web.Core
@using Newtonsoft.Json.Linq;
@using System.Collections.Generic;
@using Trirand.Web.Core.Chart;
@using Trirand.Web.Core.Chart.Series;
@using Trirand.Web.Core.Chart.Series.Data;
@using Trirand.Web.Core.Chart.Style;

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chart for ASP.NET Core - Pie Custom</title>  
    <script type="text/javascript" src="~/js/trirand/chart/corechart.min.js"></script>
</head>
<body>
    <div>
        <!--
        The Html.Trirand().CoreChart() helper has two parameters
            - the model of the chart -- all chart properties, data and settings
            - the ID of the chart -- can be used for client-side manipulation
        In this example we are using hardcoded model in the View, but you can contruct the model in 
        the controller based on runtime criteria and database data and pass the model 
        to the View using ViewData
        -->
        @(Html.Trirand().CoreChart(
            new CoreChart
            {
                BackgroundColor = "#2c343c",
                Title = new List<Title>
                {
                    new Title()
                    {
                        Left = "center",
                        Text = "Customized Pie",
                        Top = 20,
                        TextStyle = new Trirand.Web.Core.Chart.Style.TextStyle
                        {
                            Color = "#ccc"
                        }
                    }
                },
                Tooltip = new ToolTip
                {
                    Trigger = TriggerType.Item,
                    Formatter = "{a} <br/>{b} : {c} ({d}%)"
                },
                VisualMap = new VisualMap
                {
                    Min = 60,
                    Max = 800,
                    Show = false,
                    InRange = new int[2] { 0, 1 }

                },
                Series = new List<object>()
                {
                    new Pie()
                    {
                        AnimationEasing = "elasticOut",
                        AnimationDelay =  new JRaw(@"function (idx) {
                                                            return Math.random() * 200;
                                                    }"),
                        Name = "Access Source",
                        Radius = "55%",
                        Center = new List<string>() {"50%", "50%"},
                        Data = ViewData["pieData"] as List<PieData<int>>,
                        RoseType = NigRoseType.Radius,
                        Label = new Trirand.Web.Core.Chart.Style.ItemStyle
                        {
                            Normal = new Trirand.Web.Core.Chart.Style.Normal
                            {
                                TextStyle = new Trirand.Web.Core.Chart.Style.TextStyle
                                {
                                    Color = "rgba(255, 255, 255, 0.3)"
                                }
                            }
                        },
                        ItemStyle = new ItemStyle
                        {
                            Normal = new Normal
                            {
                                Color = "#c23531",
                                ShadowBlur = 200,
                                ShadowColor = "rgba(0, 0, 0, 0.5)"
                            }
                        },
                    },
                }
            }
            , "Chart")
    )
             
        <br />
        <div>
            @await Component.InvokeAsync("CodeTabs", new { product = "chart", example = "pie/custom" })
        </div>
    </div>
</body>
</html>

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using Trirand.Web.Core.Chart.Series.Data;

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        [Route("chart/pie/custom")]
        public ActionResult Custom()
        {
            List<PieData<int>> pieData = new List<PieData<int>>
            {
                new PieData<int> { Name = "Interview", Value = 335},
                new PieData<int> { Name = "Mail", Value = 310},
                new PieData<int> { Name = "Affiliate", Value = 274},
                new PieData<int> { Name = "Video", Value = 235},
                new PieData<int> { Name = "Search", Value = 400}
            };            

            ViewData["pieData"] = pieData;

            return View("~/Views/Chart/pie/custom.cshtml");
        }
    }
}