|
![]() |
Controller Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC_Demo.Areas.Highcharts.Controllers.Shared
{
public partial class SharedController : Controller
{
public ActionResult GaugeVuMeter()
{
return View();
}
}
}
Controller Code
<script src="https://code.highcharts.com/highcharts.js"></script>
<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
{
Type = ChartType.Gauge,
PlotBorderWidth = 1,
PlotBackgroundColor = "#FFF4C6",
PlotBackgroundImage = null,
Height = 200
},
Title = new Title
{
Text = "VU meter"
},
Pane = new Pane
{
StartAngle = -45,
EndAngle = 45,
Center = new string[] { "25%", "145%" },
Size = "300"
},
Tooltip = new Tooltip
{
Enabled = false
},
YAxis = new List<YAxis>
{
new YAxis
{
Id = "Y1",
Min = - 20,
Max = 6,
MinorTickPosition = YAxisMinorTickPosition.Outside,
TickPosition = YAxisTickPosition.Outside,
Labels = new YAxisLabels
{
Distance = "20%"
},
PlotBands = new List<YAxisPlotBands>
{
new YAxisPlotBands
{
From = 0,
To = 6,
Color = "#C02316",
InnerRadius = "100%",
OuterRadius = "105%",
}
},
Title = new YAxisTitle
{
Text = "VU<br/><span style=\"font-size:8px\">Channel A</span>",
Y = -40
}
}
},
PlotOptions = new PlotOptions
{
Gauge = new PlotOptionsGauge
{
DataLabels = new PlotOptionsGaugeDataLabels
{
Enabled = true,
BorderWidth = 5,
//Format = ""
VerticalAlign = PlotOptionsGaugeDataLabelsVerticalAlign.Bottom,
ClassName = "css_class"
},
Dial = new PlotOptionsGaugeDial
{
Radius = "100%"
}
}
},
Series = new List<Series>
{
new GaugeSeries
{
Name = "Channel A",
Data = new List<GaugeSeriesData>
{
new GaugeSeriesData { Y = -20 }
},
YAxis = "Y1"
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())