@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;

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chart for ASP.NET Core - Radar AQI</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 = "#161627",
                         Title = new List<Title>
                         {
                            new Title()
                            {
                                Left = "center",
                                Text = "Radar Map",
                                TextStyle = new TextStyle { Color = "#eee" }
                            }
                         },
                         Legend = new Legend
                         {
                             Bottom = 5,
                             ItemGap = 20,
                             TextStyle = new TextStyle { Color = "#fff", FontSize = 14},
                             Data = new List<string>() { "Atlanta", "Seattle", "Portland" },
                             SelectedMode = "single",
                             Left = "left"
                         },
                         Radar = new List<Radar>
                         {
                             new Radar
                             {
                                 Indicator = new List<IndicatorData>
                                 {
                                     new IndicatorData { Name = "AQI", Max = 300 },
                                     new IndicatorData { Name = "P<2.5", Max = 250 },
                                     new IndicatorData { Name = "PM10", Max = 300 },
                                     new IndicatorData { Name = "CO", Max = 5 },
                                     new IndicatorData { Name = "NO2", Max = 200 },
                                     new IndicatorData { Name = "S02", Max = 100 }
                                 },
                                 Shape = "circle",
                                 SplitNumber = 5,
                                 Name = new AxisName
                                 {
                                     TextStyle = new TextStyle { Color = "rgb(238, 197, 102)" }
                                 },
                                 SplitLine = new SplitLine
                                 {
                                     LineStyle = new LineStyle
                                     {
                                         Color = new List<string>()
                                         {
                                              "rgba(238, 197, 102, 1)", "rgba(238, 197, 102, 0.8)",
                                              "rgba(238, 197, 102, 0.6)", "rgba(238, 197, 102, 0.4)",
                                              "rgba(238, 197, 102, 0.2)", "rgba(238, 197, 102, 0.1)"
                                         }
                                     }
                                 },
                                 SplitArea = new SplitArea {  Show = false },
                                 AxisLine = new AxisLine
                                 {
                                     LineStyle = new LineStyle { Color = "rgba(238, 197, 102, 0.5)" }

                                 }
                             }
                         },
                         Series = new List<Series>
                         {
                             new RadarSeries
                             {
                                 Name = "Atlanta",
                                 LineStyle = new ItemStyle
                                 {
                                     Normal = new Normal { Width = 1, Opacity = 0.5 }
                                 },
                                 Data = ViewData["data1"] as List<List<double>>,
                                 Symbol = "none",
                                 ItemStyle = new ItemStyle
                                 {
                                     Normal = new Normal { Color = "#F9713C" }
                                 },
                                 AreaStyle = new EntityStyle<AreaStyle>
                                 {
                                     Normal = new AreaStyle { Opacity = 0.1 }
                                 }
                             },
                             new RadarSeries
                             {
                                 Name = "Seattle",
                                 LineStyle = new ItemStyle
                                 {
                                     Normal = new Normal { Width = 1, Opacity = 0.5 }
                                 },
                                 Data = ViewData["data2"] as List<List<double>>,
                                 Symbol = "none",
                                 ItemStyle = new ItemStyle
                                 {
                                     Normal = new Normal { Color = "#B3E4A1" }
                                 },
                                 AreaStyle = new EntityStyle<AreaStyle>
                                 {
                                     Normal = new AreaStyle { Opacity = 0.05 }
                                 }
                             },
                             new RadarSeries
                             {
                                 Name = "Portland",
                                 LineStyle = new ItemStyle
                                 {
                                     Normal = new Normal { Width = 1, Opacity = 0.5 }
                                 },
                                 Data = ViewData["data3"] as List<List<double>>,
                                 Symbol = "none",
                                 ItemStyle = new ItemStyle
                                 {
                                     Normal = new Normal { Color = "rgb(238, 197, 102)" }
                                 },
                                 AreaStyle = new EntityStyle<AreaStyle>
                                 {
                                     Normal = new AreaStyle { Opacity = 0.05 }
                                 }
                             }
                         }
                     }
            , "Chart")
        )

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

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        [Route("chart/radar/aqi")]
        public ActionResult Aqi()
        {
            List<List<double>> data1 = new List<List<double>>
            {
                new List<double> {55, 9, 56, 0.46, 18, 6, 1},
                new List<double> {25, 11, 21, 0.65, 34, 9, 2},
                new List<double> {56, 7, 63, 0.3, 14, 5, 3},
                new List<double> {33, 7, 29, 0.33, 16, 6, 4},
                new List<double> {42, 24, 44, 0.76, 40, 16, 5},
                new List<double> {82, 58, 90, 1.77, 68, 33, 6},
                new List<double> {74, 49, 77, 1.46, 48, 27, 7},
                new List<double> {78, 55, 80, 1.29, 59, 29, 8},
                new List<double> {267, 216, 280, 4.8, 108, 64, 9},
                new List<double> {185, 127, 216, 2.52, 61, 27, 10},
                new List<double> {39, 19, 38, 0.57, 31, 15, 11},
                new List<double> {41, 11, 40, 0.43, 21, 7, 12},
                new List<double> {64, 38, 74, 1.04, 46, 22, 13},
                new List<double> {108, 79, 120, 1.7, 75, 41, 14},
                new List<double> {108, 63, 116, 1.48, 44, 26, 15},
                new List<double> {33, 6, 29, 0.34, 13, 5, 16},
                new List<double> {94, 66, 110, 1.54, 62, 31, 17},
                new List<double> {186, 142, 192, 3.88, 93, 79, 18},
                new List<double> {57, 31, 54, 0.96, 32, 14, 19},
                new List<double> {22, 8, 17, 0.48, 23, 10, 20},
                new List<double> {39, 15, 36, 0.61, 29, 13, 21},
                new List<double> {94, 69, 114, 2.08, 73, 39, 22},
                new List<double> {99, 73, 110, 2.43, 76, 48, 23},
                new List<double> {31, 12, 30, 0.5, 32, 16, 24},
                new List<double> {42, 27, 43, 1, 53, 22, 25},
                new List<double> {154, 117, 157, 3.05, 92, 58, 26},
                new List<double> {234, 185, 230, 4.09, 123, 69, 27},
                new List<double> {160, 120, 186, 2.77, 91, 50, 28},
                new List<double> {134, 96, 165, 2.76, 83, 41, 29},
                new List<double> {52, 24, 60, 1.03, 50, 21, 30},
                new List<double> {46, 5, 49, 0.28, 10, 6, 31}
            };

            List<List<double>> data2 = new List<List<double>>
            {
                new List<double> {26, 37, 27, 1.163, 27, 13, 1},
                new List<double> {85, 62, 71, 1.195, 60, 8, 2},
                new List<double> {78, 38, 74, 1.363, 37, 7, 3},
                new List<double> {21, 21, 36, 0.634, 40, 9, 4},
                new List<double> {41, 42, 46, 0.915, 81, 13, 5},
                new List<double> {56, 52, 69, 1.067, 92, 16, 6},
                new List<double> {64, 30, 28, 0.924, 51, 2, 7},
                new List<double> {55, 48, 74, 1.236, 75, 26, 8},
                new List<double> {76, 85, 113, 1.237, 114, 27, 9},
                new List<double> {91, 81, 104, 1.041, 56, 40, 10},
                new List<double> {84, 39, 60, 0.964, 25, 11, 11},
                new List<double> {64, 51, 101, 0.862, 58, 23, 12},
                new List<double> {70, 69, 120, 1.198, 65, 36, 13},
                new List<double> {77, 105, 178, 2.549, 64, 16, 14},
                new List<double> {109, 68, 87, 0.996, 74, 29, 15},
                new List<double> {73, 68, 97, 0.905, 51, 34, 16},
                new List<double> {54, 27, 47, 0.592, 53, 12, 17},
                new List<double> {51, 61, 97, 0.811, 65, 19, 18},
                new List<double> {91, 71, 121, 1.374, 43, 18, 19},
                new List<double> {73, 102, 182, 2.787, 44, 19, 20},
                new List<double> {73, 50, 76, 0.717, 31, 20, 21},
                new List<double> {84, 94, 140, 2.238, 68, 18, 22},
                new List<double> {93, 77, 104, 1.165, 53, 7, 23},
                new List<double> {99, 130, 227, 3.97, 55, 15, 24},
                new List<double> {146, 84, 139, 1.094, 40, 17, 25},
                new List<double> {113, 108, 137, 1.481, 48, 15, 26},
                new List<double> {81, 48, 62, 1.619, 26, 3, 27},
                new List<double> {56, 48, 68, 1.336, 37, 9, 28},
                new List<double> {82, 92, 174, 3.29, 0, 13, 29},
                new List<double> {106, 116, 188, 3.628, 101, 16, 30},
                new List<double> {118, 50, 0, 1.383, 76, 11, 31}
            };

            List<List<double>> data3 = new List<List<double>>
            {
                new List<double> {91, 45, 125, 0.82, 34, 23, 1},
                new List<double> {65, 27, 78, 0.86, 45, 29, 2},
                new List<double> {83, 60, 84, 1.09, 73, 27, 3},
                new List<double> {109, 81, 121, 1.28, 68, 51, 4},
                new List<double> {106, 77, 114, 1.07, 55, 51, 5},
                new List<double> {109, 81, 121, 1.28, 68, 51, 6},
                new List<double> {106, 77, 114, 1.07, 55, 51, 7},
                new List<double> {89, 65, 78, 0.86, 51, 26, 8},
                new List<double> {53, 33, 47, 0.64, 50, 17, 9},
                new List<double> {80, 55, 80, 1.01, 75, 24, 10},
                new List<double> {117, 81, 124, 1.03, 45, 24, 11},
                new List<double> {99, 71, 142, 1.1, 62, 42, 12},
                new List<double> {95, 69, 130, 1.28, 74, 50, 13},
                new List<double> {116, 87, 131, 1.47, 84, 40, 14},
                new List<double> {108, 80, 121, 1.3, 85, 37, 15},
                new List<double> {134, 83, 167, 1.16, 57, 43, 16},
                new List<double> {79, 43, 107, 1.05, 59, 37, 17},
                new List<double> {71, 46, 89, 0.86, 64, 25, 18},
                new List<double> {97, 71, 113, 1.17, 88, 31, 19},
                new List<double> {84, 57, 91, 0.85, 55, 31, 20},
                new List<double> {87, 63, 101, 0.9, 56, 41, 21},
                new List<double> {104, 77, 119, 1.09, 73, 48, 22},
                new List<double> {87, 62, 100, 1, 72, 28, 23},
                new List<double> {168, 128, 172, 1.49, 97, 56, 24},
                new List<double> {65, 45, 51, 0.74, 39, 17, 25},
                new List<double> {39, 24, 38, 0.61, 47, 17, 26},
                new List<double> {39, 24, 39, 0.59, 50, 19, 27},
                new List<double> {93, 68, 96, 1.05, 79, 29, 28},
                new List<double> {188, 143, 197, 1.66, 99, 51, 29},
                new List<double> {174, 131, 174, 1.55, 108, 50, 30},
                new List<double> {187, 143, 201, 1.39, 89, 53, 31}
            };

            ViewData["data1"] = data1;
            ViewData["data2"] = data2;
            ViewData["data3"] = data3;

            return View("~/Views/Chart/Radar/Aqi.cshtml");
        }
    }
}