@using Trirand.Web.Core
@using Trirand.Web.Core.Chart;
@using Trirand.Web.Core.Chart.ChartAxis;
@using Trirand.Web.Core.Chart.Series;
@using Trirand.Web.Core.Chart.Style;
@using Trirand.Web.Core.Chart.ChartFeature
@using Trirand.Web.Core.Chart.Data;

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chart for ASP.NET Core - Mixed Chart - Meeting Room Saturation</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
                     {
                         Width = "950px",
                         Height = "600px",
                         BackgroundColor = "#999999",
                         Color = new List<string> { "#ffd285", "#ff733f", "#ec4863" },
                         Tooltip = new ToolTip(),
                         Legend = new Legend
                         {
                             X = "30%",
                             Bottom = "1%",
                             TextStyle = new TextStyle { Color = "#ffd285" },
                             Data = new List<string> { "Atlanta", "Seattle", "Portland" }
                         },
                         Title = new List<Title>
                        {
                            new Title
                            {
                                Text = "Meeting Room Availability",
                                Left = "40%",
                                Top = "6%",
                                TextStyle = new TextStyle { Color = "#ffd285" }
                            }
                        },
                         Radar = new List<Radar>
                        {
                            new Radar
                            {
                                Indicator = new List<IndicatorData>
                                {
                                    new IndicatorData { Name ="Hub Host", Max = 6500},
                                    new IndicatorData { Name ="Door Display", Max = 16000},
                                    new IndicatorData { Name ="Display", Max = 30000},
                                    new IndicatorData { Name ="Projector", Max = 38000},
                                    new IndicatorData { Name ="Other", Max = 52000}
                                },
                                Center = new List<string> { "83%", "85%" },
                                Radius = 80
                            }
                        },
                         Grid = new List<Grid>
                        {
                            new Grid
                            {
                                Left = "10%",
                                Right = "35%",
                                Top = "16%",
                                Bottom = "6%",
                                ContainLabel = true
                            }
                        },
                         Toolbox = new ToolBox
                         {
                             Show = false,
                             Feature = new Feature {  SaveAsImage = new FeatureImage {  Show  = true } }
                         },
                         XAxis = new List<Axis>
                        {
                            new CategoryAxis
                            {
                                AxisLine = new AxisLine { LineStyle = new LineStyle { Color = "#c0576d"}},
                                AxisTick = new AxisTick { Show = false },
                                AxisLabel = new AxisLabel { TextStyle = new TextStyle { Color = "#ffd285"}},
                                BoundaryGap = true,
                                Data = new List<string> { "Monday "," Tuesday "," Wednesday "," Thursday "," Friday "," Saturday "," Sunday" }
                            }

                        },
                         YAxis = new List<Axis>
                         {
                             new ValueAxis
                             {
                                 AxisLine = new AxisLine { LineStyle = new LineStyle { Color = "#c0576d"}},
                                AxisTick = new AxisTick { Show = false },
                                SplitLine = new SplitLine { Show = true, LineStyle = new LineStyle { Color = "#c0576d" }},
                                 AxisLabel = new AxisLabel { TextStyle = new TextStyle { Color = "#ffd285"}},

                             }
                         },
                         Series = new List<object>
                         {
                             new Bar
                             {
                                 Name = "Atlanta",
                                 Smooth = true,
                                 SymbolSize = 8,
                                 Data = new List<int> { 90, 50, 39, 50, 120, 82, 80 }

                             },
                             new Bar
                             {
                                 Name = "Seattle",
                                 Smooth = true,
                                 SymbolSize = 8,
                                 Data = new List<int> { 70, 50, 50, 87, 90, 80, 70 }

                             },
                             new Bar
                             {
                                 Name = "Portland",
                                 Smooth = true,
                                 SymbolSize = 8,
                                 Data = new List<int> { 290, 200, 20, 132, 15, 200, 90 }

                             },
                             new Pie
                             {
                                 Center = new List<string> { "83%", "20%" },
                                 Radius = new List<string> { "15%", "20%"},
                                 Tooltip = new ToolTip
                                 {
                                     Trigger = TriggerType.Item,
                                     Formatter = "{a} <br/>{b} : {c} ({d}%)"
                                 },
                                 Label = new ItemStyle { Normal = new Normal { Position = "center" }},
                                 Data = ViewData["pieData1"] as List<Data>
                             },
                             new Pie
                             {
                                 Center = new List<string> { "83%", "50%" },
                                 Radius = new List<string> { "15%", "20%"},
                                 Tooltip = new ToolTip
                                 {
                                     Trigger = TriggerType.Item,
                                     Formatter = "{a} <br/>{b} : {c} ({d}%)"
                                 },
                                 Data = ViewData["pieData2"] as List<Data>
                             },
                             new RadarSeries
                             {
                                 Center = new List<string> { "83%", "85%" },
                                 Tooltip = new ToolTip() {},
                                 Data = new List<Data>
                                 {
                                     new Data
                                     {
                                         Name = "Budget",
                                         Value = new List<int> { 4300, 10000, 28000, 35000, 50000, 19000  }
                                     },
                                     new Data
                                     {
                                         Name = "Expenses",
                                         Value = new List<int> { 5000, 14000, 28000, 31000, 42000, 21000 }
                                     }
                                 }
                             }
                         }
                     }
            , "Chart")
        )

        <br />
        <div>
            @await Component.InvokeAsync("CodeTabs", new { product = "chart", example = "mixed/meetingroom" })
        </div>
    </div>
</body>
</html>

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

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        [Route("chart/mixed/meetingroom")]
        public ActionResult MeetingRoom()
        {           
            List<Data> pieData1 = new List<Data>
            {
                new Data
                {
                    Value = 335,
                    Name = "Polution Sources",
                    ItemStyle = new ItemStyle { Normal = new Normal { Color = "#ffd285"}},
                    Label = new EntityStyle<LineLabelStyle>
                    {
                        Normal = new LineLabelStyle
                        {
                            Formatter = "{d} %",
                            TextStyle = new TextStyle { Color = "#ffd285", FontSize = 20 }
                        }
                    }
                },
                new Data
                {
                    Value = 180,
                    Name = "Placeholder",
                    Tooltip = new ToolTip { Show = false},

                    ItemStyle = new ItemStyle { Normal = new Normal { Color = "#404A59"}},
                    Label = new EntityStyle<LineLabelStyle>
                    {
                        Normal = new LineLabelStyle
                        {
                            Formatter = "\n Avg",
                            TextStyle = new TextStyle { Color = "#ffd285", FontSize = 20 },                           
                        }
                    }
                }
            };

            List<Data> pieData2 = new List<Data>
            {
                new Data
                {
                    Value = 335,
                    Name = "Phone",
                    ItemStyle = new ItemStyle { Normal = new Normal { Color = "#FF3300"}}
                },
                new Data
                {
                    Value = 310,
                    Name = "Platform",
                    ItemStyle = new ItemStyle { Normal = new Normal { Color = "#FFFF00"}}
                },
                new Data
                {
                    Value = 234,
                    Name = "Exchange",
                    ItemStyle = new ItemStyle { Normal = new Normal { Color = "#00FF00"}}
                },
                new Data
                {
                    Value = 335,
                    Name = "Door Display",
                    ItemStyle = new ItemStyle { Normal = new Normal { Color = "#1E90FF"}}
                },
                new Data
                {
                    Value = 1545,
                    Name = "Other",
                    ItemStyle = new ItemStyle { Normal = new Normal { Color = "#ADFF2F"}}
                },
            };

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

            return View("~/Views/Chart/Mixed/MeetingRoom.cshtml");
        }
    }
}