@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 Newtonsoft.Json.Linq;
@using System.Collections.Generic

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chart for ASP.NET Core - Scatter Anscombe Quartet</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 = "700px",
                Height = "700px",
                Title = new List<Title>
                {
                    new Title()
                    {
                        Text = "Anscombe's quartet",
                        X = "center",
                        Y = 0
                    }
                },
                Tooltip = new ToolTip
                {
                    Formatter = "Group {a}: ({c})"
                },
                Grid = new List<Grid>
                {
                    new Grid() { X = "7%", Y = "7%", Width = "38%", Height = "38%" },
                    new Grid() { X2 = "7%", Y = "7%", Width = "38%", Height = "38%" },
                    new Grid() { X = "7%", Y2 = "7%", Width = "38%", Height = "38%" },
                    new Grid() { X2 = "7%", Y2 = "7%", Width = "38%", Height = "38%" },
                },
                XAxis = new List<Axis>()
                {
                    new ChartAxis<object>()  { GridIndex = 0, Min = 0, Max = 20 },
                    new ChartAxis<object>()  { GridIndex = 1, Min = 0, Max = 20 },
                    new ChartAxis<object>()  { GridIndex = 2, Min = 0, Max = 20 },
                    new ChartAxis<object>()  { GridIndex = 3, Min = 0, Max = 20 }
                },
                YAxis = new List<Axis>()
                {
                    new ChartAxis<object>()  { GridIndex = 0, Min = 0, Max = 15 },
                    new ChartAxis<object>()  { GridIndex = 1, Min = 0, Max = 15 },
                    new ChartAxis<object>()  { GridIndex = 2, Min = 0, Max = 15 },
                    new ChartAxis<object>()  { GridIndex = 3, Min = 0, Max = 15 }
                },
                Series = new List<Series>()
                {
                    new Scatter
                    {
                       Name = "I",
                       XAxisIndex = 0,
                       YAxisIndex = 0,
                       Data = ViewData["data1"] as List<List<double>>,
                       MarkLine = ViewData["markLine"] as MarkLine
                    },
                    new Scatter
                    {
                       Name = "II",
                       XAxisIndex = 1,
                       YAxisIndex = 1,
                       Data = ViewData["data2"] as List<List<double>>,
                       MarkLine = ViewData["markLine"] as MarkLine
                    },
                    new Scatter
                    {
                       Name = "IIII",
                       XAxisIndex = 2,
                       YAxisIndex = 2,
                       Data = ViewData["data3"] as List<List<double>>,
                       MarkLine = ViewData["markLine"] as MarkLine
                    },
                    new Scatter
                    {
                       Name = "IV",
                       XAxisIndex = 3,
                       YAxisIndex = 3,
                       Data = ViewData["data4"] as List<List<double>>,
                       MarkLine = ViewData["markLine"] as MarkLine
                    }
                }
            }
            , "Chart")
            )

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

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

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        [Route("chart/scatter/anscombequartet")]
        public ActionResult AnscombeQuartet()
        {
            List<List<double>> data1 = new List<List<double>>
            {
                new List<double> {10.0, 8.04},
                new List<double> {8.0, 6.95},
                new List<double> {13.0, 7.58},
                new List<double> {9.0, 8.81},
                new List<double> {11.0, 8.33},
                new List<double> {14.0, 9.96},
                new List<double> {6.0, 7.24},
                new List<double> {4.0, 4.26},
                new List<double> {12.0, 10.84},
                new List<double> {7.0, 4.82},
                new List<double> {5.0, 5.68}
            };

            List<List<double>> data2 = new List<List<double>>
            {
                new List<double> {10.0, 9.14},
                new List<double> {8.0, 8.14},
                new List<double> {13.0, 8.74},
                new List<double> {9.0, 8.77},
                new List<double> {11.0, 9.26},
                new List<double> {14.0, 8.10},
                new List<double> {6.0, 6.13},
                new List<double> {4.0, 3.10},
                new List<double> {12.0, 9.13},
                new List<double> {7.0, 7.26},
                new List<double> {5.0, 4.74}
            };

            List<List<double>> data3 = new List<List<double>>
            {
                new List<double> {10.0, 7.46},
                new List<double> {8.0, 6.77},
                new List<double> {13.0, 12.74},
                new List<double> {9.0, 7.11},
                new List<double> {11.0, 7.81},
                new List<double> {14.0, 8.84},
                new List<double> {6.0, 6.08},
                new List<double> {4.0, 5.39},
                new List<double> {12.0, 8.15},
                new List<double> {7.0, 6.42},
                new List<double> {5.0, 5.73}
            };

            List<List<double>> data4 = new List<List<double>>
            {
                new List<double> {8.0, 6.58},
                new List<double> {8.0, 5.76},
                new List<double> {8.0, 7.71},
                new List<double> {8.0, 8.84},
                new List<double> {8.0, 8.47},
                new List<double> {8.0, 7.04},
                new List<double> {8.0, 5.25},
                new List<double> {19.0, 12.50},
                new List<double> {8.0, 5.56},
                new List<double> {8.0, 7.91},
                new List<double> {8.0, 6.89}
            };

            MarkLine markLine = new MarkLine
            {
                Animation = false,
                Label = new ItemStyle
                {
                    Normal = new Normal
                    {
                        Formatter = "y = 0.5 * x + 3",
                        TextStyle = new TextStyle { Align = HorizontalType.Right }
                    }
                },
                LineStyle = new EntityStyle<LineStyle>
                {
                    Normal = new LineStyle { Type = LineStyleType.Solid }
                },
                ToolTip = new ToolTip
                {
                    Formatter = "y = 0.5 * x + 3"
                },
                Data = new List<List<AnscombeMarksLineData>>
                {
                    new List<AnscombeMarksLineData>
                    { 
                        new AnscombeMarksLineData
                        {
                            coord = new List<int> { 0, 3 },
                            symbol = "none"
                        },
                        new AnscombeMarksLineData
                        {
                            coord = new List<int> { 20, 13 },
                            symbol = "none"
                        }
                    }
                }
            };

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

            return View("~/Views/Chart/Scatter/AnscombeQuartet.cshtml");
        }

        public class AnscombeMarksLineData
        {
            public List<int> coord { get; set; }
            public string symbol { get; set; }
        }
    }
}