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

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chart for ASP.NET Core - BoxPlot Light Velocity</title>
    <script type="text/javascript" src="~/js/trirand/chart/corechart.min.js"></script>
    <script type="text/javascript" src="~/js/trirand/chart/corechart-boxplot.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",
                        Height = "500px",
                        Title = new List<Title>
                        {
                            new Title()
                            {
                                Left = "center",
                                Text = "Michelson-Morley Experiment"
                            },
                            new Title()
                            {
                                Text = "upper: Q3 + 1.5 * IRQ \n\n lower: Q1 - 1.5 * IRQ",
                                BorderColor = "#999",
                                BorderWidth = 1,
                                TextStyle = new TextStyle  {  FontSize = 14 },
                                Left = "10%",
                                Top = "90%"
                            }
                        },
                        Tooltip = new ToolTip
                        {
                            Trigger = TriggerType.Item,
                            AxisPointer = new AxisPointer { Type = AxisPointType.Shadow }
                        },
                        Grid = new List<Grid>
                        {
                            new Grid { Left = "10%", Right = "10%", Bottom = "15%" }
                        },
                        XAxis = new List<Axis>()
                        {
                            new CategoryAxis()
                            {
                                Name = "x",
                                // In BoxPlot mode, box data is calculated on the client side
                                // There is a global javascript variable equal to the ID of the chart
                                // plus the "Data" suffix, e.g in our case the ID of the chart is "Chart"
                                // therefore the client-side data is "ChartData"
                                // Boxplot data on the client-side has three collections
                                //   - axisData - the X axis calculated labels
                                //   - boxData - the Boxplot actual data
                                //   - outliers - ther ourliers of the data
                                Data = new JRaw("ChartData.axisData"),
                                BoundaryGap = true,
                                NameGap = 30,
                                SplitArea = new SplitArea { Show = true },
                                AxisLabel = new AxisLabel { Formatter = "expr {value}" },
                                SplitLine = new SplitLine() { Show = false }
                            }
                        },
                        YAxis = new List<Axis>()
                        {
                            new ValueAxis()
                            {
                               Name = "km/s minus 299,000",
                               SplitArea = new SplitArea { Show = true }
                            }
                        },
                        Series = new List<object>()
                        {
                            new Boxplot()
                            {
                                Name = "Boxplot",
                                // In BoxPlot mode, box data is calculated on the client side
                                // There is a global javascript variable equal to the ID of the chart
                                // plus the "Data" suffix, e.g in our case the ID of the chart is "Chart"
                                // therefore the client-side data is "ChartData"
                                // Boxplot data on the client-side has three collections
                                //   - axisData - the X axis calculated labels
                                //   - boxData - the Boxplot actual data
                                //   - outliers - ther ourliers of the data
                                DataClientID = "ChartData",
                                Data = new JRaw("ChartData.boxData"),
                                // BoxPlotData holds the actual box plot data in List<List<double>> nested lists of double value
                                BoxPlotData = ViewData["data1"] as  List<List<double>>,
                                Tooltip = new ToolTip
                                {
                                    Formatter = new JRaw(@" function (param) {
                                                                return [
                                                                    'Experiment ' + param.name + ': ',
                                                                    'upper: ' + param.data[4],
                                                                    'Q3: ' + param.data[3],
                                                                    'median: ' + param.data[2],
                                                                    'Q1: ' + param.data[1],
                                                                    'lower: ' + param.data[0]
                                                                ].join('<br/>')
                                                            }")
                                }
                            },
                            new Scatter
                            {
                                Name = "Outliers",
                                // In BoxPlot mode, box data is calculated on the client side
                                // There is a global javascript variable equal to the ID of the chart
                                // plus the "Data" suffix, e.g in our case the ID of the chart is "Chart"
                                // therefore the client-side data is "ChartData"
                                // Boxplot data on the client-side has three collections
                                //   - axisData - the X axis calculated labels
                                //   - boxData - the Boxplot actual data
                                //   - outliers - ther ourliers of the data
                                Data = new JRaw("ChartData.outliers"),
                            }
                        }
                    }
            , "Chart")
        )

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

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

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        [Route("chart/boxplot/lightvelocity")]
        public ActionResult LightVelocity()
        {
            List<List<double>> data1 = new List<List<double>>
            {
                new List<double> { 850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960 },
                new List<double> { 960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800 },
                new List<double> { 880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840 },
                new List<double> { 890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780 },
                new List<double> { 890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870 }
            };

            ViewData["data1"] = data1;

            return View("~/Views/Chart/BoxPlot/LightVelocity.cshtml");
        }
    }
}