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 GaugeSpeedometer()
        {
            List<GaugeSeriesData> gaugeData = new List<GaugeSeriesData>();
            gaugeData.Add(new GaugeSeriesData { Y = 80 });
            
            ViewData["gaugeData"] = gaugeData;

            return View();
        }
    }
}

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

@* Additional chart types, such as "gauge", are defined in the highcharts-more.js module *@

<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

@{ var chartOptions = new Highcharts
    {
                Chart = new Highsoft.Web.Mvc.Charts.Chart
                {
                    PlotBorderColor = null,
                    PlotBackgroundImage = null,
                    PlotBorderWidth = 0,
                    PlotShadow = new Shadow
                    {
                        Enabled = false
                    }
                },
                Title = new Title
                {
                    Text = "Speedometer"
                },
                Pane = new Pane
                {
                    StartAngle = -150,
                    EndAngle = 150
                },
                YAxis = new List<YAxis>
                {
                new YAxis
                {
                    Min = 0,
                    Max = 200,
                    //MinorTickIntervalNumber = 5,
                    MinorTickWidth = 1,
                    MinorTickLength = 10,
                    MinorTickPosition = YAxisMinorTickPosition.Inside,
                    MinorTickColor = "#666",

                    TickPixelInterval = 30,
                    TickWidth = 2,
                    TickPosition = YAxisTickPosition.Inside,
                    TickLength = 10,
                    TickColor = "#666",
                    Labels = new YAxisLabels
                    {
                        Step = 2
                    },
                    Title = new YAxisTitle
                    {
                        Text = "km/h"
                    },
                    PlotBands = new List<YAxisPlotBands>
                    {
                        new YAxisPlotBands
                        {
                            From = 0,
                            To = 120,
                            Color = "#55BF3B"
                        },
                        new YAxisPlotBands
                        {
                            From = 120,
                            To = 160,
                        },
                        new YAxisPlotBands
                        {
                            From = 160,
                            To = 200,
                        Color = "#DF5353"
						}
                    }

                }
            },
        Series = new List<Series>
        {
            new GaugeSeries
            {
                Name = "Spped",
                Data = @ViewData["gaugeData"] as List<GaugeSeriesData>,
                Tooltip = new GaugeSeriesTooltip
                {
                        ValueSuffix = " km/h"
                }
            }
        }
    };

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

@Html.Raw(renderer.RenderHtml())

<script type="text/javascript">

    window.setTimeout(function () {
        var chart = Highcharts.charts[0];
        if (!chart.renderer.forExport) {
            setInterval(function () {
                var point = chart.series[0].points[0],
                    newVal,
                    inc = Math.round((Math.random() - 0.5) * 20);

                newVal = point.y + inc;
                if (newVal < 0 || newVal > 200) {
                    newVal = point.y - inc;
                }

                point.update(newVal);

            }, 3000);
        }
    }, 3000);


</script>