@using Trirand.Web.Core
@using Trirand.Web.Core.Chart
@using Trirand.Web.Core.Chart.ChartAxis;
@using Trirand.Web.Core.Chart.ChartFeature;
@using Trirand.Web.Core.Chart.Series;
@using CoreDemo.Controllers.Chart;

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chart for ASP.NET Core - Bar Brush</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",
             BackgroundColor = "#eee",
             Legend = new Legend
             {
                 Align = HorizontalType.Left,
                 Data = new List<string> { "bar", "bar2", "bar3", "bar4" },
                 Left = 10
             },
             Brush = new Trirand.Web.Core.Chart.Brush
             {
                Toolbox = new List<BrushToolBoxType>()
                {
                        BrushToolBoxType.Rect,
                        BrushToolBoxType.Polygon,
                        BrushToolBoxType.LineX,
                        BrushToolBoxType.LineY,
                        BrushToolBoxType.Keep,
                        BrushToolBoxType.Clear
                },
             },
             Toolbox = new ToolBox
             {
                 Feature = new Feature
                 {
                     MagicType = new MagicType
                     {
                         Type = new List<object>() { "stack", "tiled" }
                     },
                     DataView = new DataView
                     {
                     }
                 }
             },
             Tooltip = new ToolTip
             {
             },
             XAxis = new List<Axis>()
             {
                    new CategoryAxis()
                    {
                        Name = "X Axis",
                        Silent = false,
                        Data = ViewData["xAxisData"] as List<string>,
                        SplitLine = new SplitLine() {  Show = false },
                        AxisLine = new AxisLine { OnZero = true },
                        SplitArea = new SplitArea { Show = false}
                    }
             },
             YAxis = new List<Axis>()
             {
                    new ValueAxis
                    {
                        Inverse = true,
                        SplitArea = new SplitArea { Show = false }
                    }
             },
             Grid = new List<Trirand.Web.Core.Chart.Grid>()
             {
                   new Trirand.Web.Core.Chart.Grid
                   {
                       Left = 100
                   }
             },
             VisualMap = new Trirand.Web.Core.Chart.VisualMap
             {
                Type = "continuous",
                Dimension = 1,
                Text = new List<string> { "High", "Low" },
                Inverse = true,
                ItemHeight = 200,
                Calculable = true,
                Min = -2,
                Max = 6,
                Top = 60,
                Left = 10
            },
            Series = new List<object>()
            {
                new Bar()
                {
                    Name = "bar",
                    Data = ViewData["data1"] as List<double>,
                    Stack = "one",
                    ItemStyle = new Trirand.Web.Core.Chart.Style.ItemStyle
                    {
                        Normal = new Trirand.Web.Core.Chart.Style.Normal { },
                        Emphasis = new Trirand.Web.Core.Chart.Style.Emphasis
                        {
                            BarBorderWidth = 1,
                            ShadowBlur = 10,
                            ShadowOffsetX = 0,
                            ShadowOffsetY = 0,
                            ShadowColor = "rgba(0,0,0,0.5)"
                        }
                    }
                },
                new Bar()
                {
                    Name = "bar2",
                    Data = ViewData["data2"] as List<double>,
                    Stack = "one",
                    ItemStyle = new Trirand.Web.Core.Chart.Style.ItemStyle
                    {
                        Normal = new Trirand.Web.Core.Chart.Style.Normal { },
                        Emphasis = new Trirand.Web.Core.Chart.Style.Emphasis
                        {
                            BarBorderWidth = 1,
                            ShadowBlur = 10,
                            ShadowOffsetX = 0,
                            ShadowOffsetY = 0,
                            ShadowColor = "rgba(0,0,0,0.5)"
                        }
                    }
                },
                    new Bar()
                    {           
                        Name = "bar3",
                        Data = ViewData["data3"] as List<double>,
                        Stack = "two",
                        ItemStyle = new Trirand.Web.Core.Chart.Style.ItemStyle
                        {
                            Normal = new Trirand.Web.Core.Chart.Style.Normal { },
                            Emphasis = new Trirand.Web.Core.Chart.Style.Emphasis
                            {
                                BarBorderWidth = 1,
                                ShadowBlur = 10,
                                ShadowOffsetX = 0,
                                ShadowOffsetY = 0,
                                ShadowColor = "rgba(0,0,0,0.5)"
                            }
                        }
                    },
                    new Bar()
                    {
                        Name = "bar4",
                        Data = ViewData["data4"] as List<double>,
                        Stack = "two",
                        ItemStyle = new Trirand.Web.Core.Chart.Style.ItemStyle
                        {
                            Normal = new Trirand.Web.Core.Chart.Style.Normal { },
                            Emphasis = new Trirand.Web.Core.Chart.Style.Emphasis
                            {
                                BarBorderWidth = 1,
                                ShadowBlur = 10,
                                ShadowOffsetX = 0,
                                ShadowOffsetY = 0,
                                ShadowColor = "rgba(0,0,0,0.5)"
                            }
                        }
                    }
                }
            },
             "myChart")
        )

        <script type="text/javascript">

            myChart.on('brushSelected', renderBrushed);

            function renderBrushed(params) {
                var brushed = [];
                var brushComponent = params.batch[0];

                for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                    var rawIndices = brushComponent.selected[sIdx].dataIndex;
                    brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
                }

                myChart.setOption({
                    title: {
                        backgroundColor: '#333',
                        text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
                        bottom: 0,
                        right: 0,
                        width: 100,
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        }
                    }
                });
            }

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

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

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        List<double> brushData1 = new List<double>();
        List<double> brushData2 = new List<double>();
        List<double> brushData3 = new List<double>();
        List<double> brushData4 = new List<double>();
        List<string> brushXAxisData = new List<string>();

        public void GenerateBrushData()
        {
            Random r = new Random();
            for (var i = 0; i < 10; i++)
            {
                brushXAxisData.Add("Class" + i);
                brushData1.Add(r.Next(6) * 2);
                brushData2.Add(r.Next(6));
                brushData3.Add(r.Next(6) * 5);
                brushData4.Add(r.Next(6) + 0.3);
            }
        }

        [Route("chart/bar/brush")]
        public ActionResult Brush()
        {
            GenerateBrushData();

            ViewData["data1"] = brushData1;
            ViewData["data2"] = brushData2;
            ViewData["data3"] = brushData3;
            ViewData["data4"] = brushData4;
            ViewData["xAxisData"] = xAxisData;

            return View("~/Views/Chart/Bar/Brush.cshtml");
        }
    }    
}