using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Highsoft.Web.Mvc.Charts;


namespace MVC_Demo.Areas.Highcharts.Controllers.Shared
{
    public partial class SharedController : Controller
    {
        public ActionResult ColumnRange()
        {
            List<ColumnrangeSeriesData> temperatureData = new List<ColumnrangeSeriesData>();

            temperatureData.Add(new ColumnrangeSeriesData { Low = -9.7, High = 9.4  });
            temperatureData.Add(new ColumnrangeSeriesData { Low = -8.7, High = 6.5  });
            temperatureData.Add(new ColumnrangeSeriesData { Low =  -3.5, High = 9.4  });
            temperatureData.Add(new ColumnrangeSeriesData { Low = -1.4, High = 19.9 });
            temperatureData.Add(new ColumnrangeSeriesData { Low = 0.0, High = 22.6 });
            temperatureData.Add(new ColumnrangeSeriesData { Low = 2.9, High = 29.5 });
            temperatureData.Add(new ColumnrangeSeriesData { Low = 9.2, High = 30.7  });
            temperatureData.Add(new ColumnrangeSeriesData { Low = 7.3, High = 26.5 });
            temperatureData.Add(new ColumnrangeSeriesData { Low = 4.4, High = 18.0 });
            temperatureData.Add(new ColumnrangeSeriesData { Low = -3.1, High = 11.4 });
            temperatureData.Add(new ColumnrangeSeriesData { Low = -5.2, High = 10.4  });
            temperatureData.Add(new ColumnrangeSeriesData { Low = -13.5, High = 9.8 });

            ViewData["temperatureData"] = temperatureData;

            return View();
        }
    }
}

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

@*The highchart-more.js file contains definitions for additional chart types not available
    in the main highcharts.js file such as "arearange". You need to include this file if you
    are using these types of charts*@

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

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

<script type="text/javascript">

    function formatDataLabels() {
        return this.y + '°C';
    }

</script>

@{ var chartOptions = new Highcharts
    {
        Chart = new Highsoft.Web.Mvc.Charts.Chart
        {
            Inverted = true
        },
        Title = new Title
        {
            Text = "Temperature variation by month"
        },
        Subtitle = new Subtitle
        {
            Text = "Observed in Vik i Sogn, Norway, 2009"
        },

        XAxis = new List<XAxis>
    {
                new XAxis
                {
                    Categories = new List<string> {
                        "Jan",
                        "Feb",
                        "Mar",
                        "Apr",
                        "May",
                        "Jun",
                        "Jul",
                        "Aug",
                        "Sep",
                        "Oct",
                        "Nov",
                        "Dec"
                    }
                }
            },
        YAxis = new List<YAxis>
    {
                new YAxis
                {
                    Title = new YAxisTitle
                    {
                        Text = "Temperature ( °C )"
                    }
                }
            },
        Tooltip = new Tooltip
        {
            ValueSuffix = "°C"
        },
        PlotOptions = new PlotOptions
        {
            Columnrange = new PlotOptionsColumnrange
            {
                DataLabels = new PlotOptionsColumnrangeDataLabels 
                {
                    Enabled = true,
                    Formatter = "formatDataLabels"
                }
            }
        },
        Legend = new Legend
        {
            Enabled = true
        },
        Series = new List<Series>
    {
                new ColumnrangeSeries
                {
                    Name = "Temperatures",
                    Data = @ViewData["temperatureData"] as List<ColumnrangeSeriesData>
                }
            }
    };

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

@Html.Raw(renderer.RenderHtml())