|
![]() |
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 HeatMap() { List<HeatmapSeriesData> data = new List<HeatmapSeriesData>(); data.Add(new HeatmapSeriesData { X = 0, Y = 0, Value = 10 }); data.Add(new HeatmapSeriesData { X = 0, Y = 1, Value = 19 }); data.Add(new HeatmapSeriesData { X = 0, Y = 2, Value = 8 }); data.Add(new HeatmapSeriesData { X = 0, Y = 3, Value = 24 }); data.Add(new HeatmapSeriesData { X = 0, Y = 4, Value = 67 }); data.Add(new HeatmapSeriesData { X = 1, Y = 4, Value = 92 }); data.Add(new HeatmapSeriesData { X = 1, Y = 1, Value = 58 }); data.Add(new HeatmapSeriesData { X = 1, Y = 2, Value = 78 }); data.Add(new HeatmapSeriesData { X = 1, Y = 3, Value = 117 }); data.Add(new HeatmapSeriesData { X = 1, Y = 4, Value = 48 }); data.Add(new HeatmapSeriesData { X = 2, Y = 0, Value = 35 }); data.Add(new HeatmapSeriesData { X = 2, Y = 1, Value = 15 }); data.Add(new HeatmapSeriesData { X = 2, Y = 2, Value = 123 }); data.Add(new HeatmapSeriesData { X = 2, Y = 3, Value = 64 }); data.Add(new HeatmapSeriesData { X = 2, Y = 4, Value = 52 }); data.Add(new HeatmapSeriesData { X = 3, Y = 0, Value = 72 }); data.Add(new HeatmapSeriesData { X = 3, Y = 1, Value = 132 }); data.Add(new HeatmapSeriesData { X = 3, Y = 2, Value = 114 }); data.Add(new HeatmapSeriesData { X = 3, Y = 3, Value = 19 }); data.Add(new HeatmapSeriesData { X = 3, Y = 4, Value = 16 }); data.Add(new HeatmapSeriesData { X = 4, Y = 0, Value = 38 }); data.Add(new HeatmapSeriesData { X = 4, Y = 1, Value = 5 }); data.Add(new HeatmapSeriesData { X = 4, Y = 2, Value = 8 }); data.Add(new HeatmapSeriesData { X = 4, Y = 3, Value = 117 }); data.Add(new HeatmapSeriesData { X = 4, Y = 4, Value = 115 }); data.Add(new HeatmapSeriesData { X = 5, Y = 0, Value = 88 }); data.Add(new HeatmapSeriesData { X = 5, Y = 1, Value = 32 }); data.Add(new HeatmapSeriesData { X = 5, Y = 2, Value = 12 }); data.Add(new HeatmapSeriesData { X = 5, Y = 3, Value = 6 }); data.Add(new HeatmapSeriesData { X = 5, Y = 4, Value = 120 }); data.Add(new HeatmapSeriesData { X = 6, Y = 0, Value = 13 }); data.Add(new HeatmapSeriesData { X = 6, Y = 1, Value = 44 }); data.Add(new HeatmapSeriesData { X = 6, Y = 4, Value = 88 }); data.Add(new HeatmapSeriesData { X = 6, Y = 3, Value = 98 }); data.Add(new HeatmapSeriesData { X = 6, Y = 4, Value = 96 }); data.Add(new HeatmapSeriesData { X = 7, Y = 0, Value = 31 }); data.Add(new HeatmapSeriesData { X = 7, Y = 1, Value = 1 }); data.Add(new HeatmapSeriesData { X = 7, Y = 2, Value = 82 }); data.Add(new HeatmapSeriesData { X = 7, Y = 3, Value = 32 }); data.Add(new HeatmapSeriesData { X = 7, Y = 4, Value = 30 }); data.Add(new HeatmapSeriesData { X = 8, Y = 0, Value = 85 }); data.Add(new HeatmapSeriesData { X = 8, Y = 1, Value = 97 }); data.Add(new HeatmapSeriesData { X = 8, Y = 2, Value = 123 }); data.Add(new HeatmapSeriesData { X = 8, Y = 3, Value = 64 }); data.Add(new HeatmapSeriesData { X = 8, Y = 4, Value = 84 }); data.Add(new HeatmapSeriesData { X = 9, Y = 0, Value = 47 }); data.Add(new HeatmapSeriesData { X = 9, Y = 1, Value = 114 }); data.Add(new HeatmapSeriesData { X = 9, Y = 2, Value = 31 }); data.Add(new HeatmapSeriesData { X = 9, Y = 3, Value = 48 }); data.Add(new HeatmapSeriesData { X = 9, Y = 4, Value = 91 }); ViewData["heatMapData"] = data; return View(); } } }
@*You need to add a reference to jQuery prior to referencing the highcharts javascript file*@ <script src="http://code.highcharts.com/highcharts.js"></script> @* Additional chart types, such as "heatmap", are defined in the heatmap.js module *@ <script src="http://code.highcharts.com/modules/heatmap.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> @using Highsoft.Web.Mvc.Charts <script type="text/javascript"> function formatTooltip() { return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; } </script> @(Html.Highsoft().Highcharts( new Highcharts { Chart = new Chart { MarginTop = 40, MarginBottom = 80 }, Title = new Title { Text = "Sales per employee per weekday" }, XAxis = new List<XAxis> { new XAxis { Categories = new List<string> { "Alexander", "Marie", "Maximilian", "Sophia", "Lukas", "Maria", "Leon", "Anna", "Tim", "Laura" } } }, YAxis = new List<YAxis> { new YAxis { Categories = new List<string> { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" } } }, Legend = new Legend { Layout = LegendLayout.Vertical, Align = LegendAlign.Right, VerticalAlign = LegendVerticalAlign.Top, Y = 25, SymbolHeight = 280 }, Tooltip = new Tooltip { Formatter = "formatTooltip" }, ColorAxis = new ColorAxis { Min = 0, MinColor = "#FFFFFF", MaxColor = "#7cb5ec" }, Series = new List<Series> { new HeatmapSeries { Name = "Sales per employee", BorderWidth = 2, DataLabels = new HeatmapSeriesDataLabels { Enabled = true, Color = "#000000", }, Data = @ViewData["heatMapData"] as List<HeatmapSeriesData> } } } , "chart") )