@using Trirand.Web.Mvc
@using Trirand.Web.Mvc.Chart;
@using Trirand.Web.Mvc.Chart.Style;
@using Newtonsoft.Json.Linq;

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chartfor ASP.NET MVC - Map - Airlines Flight</title>
    <script type="text/javascript" src="~/Scripts/trirand/chart/corechart.min.js"></script>
    <script type="text/javascript" src="~/Scripts/trirand/chart/maps/world.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></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()
                                {
                                    Top = "5%",
                                    Left = "center",
                                    Text = "World Flights",
                                    TextStyle = new TextStyle { Color = "#eee" }
                                }
                            },
                            Tooltip = new ToolTip
                            {
                                Formatter = new JRaw(@"function (param) {
                                                var route = myData.routes[param.dataIndex];
                                                return myData.airports[route[1]][1] + ' > ' + myData.airports[route[2]][1];
                                            }")
                            },
                            Geo = new Geo
                            {
                                Map = "world",
                                Left = 0,
                                Right = 0,
                                Silent = true,
                                ItemStyle = new ItemStyle
                                {
                                    Normal = new Normal { BorderColor = "#003", Color = "#005" }
                                }
                            },
                            Series = new List<object>()
                            {
                                // series will be defined on the-client side after fetching the data from REST call
                                // see below for details
                            }
                     }
            , "myChart")
        )
   

        <script type="text/javascript">

            $(document).ready(function () {
                myChart.showLoading();

                $.get('/content/data/chart/airline-flights.json', function (data) {

                    myData = data;
                    myChart.hideLoading();

                    function getAirportCoord(idx) {
                        return [data.airports[idx][3], data.airports[idx][4]];
                    }
                    var routes = data.routes.map(function (airline) {
                        return [
                            getAirportCoord(airline[1]),
                            getAirportCoord(airline[2])
                        ];
                    });

                    option = {
                        series: [{
                            type: 'lines',
                            coordinateSystem: 'geo',
                            data: routes,
                            large: true,
                            largeThreshold: 100,
                            lineStyle: {
                                normal: {
                                    opacity: 0.05,
                                    width: 0.5,
                                    curveness: 0.3
                                }
                            },
                            blendMode: 'lighter'
                        }]
                    };

                    myChart.setOption(option);
                });
            });

        </script>

        <br />
        <div>
             
        </div>
    </div>
</body>
</html>

using System.Web.Mvc;

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        public ActionResult Airlines()
        {
            return View("");
        }
    }
}