|
|
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 Polygon()
{
List<ScatterSeriesData> observationData = new List<ScatterSeriesData>();
Random r = new Random();
for (int i = 0; i < 250; i++)
{
double x = r.Next(151, 176);
double y = r.Next(51, 104);
observationData.Add(new ScatterSeriesData { X = x, Y = y });
}
ViewData["observationData"] = observationData;
return View();
}
}
}
Controller Code
<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
@{ var chartOptions =
new Highcharts
{
Title = new Title
{
Text = "Height vs Weight"
},
Subtitle = new Subtitle
{
Text = "Polygon series in Highcharts"
},
XAxis = new List<XAxis>
{
new XAxis
{
GridLineWidth = 1,
Title = new XAxisTitle
{
Text = "Height (cm)"
},
StartOnTick = true,
EndOnTick = true,
ShowLastLabel = true
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Title = new YAxisTitle
{
Text = "Weight (kg)"
}
}
},
Legend = new Legend
{
Layout = LegendLayout.Vertical,
Align = LegendAlign.Right,
VerticalAlign = LegendVerticalAlign.Middle
},
Series = new List<Series>
{
new ScatterSeries
{
Name = "Observations",
Color = "black",
Data = ViewData["observationData"] as List<ScatterSeriesData>
},
new PolygonSeries
{
Name = "Target",
Color = "rgba(124,181,236,0.5)",
Data = new List<PolygonSeriesData>
{
new PolygonSeriesData { X = 153, Y = 42},
new PolygonSeriesData { X = 149, Y = 46},
new PolygonSeriesData { X = 149, Y = 55},
new PolygonSeriesData { X = 152, Y = 60},
new PolygonSeriesData { X = 159, Y = 70},
new PolygonSeriesData { X = 170, Y = 77},
new PolygonSeriesData { X = 180, Y = 70},
new PolygonSeriesData { X = 180, Y = 60},
new PolygonSeriesData { X = 173, Y = 52},
new PolygonSeriesData { X = 166, Y = 45}
}
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())