|
|
Controller Code
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 SplineSymbols()
{
List<double> tokyoValues = new List<double> { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 };
List<double> londonValues = new List<double> { 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8 };
List<SplineSeriesData> tokyoData = new List<SplineSeriesData>();
List<SplineSeriesData> londonData = new List<SplineSeriesData>();
foreach (double value in tokyoValues)
{
SplineSeriesData data = new SplineSeriesData();
data.Y = value;
if (value == 26.5)
{
data.Marker.Symbol = "url(https://www.highcharts.com/demo/gfx/sun.png)";
}
tokyoData.Add(data);
}
foreach (double value in londonValues)
{
SplineSeriesData data = new SplineSeriesData();
data.Y = value;
if (value == 3.9)
{
data.Marker.Symbol = "url(https://www.highcharts.com/demo/gfx/snow.png)";
}
londonData.Add(data);
}
ViewData["tokyoData"] = tokyoData;
ViewData["londonData"] = londonData;
return View();
}
}
}
Controller Code
<script src="https://code.highcharts.com/highcharts.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 formatYAxisLabels() {
return this.value + '°';
}
</script>
@{ var chartOptions =
new Highcharts
{
Title = new Title
{
Text = "Monthly Average Temperature"
},
XAxis = new List<XAxis>
{
new XAxis
{
Categories = new List<string> { "Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec" },
Crosshair = new XAxisCrosshair
{
Width = 1
}
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Title = new YAxisTitle
{
Text = "Temperature (°C)"
},
Labels = new YAxisLabels
{
Formatter = "formatYAxisLabels"
},
Crosshair = new YAxisCrosshair
{
Width = 1
}
}
},
Tooltip = new Tooltip
{
Shared = true
},
PlotOptions = new PlotOptions
{
Spline = new PlotOptionsSpline
{
Marker = new PlotOptionsSplineMarker
{
Radius = 4,
LineColor = "#666666",
LineWidth = 1
}
}
},
Series = new List<Series>
{
new SplineSeries
{
Name = "Tokyo",
Data = @ViewData["tokyoData"] as List<SplineSeriesData>
},
new SplineSeries
{
Name = "London",
Data = @ViewData["londonData"] as List<SplineSeriesData>
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())