@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 - MultipleBoxPlots</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>

    <script type="text/javascript">

         function toolTipFormatter(param) {
             return [
                 'Experiment ' + param.name + ': ',
                 'upper: ' + param.data[0],
                 'Q1: ' + param.data[1],
                 'median: ' + param.data[2],
                 'Q3: ' + param.data[3],
                 'lower: ' + param.data[4]
             ].join('<br/>')
         }

    </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 = "Multiple Categories"
                            }
                        },
                        Legend = new Legend
                        {
                            Y = "10%",
                            Data = new List<string> { "Category 0", "Category 1", "Category 2", "Category 3" }

                        },
                        Tooltip = new ToolTip
                        {
                            Trigger = TriggerType.Item,
                            AxisPointer = new AxisPointer { Type = AxisPointType.Shadow }
                        },
                        Grid = new List<Grid>
                        {
                            new Grid { Left = "10%", Right = "10%", Bottom = "15%", Top = "20%" }
                        },
                        XAxis = new List<Axis>()
                        {
                            new CategoryAxis()
                            {
                                // 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("Data0.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()
                            {
                               Min = -400,
                               Max = 600,
                               Name = "km/s minus 299,000",
                               SplitArea = new SplitArea { Show = false }
                            }
                        },
                        DataZoom = new List<DataZoom>
                        {
                            new DataZoom
                            {
                                Type = DataZoomType.Inside,
                                Start = 0,
                                End = 20
                            },
                            new DataZoom
                            {
                                Show = true,
                                Height = 20,
                                Type = DataZoomType.Slider,
                                Top = "90%",
                                XAxisIndex = new JRaw("[0]"),
                                Start = 0,
                                End = 20
                            }

                        },
                        Series = new List<object>()
                        {
                            new Boxplot()
                            {
                                Name = "Category 0",
                                // 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("Data0.boxData"),
                                DataClientID = "Data0",
                                // BoxPlotData holds the actual box plot data in List<List<double>> nested lists of double value
                                BoxPlotData = ViewData["data0"] as  List<List<double>>,
                                Tooltip = new ToolTip
                                {
                                    Formatter = new JRaw("toolTipFormatter")
                                }
                            },
                            new Boxplot()
                            {
                                Name = "Category 1",
                                // 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("Data1.boxData"),
                                DataClientID = "Data1",
                                BoxPlotData = ViewData["data1"] as  List<List<double>>,
                                Tooltip = new ToolTip
                                {
                                    Formatter = new JRaw("toolTipFormatter")
                                }
                            },
                            new Boxplot()
                            {
                                Name = "Category 0",
                                // 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("Data2.boxData"),
                                DataClientID = "Data2",
                                BoxPlotData = ViewData["data2"] as  List<List<double>>,
                                // BoxPlotData holds the actual box plot data in List<List<double>> nested lists of double value
                                Tooltip = new ToolTip
                                {
                                    Formatter = new JRaw("toolTipFormatter")
                                }
                            }
                        }
                    }
            , "Chart")
        )

       

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

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

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        [Route("chart/boxplot/multipleboxplots")]
        public ActionResult MultipleBoxPlots()
        {
            Random r = new Random();

            for (var seriesIndex = 0; seriesIndex < 3; seriesIndex++)
            {
                List<List<double>> seriesData = new List<List<double>>();
                for (var i = 0; i < 18; i++)
                {
                    var cate = new List<double>();
                    for (var j = 0; j < 100; j++)
                    {
                        cate.Add(r.NextDouble() * 200);
                    }
                    seriesData.Add(cate);
                }

                ViewData["data" + seriesIndex.ToString()] = seriesData;
            }

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