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

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chart for ASP.NET Core - Gauge - Car Gauges Dark</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 = "800px",
                         Height ="600px",
                         BackgroundColor = "#1b1b1b",
                         Tooltip = new ToolTip { Formatter = "{a} <br/>{c} : {b}" },
                         Toolbox = new ToolBox
                         {
                             Feature = new Feature
                             {
                                 Restore = new Restore { },
                                 SaveAsImage = new FeatureImage { }
                             }
                         },
                         Series = new List<object>
                         {
                             new Gauge
                             {
                                 Name = "One",
                                 Min = 0,
                                 Max = 220,
                                 SplitNumber = 11,
                                 Radius = "50%",
                                 AxisLine = new AxisLine
                                 {
                                     LineStyle = new LineStyle
                                     {
                                         Color = new List<List<object>> {
                                               new List<object> { 0.09, "lime" },
                                               new List<object> { 0.82, "#1e90ff" },
                                               new List<object> { 1, "#ff4500" }
                                         },
                                         Width = 3, ShadowColor = "#fff", ShadowBlur = 10
                                     }
                                 },
                                 AxisLabel = new AxisLabel
                                 {
                                     TextStyle = new TextStyle
                                     {
                                         FontWeight = "bolder",
                                         Color = "#fff",
                                         ShadowColor = "#fff",
                                         ShadowBlur = 10
                                     }
                                 },
                                 SplitLine = new SplitLine
                                 {
                                     Length = 25,
                                     LineStyle = new LineStyle
                                     {
                                         Width = 3,
                                         Color = "#fff",
                                         ShadowColor = "#fff",
                                         ShadowBlur = 10
                                     }
                                 },
                                 Pointer = new GaugePointer
                                 {
                                     ShadowColor = "#fff",
                                     ShadowBlur = 5
                                 },
                                 Detail = new GaugeDetail
                                 {
                                    BackgroundColor = "rgba(30,144,255,0.8)",
                                    BorderWidth= 1,
                                    BorderColor= "#fff",
                                    ShadowColor = "#fff",
                                    ShadowBlur = 5,
                                    OffsetCenter = new List<string> { "0", "50%" },
                                    TextStyle = new TextStyle
                                    {
                                        FontWeight = "bolder",
                                        Color = "#fff"
                                    }
                                 },
                                 Data = new List<Data>
                                 {
                                     new Data { Name = "km/h", Value = 40 }
                                 }
                             },
                             new Gauge
                             {
                                 Name = "Two",
                                 Center = new List<string> { "25%", "55%" },
                                 Min = 0,
                                 Max = 7,
                                 EndAngle = 45,
                                 SplitNumber = 7,
                                 Radius = "30%",
                                 AxisLine = new AxisLine
                                 {
                                     LineStyle = new LineStyle
                                     {
                                         Color = new List<List<object>> {
                                               new List<object> { 0.09, "lime" },
                                               new List<object> { 0.82, "#1e90ff" },
                                               new List<object> { 1, "#ff4500" }
                                         },
                                         Width = 2, ShadowColor = "#fff", ShadowBlur = 10
                                     }
                                 },
                                 AxisLabel = new AxisLabel
                                 {
                                     TextStyle = new TextStyle
                                     {
                                         FontWeight = "bolder",
                                         Color = "#fff",
                                         ShadowColor = "#fff",
                                         ShadowBlur = 10
                                     }
                                 },
                                 SplitLine = new SplitLine
                                 {
                                     Length = 20,
                                     LineStyle = new LineStyle
                                     {
                                         Color = "auto",
                                         ShadowColor = "#fff",
                                         ShadowBlur = 10
                                     }
                                 },
                                 Pointer = new GaugePointer
                                 {
                                     Width = 5,
                                     ShadowColor = "#fff",
                                     ShadowBlur = 5
                                 },
                                 Detail = new GaugeDetail
                                 {
                                    BorderColor= "#fff",
                                    ShadowColor = "#fff",
                                    ShadowBlur = 5,
                                    OffsetCenter = new List<string> { "25", "20%" },
                                    TextStyle = new TextStyle
                                    {
                                        FontWeight = "bolder",
                                        Color = "#fff"
                                    }
                                 },
                                 Title = new GaugeTitle
                                 {
                                     OffsetCenter = new List<string> { "0", "-30%"},
                                     TextStyle = new TextStyle
                                     {
                                         FontWeight = "bolder",
                                         FontStyle = FontStyleType.Italic,
                                         Color = "#fff",
                                         ShadowColor = "#fff",
                                         ShadowBlur = 10
                                     }
                                 },
                                 Data = new List<Data>
                                 {
                                     new Data { Name = "x1000 r/min", Value = 1.5 }
                                 }
                             },
                             new Gauge
                             {
                                 Name = "Three",
                                 Center = new List<string> { "75%", "50%" },
                                 Min = 0,
                                 Max = 2,
                                 StartAngle = 135,
                                 EndAngle = 45,
                                 SplitNumber = 2,
                                 Radius = "30%",
                                 AxisLine = new AxisLine
                                 {
                                     LineStyle = new LineStyle
                                     {
                                         Color = new List<List<object>> {
                                               new List<object> { 0.2, "lime" },
                                               new List<object> { 0.8, "#1e90ff" },
                                               new List<object> { 1, "#ff4500" }
                                         },
                                         Width = 2
                                     }
                                 },
                                 AxisLabel = new AxisLabel
                                 {
                                     TextStyle = new TextStyle
                                     {
                                         FontWeight = "bolder",
                                         Color = "#fff",
                                         ShadowColor = "#fff",
                                         ShadowBlur = 10
                                     },
                                     Formatter = new JRaw(@"function(v){
                                                                switch (v + '')
                                                                {
                                                                    case '0': return 'E';
                                                                    case '1': return 'Gas';
                                                                    case '2': return 'F';
                                                                }
                                                            }")
                                 },
                                 SplitLine = new SplitLine
                                 {
                                     Length = 15,
                                     LineStyle = new LineStyle
                                     {
                                         Width = 3,
                                         Color = "#fff",
                                         ShadowColor = "#fff",
                                         ShadowBlur = 10
                                     }
                                 },
                                 Pointer = new GaugePointer
                                 {
                                     Width = 2,
                                     ShadowColor = "#fff",
                                     ShadowBlur = 5
                                 },
                                 Detail = new GaugeDetail
                                 {
                                    Show = false
                                 },
                                 Title = new GaugeTitle
                                 {
                                     Show = false
                                 },
                                 Data = new List<Data>
                                 {
                                     new Data { Name = "gas", Value = 0.5 }
                                 }
                             },
                             new Gauge
                             {
                                 Name = "Four",
                                 Center = new List<string> { "75%", "50%" },
                                 Min = 0,
                                 Max = 2,
                                 StartAngle = 315,
                                 EndAngle = 225,
                                 SplitNumber = 2,
                                 Radius = "30%",
                                 AxisLine = new AxisLine
                                 {
                                     LineStyle = new LineStyle
                                     {
                                         Color = new List<List<object>> {
                                               new List<object> { 0.2, "lime" },
                                               new List<object> { 0.8, "#1e90ff" },
                                               new List<object> { 1, "#ff4500" }
                                         },
                                         Width = 2
                                     }
                                 },
                                 AxisLabel = new AxisLabel
                                 {
                                     TextStyle = new TextStyle
                                     {
                                         FontWeight = "bolder",
                                         Color = "#fff",
                                         ShadowColor = "#fff",
                                         ShadowBlur = 10
                                     },
                                     Formatter = new JRaw(@"function(v){
                                                                switch (v + '')
                                                                {
                                                                    case '0': return 'H';
                                                                    case '1': return 'Water';
                                                                    case '2': return 'C';
                                                                }
                                                            }")
                                 },
                                 SplitLine = new SplitLine
                                 {
                                     Length = 15,
                                     LineStyle = new LineStyle
                                     {
                                         Width = 3,
                                         Color = "#fff",
                                         ShadowColor = "#fff",
                                         ShadowBlur = 10
                                     }
                                 },
                                 Pointer = new GaugePointer
                                 {
                                     Width = 2,
                                     ShadowColor = "#fff",
                                     ShadowBlur = 5
                                 },
                                 Detail = new GaugeDetail
                                 {
                                    Show = false
                                 },
                                 Title = new GaugeTitle
                                 {
                                     Show = false
                                 },
                                 Data = new List<Data>
                                 {
                                     new Data { Name = "gas", Value = 0.5 }
                                 }
                            }
                         }
                     }
                , "Chart")
        )

        <script type="text/javascript">

            setInterval(function () {
                var option = Chart.getOption();

                option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
                option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
                option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;

                Chart.setOption(option, true);
            }, 2000);

        </script>

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

using Microsoft.AspNetCore.Mvc;

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        [Route("chart/gauge/cardark")]
        public ActionResult CarDark()
        {
            return View("~/Views/Chart/Gauge/CarDark.cshtml");
        }
    }
}