using MVC_Demo.Models;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Web.Mvc;
using Highsoft.Web.Mvc.Charts;

namespace MVC_Demo.Areas.Highcharts.Controllers.Shared
{
    public partial class SharedController : Controller
    {
        public ActionResult Annotations()
        {
            List<AnnotationsData> rawList = DataReceiver.GetDataForAnnotationsChart();
            List<AreaSeriesData> list = new List<AreaSeriesData>();

            foreach (var item in rawList)
                list.Add(new AreaSeriesData { X = item.X, Y = item.Y });//X = item.X,

            ViewData["data"] = list;

            return View();
        }
        
    }
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>

@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering
@using System.Collections

@{ var chartOptions = new Highcharts
    {
        Chart = new Highsoft.Web.Mvc.Charts.Chart
        {
            ZoomType = ChartZoomType.X,
            //Panning = new ChartPanning
            //{ 
            //    Enabled = true
            //},
            PanKey = ChartPanKey.Shift
        },
        Title = new Title
        {
            Text = "2017 Tour de France Stage 8: Dole - Station des Rousses"
        },
        Subtitle = new Subtitle
        {
            Text = "An annotated chart in Highcharts"
        },
        Annotations = new List<Annotations>
{
        new Annotations
        {
            LabelOptions = new AnnotationsLabelOptions
            {
                BackgroundColor = "rgba(255,255,255,0.5)",
                VerticalAlign = AnnotationsLabelOptionsVerticalAlign.Top,
                Y = 15
            },
            Labels = new List<AnnotationsLabels>
{
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 27.98,
                        Y = 255
                    },
                    Text = "Arbois"
                },
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 45.5,
                        Y = 611
                    },
                    X  = -10,
                    Text = "Montrond"
                },
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 63,
                        Y = 651
                    },
                    Y = 25,
                    Text = "Mont-sur-Monnet"
                },
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 84,
                        Y = 789
                    },
                    Text = "Bonlieu"
                },
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 129.5,
                        Y = 382
                    },
                    Text = "Chassal"
                },
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 159,
                        Y = 443
                    },
                    Text = "Saint-Claude"
                }
            }
        },
        new Annotations
        {
            Labels = new List<AnnotationsLabels>
{
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 101.44,
                        Y = 1026
                    },
                    Text = "Col de la Joux"
                },
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 138.5,
                        Y = 748
                    },
                    X = 20,
                    Text = "Côte de Viry"
                },
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 176.4,
                        Y = 1202
                    },
                    Text = "Montée de la Combe<br>de Laisia Les Molunes"
                }
            }
        },
        new Annotations
        {
            LabelOptions = new AnnotationsLabelOptions
            {
                Shape = "connector",
                Align = AnnotationsLabelOptionsAlign.Right,
                Crop = true,
                Style = new Hashtable(){ { "fontSize", "0.8em" } }
            },
            Labels = new List<AnnotationsLabels>
{
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 96.2,
                        Y = 783
                    },
                    Text = "6.1 km climb<br>4.6% on avg."
                },
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 134.5,
                        Y = 540
                    },
                    Text = "7.6 km climb<br>5.2% on avg."
                },
                new AnnotationsLabels
                {
                    Point = new 
                    {
                        XAxis = "X",
                        YAxis = "Y",
                        X = 172.2,
                        Y = 925
                    },
                    Text = "11.7 km climb<br>6.4% on avg."
                }
            }
        }
    },
        XAxis = new List<XAxis>()
{
        new XAxis
        {
            Id = "X",
            Labels = new XAxisLabels { Format = "{value} km" },
            MinRange = 5,
            Title = new XAxisTitle { Text = "Distance" }
        }
    },
        YAxis = new List<YAxis>()
{
        new YAxis
        {
            Id = "Y",
            StartOnTick = true,
            EndOnTick = false,
            MaxPadding = 0.35,
            Title = new YAxisTitle { Text = null },
            Labels = new YAxisLabels { Format = "{value} m" }
        }
    },
        Tooltip = new Tooltip
        {
            HeaderFormat = "Distance: {point.x:.1f} km<br>",
            PointFormat = "{point.y} m a. s. l.",
            Shared = true
        },
        Legend = new Legend
        {
            Enabled = false
        },
        Series = new List<Series>()
{
        new AreaSeries
        {
            Data = @ViewData["data"] as List<AreaSeriesData>,
            LineColor = "#030303",
            Color = "#90ED7D",
            FillOpacity = 0.5,
            Name = "Elevation",
            Marker = new AreaSeriesMarker { Enabled = false },
            Threshold = null,
            TurboThreshold = 2000

        }
    }
    };

    chartOptions.ID = "chart";
    var renderer = new HighchartsRenderer(chartOptions);
}

@Html.Raw(renderer.RenderHtml())