@using Trirand.Web.Mvc
@using Trirand.Web.Mvc.Chart;
@using Trirand.Web.Mvc.Chart.ChartAxis;
@using Trirand.Web.Mvc.Chart.Series;
@using Trirand.Web.Mvc.Chart.Style;
@using Trirand.Web.Mvc.Chart.Series.Data;

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chartfor ASP.NET MVC - Mixed Chart - Reason</title>
    <script type="text/javascript" src="~/Scripts/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
                     {
                        Width = "950px",
                        Height = "500px",
                        BackgroundColor = "#0f375f",
                        Title = new List<Title>
                        {
                            new Title()
                            {
                                Text = "Proportion of channel complaints",
                                X = "2%",
                                Y = "1%",
                                TextStyle = new TextStyle { Color = "#fff", FontSize = 14}
                            },
                            new Title()
                            {
                                Text = "Top 10 cause of complaint",
                                X = "40%",
                                Y = "1%",
                                TextStyle = new TextStyle { Color = "#fff", FontSize = 14}
                            },
                            new Title()
                            {
                                Text = "Proportion of all complaint",
                                X = "2%",
                                Y = "50%",
                                TextStyle = new TextStyle { Color = "#fff", FontSize = 14}
                            }
                        },
                        Grid = new List<Grid>
                        {
                            new Grid  { X = "50%", Y = "7%", Width = "45%", Height= "90%" }
                        },
                        Tooltip = new ToolTip
                        {
                            Formatter = "{b} ({c})"
                        },
                        XAxis = new List<Axis>()
                        {
                            new ChartAxis<object>()
                            {
                                GridIndex = 0,
                                AxisTick = new AxisTick { Show = false },
                                AxisLabel = new AxisLabel { Show = false },
                                SplitLine = new SplitLine { Show = false },
                                AxisLine = new AxisLine { Show = false }
                            }
                        },
                        YAxis = new List<Axis>()
                        {
                            new ChartAxis<object>()
                            {
                                GridIndex = 0,
                                Interval = 0,
                                Data = ViewData["yAxisData"] as List<string>,
                                AxisTick = new AxisTick { Show = false },
                                AxisLabel = new AxisLabel { Show = true },
                                SplitLine = new SplitLine { Show = false },
                                AxisLine = new AxisLine
                                {
                                    Show = true,
                                    LineStyle = new LineStyle { Color = "#6173a3"}
                                }
                            }
                        },
                        Series = new List<object>()
                        {
                            new Pie()
                            {
                                Name = "Proportion of all complaint",
                                Radius = 30,
                                Center = new List<string> { "22%", "25%" },
                                Color = new List<string> { "#86c9f4", "#4da8ec", "#3a91d2", "#005fa6", "#315f97" },
                                Data = ViewData["pieData1"] as List<PieData<int>>,
                                LabelLine = new ItemStyle { Normal = new Normal { Show = false } },
                                ItemStyle = new ItemStyle
                                {
                                    Normal = new Normal
                                    {
                                        Show = true,
                                        Formatter = "{b} \n ({d}%)",
                                        TextStyle = new TextStyle { Color = "#B1B9D3"}
                                    }

                                }
                            },
                            new Pie()
                            {
                                Name = "Proportion of all complaint",
                                Radius = 30,
                                Center = new List<string> { "22%", "75%" },
                                Color = new List<string> { "#86c9f4", "#4da8ec", "#3a91d2", "#005fa6", "#315f97" },
                                Data = ViewData["pieData2"] as List<PieData<int>>,
                                LabelLine = new ItemStyle { Normal = new Normal { Show = false } },
                                ItemStyle = new ItemStyle
                                {
                                    Normal = new Normal
                                    {
                                        Show = true,
                                        Formatter = "{b} \n ({d}%)",
                                        TextStyle = new TextStyle { Color = "#B1B9D3"}
                                    }

                                }
                            },
                            new Bar()
                            {
                                Name = "Top 10 cause of complaint",
                                XAxisIndex = 0,
                                YAxisIndex = 0,
                                BarWidth = "45%",
                                ItemStyle = new ItemStyle { Normal = new Normal { Color = "#86c9f4" }},
                                Label = new ItemStyle
                                {
                                    Normal = new Normal
                                    {
                                        Show = true,
                                        Position = "right",
                                        TextStyle = new TextStyle { Color = "#9EA7C4"}
                                    }
                                },
                                Data = ViewData["data1"] as List<int>
                            }
                         }
                     }
            , "Chart")
        )

        <br />
        <div>
             
        </div>
    </div>
</body>
</html>

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

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        public ActionResult Reason()
        {
            List<int> data1 = new List<int> { 389, 259, 262, 324, 232, 176, 196, 214, 133, 370 };
            List<string> yAxisData = new List<string> {
                "Reason 1", "Reason 2", "Reason 3", "Reason 4", "Reason 5", "Reason 6", "Reason 7",
                "Reason 8", "Reason 0", "Reason 10"
            };
            yAxisData.Reverse();
            data1.Sort();

            List<PieData<int>> pieData1 = new List<PieData<int>>
            {
                new PieData<int> { Name = "Customer Service", Value = 335},
                new PieData<int> { Name = "Official WebSite", Value = 310},
                new PieData<int> { Name = "Media Exposure", Value = 234},
                new PieData<int> { Name = "General Administration", Value = 135},
                new PieData<int> { Name = "Other", Value = 100}
            };

            List<PieData<int>> pieData2 = new List<PieData<int>>
            {
                new PieData<int> { Name = "Class A ", Value = 335},
                new PieData<int> { Name = "Class B", Value = 310},
                new PieData<int> { Name = "Class C", Value = 234},
                new PieData<int> { Name = "Class D", Value = 135}
            };

            ViewData["pieData1"] = pieData1;
            ViewData["pieData2"] = pieData2;
            ViewData["data1"] = data1;
            ViewData["yAxisData"] = yAxisData;

            return View("");
        }
    }
}