@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.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 - Area - Area Symbols</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 = "900px",
                        Tooltip = new ToolTip
                        {
                            Trigger = TriggerType.Axis
                        },
                        Legend = new Legend
                        {
                            Data = new List<string> { "Mail", "Affiliate", "Video", "Search" }
                        },
                        Toolbox = new ToolBox
                        {
                            Show = true,
                            Feature = new Feature
                            {
                                Mark = new Mark { Show = true },
                                DataView = new DataView { Show = true, ReadOnly = false },
                                MagicType = new MagicType { Show = true, Type = new List<object> { "line", "bar", "stack", "tiled" } },
                                Restore = new Restore { Show = true },
                                SaveAsImage = new FeatureImage { Show = true }
                            }

                        },
                        Calculable = true,
                        XAxis = new List<Axis>()
                        {
                            new CategoryAxis()
                            {
                                BoundaryGap = false,
                                Data = new List<string> { "Monday "," Tuesday "," Wednesday "," Thursday "," Friday "," Saturday "," Sunday" }
                            }
                        },
                        YAxis = new List<Axis>()
                        {
                            new ValueAxis()
                            {
                            }
                        },
                        Series = new List<object>()
                        {
                            new Line()
                            {
                                Name = "Mail",
                                Smooth = true,
                                Stack = "one",
                                ItemStyle = new ItemStyle
                                {
                                    Normal = new Normal
                                    {
                                        AreaStyle = new AreaStyle
                                        {
                                            Color = new JRaw(@"new coreCharts.graphic.RadialGradient(0.3, 0.3, 0.8, [{ offset: 0, color: '#f7f8fa' }, { offset: 1, color: '#cdd0d5' }])"),
                                        }
                                    }
                                },
                                Data = ViewData["data1"] as List<object>
                            },
                            new Line()
                            {
                                Name = "Affiliate",
                                Smooth = true,
                                Stack = "one",
                                Symbol = "image:///images/corechart/favicon.png",
                                SymbolSize = 8,


                                Data = ViewData["data2"] as List<object>
                            },
                            new Line()
                            {
                                Name = "Video",
                                Smooth = true,
                                Stack = "one",
                                Symbol = "arrow",
                                SymbolSize = 6,
                                SymbolRotate = -45,
                                ItemStyle = new ItemStyle
                                {
                                    Normal = new Normal
                                    {
                                        Color = "red",
                                        LineStyle = new LineStyle { Width = 2, Type = LineStyleType.Dashed }
                                    },
                                    Emphasis = new Emphasis { Color = "blue "}
                                },
                                Data = ViewData["data3"] as List<object>
                            },
                            new Line()
                            {
                                Name = "Search",
                                Smooth = true,
                                Symbol = "emptyCircle",
                                LineStyle = new ItemStyle
                                {
                                    Normal = new Normal
                                    {
                                        Width = 2,
                                        Color = new JRaw(@"new coreCharts.graphic.RadialGradient(0.4, 0.4, 0.9, [{ offset: 0, color: '#a7f8fa' }, { offset: 1, color: '#9dd0d5' }])"),
                                        ShadowColor = "rgba(0,0,0,0.5)",
                                        ShadowBlur = 10,
                                        ShadowOffsetX = 8,
                                        ShadowOffsetY = 8
                                    },
                                    Emphasis = new Emphasis
                                    {
                                        Label = new StyleLabel { Show = true }
                                    }
                                },
                                Data = ViewData["data4"] as List<object>
                            },
                        }
                     }
            , "Chart")
        )

        <br />
        <div>
            @await Component.InvokeAsync("CodeTabs", new { product = "chart", example = "area/areasymbols" })
        </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/area/areasymbols")]
        public ActionResult AreaSymbols()
        {
            List<object> data1 = new List<object>()
            {
                120, 132, 301, 134,
                new Data { Value = 90, Symbol = "droplet", SymbolSize = 5},
                230,210
            };
            List<object> data2 = new List<object>()
            {
                120, 82,
                new Data
                {
                    Value = 201,
                    Symbol = "star",
                    SymbolSize = 15,
                    ItemStyle = new ItemStyle
                    {
                        Normal = new Normal
                        {
                            Label = new StyleLabel
                            {
                                Show = true,
                                TextStyle = new TextStyle {FontSize = 20, FontFamily = "Verdana", FontWeight = "bold"}
                            }
                        }
                    }
                },
                new Data { Value = 134, Symbol = "none " },
                new Data { Value = 230, Symbol = "emptypin", SymbolSize = 8 },
                110
            };
            List<object> data3 = new List<object>()
            {
                320, 332, "-", 334,
                new Data
                {
                    Value = 390,
                    Symbol = "star6",
                    SymbolSize = 20,
                    SymbolRotate = 10,
                    ItemStyle = new ItemStyle
                    {
                        Normal = new Normal
                        {
                            Color = "yellowgreen"
                        },
                        Emphasis = new Emphasis
                        {
                            Color = "orange",
                            Label = new StyleLabel
                            {
                                Show = true,
                                Position = StyleLabelStyle.Inside,
                                TextStyle = new TextStyle { FontSize = 20 }
                            }
                        }
                    }                    
                },
                330, 320
            };
            List<object> data4 = new List<object>()
            {
                620, 732, 791,
                new Data { Value = 734, Symbol = "emptyHeart", SymbolSize = 10},
                  890, 930, 820
            };

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

            return View("~/Views/Chart/Area/AreaSymbols.cshtml");
        }
    }
}